window.addEvent('domready', function(){
	if ($chk($$('div.right_side div.videos')[0]))
		new ListVideo();
});


var ListVideo = new Class({
	Implements: [Events, Options],
	options : {
	},
	
	initialize:function(options){
		this.setOptions(options);
		
		this.load = false; 
		this.currentObject = null;
		
		this.frame = $$('div.right_side div.videos')[0];
		
		this.shadowEffect = new Asset.image('/Public/Style/Img/backgrounds/shadow-effect.png', {
			onload : function(){
				 this.load = true;
			}.bind(this)
		});
		
		this.frame_thumb = new Asset.image('/Public/Style/Img/backgrounds/video-page_bg.png', {
			
		});
		
		$$('div.right_side div.videos div.video a').each(function(element, index){
			element.addEvent('click', function(e, el){
				this.mosaicOut(el);
				e.stop();
			}.bindWithEvent(this, [element]));
			element.getParent('div.video').set('id', uniqid.get());
		}.bind(this));
		
	},
	
	mosaicOut : function(element){
		if ($chk($('shadow-effect-wrapper')))
			return;
		
		this.framePosition = {
			'top' : Display.getY(this.frame),
			'left': Display.getX(this.frame),
			'width' : this.frame.getSize().x,
			'height' : this.frame.getSize().y
		};
		this.erasePager();
		this.currentObject = element.getParent('div.video');
		
		$$('div.right_side div.videos div.video').each(function(el, index){
			var position = {
					'top' : Display.getY(el),
					'left': Display.getX(el)
			};
			
			var newEl = el.clone();
			
			newEl.getElements('a')[0].addEvent('click', function(e){
				e.stop();
			});
			
			newEl.set('class', 'video_abs');
			newEl.setStyles({
				'top' : position.top.toString()+"px",
				'left': position.left.toString()+"px",
				'zIndex' : 1
			}).inject($$('body')[0]);
			
			el.setStyle('visibility', 'hidden');
			
			
			if (el.get('id') == this.currentObject.get('id')) {
				newEl.setStyle('zIndex', 100);
				
				var size = {
						'x' : this.currentObject.getElements('a.img span img')[0].getSize().x,
						'y' : this.currentObject.getElements('a.img span.mask')[0].getSize().y
				};
				
				this.newID = uniqid.get();
				newEl.set('id', this.newID);
				var imgFrame = new Element('img', {
					'class' : 'frame_thumb',
					'src' : this.frame_thumb.src
				}).inject(newEl, 'top');
				
				newEl.getElements('a.img span img')[0].set('class', 'display_none');
				newEl.getElements('a.img span img')[1].set('class', '').setStyles({
					'width' : size.x.toString()+"px"
			//		'height': size.y.toString()+"px"
				});
				newEl.getElements('a.img')[0].set('class', 'no_img');
			}
			
			
		}.bind(this));
		
		this.overflowWrapper = new Element('div', {
			'styles' : {
				'position' : 'absolute',
				'left' : this.framePosition.left.toString()+"px",
				'top' : this.framePosition.top.toString()+"px",
				'width': this.framePosition.width.toString()+"px",
				'height': this.framePosition.height.toString()+"px",
				'zIndex': 50,
				'overflow':'hidden'
			},
			'id' : 'shadow-effect-overflow'
		}).inject($$('body')[0]);
		
		this.wrapper = new Element('div', {
			'styles' : {
				'background' : 'url('+this.shadowEffect.src+') top left no-repeat',
				'width' : this.shadowEffect.width.toString()+"px",
				'height' : this.shadowEffect.height.toString()+"px",
				'overflow' : 'hidden',
				'position' : 'absolute',
				'top' : this.framePosition.height.toString()+"px",
				'left' : this.framePosition.width.toString()+"px",
				'zIndex': 10
			},
			'id' : 'shadow-effect-wrapper'
		}).inject($('shadow-effect-overflow')); 
		
		this.morph = new Fx.Morph(this.wrapper, {
			'duration' : 'long',
			onStart : function(){
				
			}.bind(this),
			onComplete : function(){
				this.placeThumbToBig();
				$$('div.video_abs').each(function(element, index){
					if (element.get('id') != this.newID)
						element.destroy();
				}.bind(this))
			}.bind(this)
			
		}).start({
			'top' : (0-this.framePosition.height).toString()+'px',
			'left': (0-this.framePosition.width).toString()+'px'
		});
	},
	
	placeThumbToBig : function(){
		var element = $(this.newID);
		var morph = new Fx.Morph(element,{
			onComplete:function(){
				this.maginifyThumb();
			}.bind(this)
		}).start({
			'top' : this.framePosition.top.toString()+"px",
			'left': (this.framePosition.left+15).toString()+"px"
		});
	},
	
	maginifyThumb : function(){
		var element = $(this.newID);
		var back = element.getElements('img.frame_thumb')[0];
		var img = element.getElements('a.no_img span.mask img')[1];
		var title = element.getElements('span.title')[0];
		
		var morphBack = new Fx.Morph(back).start({
			'height' : '366px',
			'width' : '645px'
		});
		
		var morphImg = new Fx.Morph(img).start({
			'height' : '350px',
			'width' : '625px'
		});
		
		title.setStyle('width', '100%');
		var morphTitle = new Fx.Morph(title, {
			onComplete:function(){
				this.replaceContent();
			}.bind(this)
		}).start({
			'marginTop' : '390px',
			'fontSize' : '17px'
		});
	},
	
	replaceContent : function(){
		var element = $(this.newID);
		var img = element.getElements('a.no_img span.mask img')[1];
		var video_page = new Element('div', {
			'class' : 'video_page',
			'styles' : {
				'visibility' : 'hidden'
			}
		});
		var video_wrapper = new Element('div', {
			'class' : 'video_wrapper'
		}).inject(video_page);
		
		var video_content = new Element('div', {
			'class' : 'video_content',
			'html' : '<img src=\''+img.get('src')+'\' />'+element.getFirst('pre.display_none').get('text').replace('&gt;', '<').replace('&lt;', '>').replace('src', 'style=\'visibility:hidden;\' onload=\'showVimeoFrame(this)\' src')
		}).inject(video_wrapper);
		var cloneTitle = element.getElements('span.title')[0].clone();
		
		cloneTitle.getElements('span.label')[0].set('class', 'title');
		
		var h1 = new Element('h1', {
			'class' : 'main',
			'html' : cloneTitle.get('html')
		}).inject(video_page);
		
		var text_content = new Element('div', {
			'class' : 'text_content', 
			'html' : '<p>'+element.getFirst('p.display_none').get('html')+'</p>'
		}).inject(video_page);
		
		this.overflowWrapper.destroy();
		video_page.replaces($$('div.right_side div.videos')[0]);
		element.destroy();
		video_page.setStyle('visibility', 'visible');
	},
	
	erasePager : function() {
		if ($chk($$('div.pager a.prev')[0]))
			$$('div.pager a.prev')[0].destroy();
		if ($chk($$('div.pager a.next')[0]))
			$$('div.pager a.next')[0].destroy();
	}
	
	
});

function showVimeoFrame(element){
	element.getPrevious('img').destroy();
	element.setStyle('visibility', 'visible');
}