var MediaEffects = {};

MediaEffects.MoveUp = Class.create({
	initialize: function(element,newElement) {
		newElement.setStyle({top:'209px',left:'0'});
		new Effect.Move(element,{y:-209,mode:'absolute'});
		new Effect.Move(newElement,{y:0,mode:'absolute'});
	}
});
MediaEffects.FadeOut = Class.create({
	initialize: function(element,newElement) {
		new Effect.Fade(element,{duration:1.5});
		newElement.setStyle({top:'0',left:'0',opacity:0});
		new Effect.Appear(newElement,{queue: 'end',duration:'1'});
	}
});


MediaClient = new Class.create({
	
	mediaconfig: {},
	
	loaded: false,
	
	activeMediaId: null,
	
	step: 1,
	
	currentPeriodicalExecuter: null,
	
	initialize: function() {
		try {
			this.loadMediaInfo();
		} catch (e) {
			console.log(e);
		}
		
		this.bindChangeFlashes();
		
		this.activeMediaId = $('mainliner').down('.media-item').getAttribute('id').replace(/media-item-/,'');
		$('roller-'+this.activeMediaId).addClassName('selected');
		
		
	},
	
	bindChangeFlashes: function() {
		$('move-flash-forward').on('click',this.changeFlash.bind(this,1));
		$('move-flash-back').on('click',this.changeFlash.bind(this,-1));
		
		
		$$('#rollers .roller').each(function(e){
		
			e.on('click',function(){
				newid = e.getAttribute('id').replace(/roller-/,'');
				this.swithFlastTo(newid);
			}.bind(this));
			
		}.bind(this));
		
	},
	

	changeFlash: function(direction) {
		
		current = $('media-item-'+this.activeMediaId);
		
		if (direction==1) {
			if (!(next = current.next('.media-item'))) {
				next = $('mainliner').down('.media-item');
			}
		} else {
			if (!(next = current.previous('.media-item'))) {
				next = $('mainliner').select('.media-item').last();
			}
		}
		
		this.stop();
		this.changeFlahses(current,next);
		this.play();
		
	},
	
	swithFlastTo: function(toId) {
		current = $('media-item-'+this.activeMediaId);
		
		if (toId==this.activeMediaId) {
			return false;
		}
		
		to = $('media-item-'+toId);
		this.changeFlahses(current,to);
	},
	
	changeFlahses: function(from,to) {
		
		$$('.rollers .roller').invoke('removeClassName','selected');
		id = to.getAttribute('id').replace(/media-item-/,'');
		$('roller-'+id).addClassName('selected');
		
		this.activeMediaId = parseInt(id);
		
		//change z-indexes
		from.setStyle({'zIndex':50});
		to.setStyle({'zIndex':49});
		
		to.show();
		to.setStyle({top:'0',left:'0'});
		
		new Effect.Move(from,{mode:'absolute',x:40,duration:0.3,queue:{ position: 'end', scope: 'swithflashes'}});
		new Effect.Move(from,{mode:'absolute',x:-2000,duration:0.6,queue: {position: 'end',scope:'swithflashes'},
			afterFinish: function() {
				from.setStyle({'zIndex':1});
			}
		});
		
		//fix to
		to.select('.framecontent').each(function(p){
			p.setStyle({'marginTop':'-'+p.getHeight()/2+'px','top':'50%'});
		});
		
		
	},
	
	
	play: function() {
		//animate every "sec" seconds
		sec = 5;
		
		this.currentPeriodicalExecuter = new PeriodicalExecuter(this.startAnimation.bind(this),sec);
		
	},
	
	stop: function() {
		if (this.currentPeriodicalExecuter) {
			this.currentPeriodicalExecuter.stop();
		}
	},
	
	startAnimation: function() {
		
		cid = this.activeMediaId;
		
		nowElement = $('frame_'+cid+"_"+this.step);
		
		//choose next element
		next = parseInt(this.step)+1;
		if (!(nextElement = $('frame_'+cid+"_"+next))) {
			/*if (nextElement==2) {
				return true; //no animation if there is just one step
			}*/
			nextElement = $('frame_'+cid+"_1");
			this.step=0;
		} 
		this.step++;
		this.animate(nowElement,nextElement);
	},
	
	
	/**
	 * Swith element "from" to element "to"
	 * @param {Element} from
	 * @param {Element} to
	 */
	animate: function(from,to) {
		
		//new MediaEffects.MoveUp(from,to);
		
		new MediaEffects.FadeOut(from,to);
		//new MediaEffects.Q(from,to);
		
		
	},
	
	loadMediaInfo: function() {
		
		new Ajax.Request('/mediainfo.jax',{
			onSuccess: function(t) {
				data = t.responseText.evalJSON();
				this.loaded = true;
				this.mediaconfig = data;
				this.constructFlash();
			}.bind(this)
		});
		
	},
	
	_contructFlash: function(flash) {
		id = flash.getAttribute('id').replace(/media-item-/,'');
		config = this.mediaconfig[id];
		
		if (config == null) {
			return true;
		}
		
		n = 1;
		config.each(function(el){
			k = new Element('div',{'class':'frame',id:'frame_'+id+'_'+n});
			if (n==1) {
				k.addClassName('visible');
			}
			n++;
			p = new Element('div',{'class':'framecontent'}).update(el.text);
			k.appendChild(p);
			$('mediacontent_'+id).appendChild(k);
			
			p.setStyle({'marginTop':'-'+p.getHeight()/2+'px','top':'50%'});
			
		});
	},
	
	constructFlash: function() {
		try {
		 	$('mainliner').select('.media-item').each(this._contructFlash.bind(this));
		} catch(e) {
			console.log(e);
		}
		this.play();
	}
	
	
	
});

document.observe('dom:loaded',function(){
	new MediaClient();
});