var SECONDS_PER_SLIDE = 5;
	        var copx = {
				getSetId: function(o){
					this.last = (!this.last) ? new Date().getTime() : this.last+1;
					if(!o.id){
						o.id = this.last.toString();
					}
					return o.id;
				},
				trimString: function( str ){  return str.replace(/^\s*|\s*$/g,""); },
				fuseMarkup: function( templateStr, o )
				{
					return templateStr.replace(
						/{([^{}]*)}/g,
						function(a,b){
							var r = o[b];
							return typeof r === 'string' ? r : a;
						});
				},
				elFromTemplate: function( template, o ) { 
					return copx.elFromString(copx.fuseMarkup(template, o)); 
				},
				elFromString: function( str ){
					var temp = document.createElement('div'); 
					temp.innerHTML = str; 
					return temp.firstChild; 
				}
			}

	    	$(document).ready(function(){
	    		var slides = [];
	    		var player = $('#myPlayer')[0];
	    		var index = -1;
	    		var isPlaying = true;
	    		var zIndx = 10;
	        
	        	var buffer = [];
	    		$('#metadata .slide').each(
	    		    function(i){
	    				var templ = '<div id="slide_template">'
		    				+ '<div id="{id}" class="playerScreen" style="top:0px;left:0px;position:absolute">'
		    				+ '<img src="{picture}" >'
							+ '<div class="playerText" style="top:0px;left:0px;position:absolute">'
							+ '<div class="title">{title}</div>'
							+ '<div class="content">{text}</div>'
							+ '</div>'
							+ '</div>'
		    				+ '</div>';
		    				
	    				var data = {
	    					picture: $('#metadata img')[i].src,
	    					title: "", //$('#metadata .title')[i].innerHTML,
	    					text: "" //$('#metadata .text')[i].innerHTML,
	    				}
	    				copx.getSetId(data);
	    				slides.push(data);
	    				buffer.push(copx.fuseMarkup(templ,data));
	    			}
	    		); 
	    		player.innerHTML = buffer.join('');
	    		
	    		var timer; 
	    		
	    		var getForwardIndex = function(){
	    			return ( index < slides.length - 1 ) ? index+1 : 0;
	    		}
	    		
	    		var getBackupIndex = function(){
	    			return ( index > 0 ) ? index-1 : slides.length -1;
	    		}
	    		
	    		var forwardIndex = function(){
	    			index = getForwardIndex();
	    		}
	    		
	    		var backupIndex = function(){
	    			index = getBackupIndex();
	    		}
	    		
	    				
				var togglePlayState = function(){
					var x = $($('#myPlayer .playStateToggle')[0]);
					if(isPlaying){
						x.css({background: 'url("images/play.png")'});				
						clearTimeout(timer);
						isPlaying = false;
					}else{
						x.css({background: 'url(images/pause.png)'});				
						isPlaying = true;
						forwardIndex();
						playSlide();
					}
				}
				
				
				var showSlide = function(){
					var node = $('#'+slides[index].id)[0];
					var b = $('#'+slides[getBackupIndex()].id)[0];
					$(b).fadeIn('1');
					var parent = node.parentNode;
					var t = parent.removeChild(parent.firstChild);
					t.style.zIndex++;
					var p = parent.appendChild(t);
					$(p).fadeIn(2000, function(){
					    $(p).fadeOut(2000,function(){
							backupIndex();
							setTimeout(playSlide,3000);
						});
					});
				}
				
	    		var playSlide = function(){
	    			if(isPlaying){
						showSlide();
					}
	    		}
	    		
	    		$($(player,'.back')[0]).bind("click", function(){ backupIndex(); showSlide(); });	    		
	    		$($(player,'.playStateToggle')[0]).bind("click", togglePlayState);
	    		$($(player,'.forward')[0]).bind("click",  function(){ forwardIndex(); showSlide(); });
	    		
	    		backupIndex();
	    		playSlide();
	    	});