var VideoQuickLook = new Class({
	Implements:[Options],
	options:{
		type:null,
		_ele:null,
		_qlTitle:'',
		_qlDescription:'',
		_qlSrc:'',
		_bgOpacity: 0.1,
		_bgColor: '#000',
		_qlbgColor: '#fff',
		_qltmpl:'<div class="popup-top-sx"><div class="popup-top-dx"></div></div><div class="popup-content-sx"><div class="popup-content-dx"><div class="popup-img"></div></div></div><div class="popup-bottom-sx"><div class="popup-bottom-dx"></div></div>',
		_noElement:'@QuickLook Class:\n No object passed to costructor\n\nAvaillable type are:\n\n{HTMLObject} a DOMobject\n{Array} an array of HTMLobjects or Strings of id\n{String}',
		_notImplemented:'@QuickLook Class:\n This constructor is not implemented yet',
		pGeometry:null,
		eGeometry:null,
		qlGeometry:null,
		quicklook:null,
		qlEffect:null,
		imgEffect:null,
		width:400,
		height:300
	},
	flv_src:null,
	/**
	 * 
	 * @param {Object} ele
	 * @param {Object} opt
	 */
    initialize: function(src,ele,conf){
		this.flv_src=src;
	  this.options._ele=ele;
	  this.setOptions(conf);
	  //da implementare la possibilità di passare un Array di oggetti
	  this.options.type="HTMLObject";

	  if(this.options.type){
	  	switch(this.options.type){
			case 'HTMLObject':
				this.getPageGeometry();
				this.calculateQLGeometry(ele,{width:this.options.width,height:this.options.height});
				this.createQuickLook();
				$$('body').adopt(this.quicklook);
				
				this.show();
			break;
			default:
				this.debug(this.options._notImplemented);
			break;
		}
		window.addEvent('keydown',function(event){
			if(event.key=='enter' || event.key=='x' || event.key=='X'){
				this.close();
			}
		}.bind(this));
	  }else{
	  	this.debug(this.options._noElement);
	  }
 		
    },
	show:function(){
		this.options.qlEffect.cancel();
		this.options.qlEffect.start({
			'opacity':[0,1],
			'width': [this.options.qlGeometry.initWidth,this.options.qlGeometry.endWidth],
			'height': [this.options.qlGeometry.initHeight,this.options.qlGeometry.endHeight],
			'top': [this.options.qlGeometry.initTop,this.options.qlGeometry.endTop],
			'left': [this.options.qlGeometry.initLeft,this.options.qlGeometry.endLeft]
		});
		
	},
	/**
	 * 
	 */
	fitToImage:function(){
		this.options.qlEffect.cancel();
		var dim=this.quicklook.getElement('.quicklook-box').getDimensions();
		var pos=this.quicklook.getElement('.quicklook-box').getCoordinates();
		this.options.qlEffect.start({
			'opacity':[0,1],
			'width': [dim.width,this.options.qlGeometry.endWidth],
			'height': [dim.height,this.options.qlGeometry.endHeight],
			'top': [pos.top,this.options.qlGeometry.endTop],
			'left': [pos.left,this.options.qlGeometry.endLeft]
		});
	},
	close:function(){
		window.removeEvent('keydown',function(event){
			if(event.key=='enter' || event.key=='x' || event.key=='X'){
				this.close();
			}
		}.bind(this));
		this.quicklook.dispose();
	},
	/**
	 * 
	 */
	getPageGeometry:function(){
		this.options.pGeometry={
			height : document.getScrollSize().y,
			width : document.getScrollSize().x,
			scrollTop: document.getScroll().y,
			scrollLeft: document.getScroll().x,
			visibleHeight: document.getCoordinates().width,
			visibleWidth: document.getCoordinates().height
		}
	},
	/**
	 * 
	 * @param {Object} ele
	 */
	calculateQLGeometry:function(ele,endDim){
		var endWidth=endDim.width;
		var endHeight=endDim.height;
		var endTop
		var endLeft;
		var e = ele.getCoordinates();
		endTop = document.getScroll().y + ((document.getCoordinates().height - endHeight) / 2);
		endLeft = document.getScroll().x + ((document.getCoordinates().width - endWidth) / 2);
		this.options.qlGeometry={
			initWidth:e.width.toFloat(),
			initHeight:e.height.toFloat(),
			endWidth:endWidth,
			endHeight:endHeight,
			initTop:e.top.toFloat(),
			initLeft:e.left.toFloat(),
			endTop:endTop,
			endLeft:endLeft
		};
		
	},
	/**
	 * 
	 */
	addEffects:function(ele){
		this.options.qlEffect=new Fx.Morph(ele,
			{
				duration: 200,
				transition: Fx.Transitions.Sine.easeOut,
				onComplete:function(){
					this.showCloseBtn();
					//this.debug('Opening complete');
				}.bind(this)
			}
		);
	},
	/**
	 * 
	 */
	createQuickLook:function(){
		this.quicklook=new Element('div',{'id':'quicklook-container','class':'quicklook-container'}).adopt([this.addBackground(),this.addQuickLookBox()]);
	},
	/**
	 * 
	 */
	addBackground:function(){
		var o=new Element('div',
			{
				'class':'quicklook-ovarlay'
			}).setStyles({
					'position':'absolute',
					'top':'0px',
					'left':'0px',
					'margin':'0px',
					'padding':'0px',
					'width':this.options.pGeometry.width+'px',
					'height':this.options.pGeometry.height+'px',
					'opacity': this.options._bgOpacity,
					'z-index':1000,
					'background-color':this.options._bgColor
					}
			);
		return o;	
	},
	/**
	 * 
	 */
	addQuickLookBox:function(){
		var qlb=new Element('div',
					{
						'id':'quicklook-box',
						'class':'quicklook-box',
						'html':this.options._qltmpl
					}).setStyles(
						{
						'position':'absolute',
						'top':this.options.qlGeometry.initTop+'px',
						'left':this.options.qlGeometry.initLeft+'px',
						'width':this.options.qlGeometry.initWidth+'px',
						'height':this.options.qlGeometry.initHeight+'px',
						'z-index':1001,
						'background-color':this.options._qlbgColor,
						'opacity':'0.2'
						}
					).adopt([this.addCloseBtn(),this.addLoader()]);
		qlb.getElement('.popup-img').adopt(this.addVideoBox());
		qlb.addClass(this.options.additionalCSS);
		this.addEffects(qlb);
		return qlb;
	},
	/**
	 * 
	 */
	addVideoBox:function(){
		var i=new Element('div',{'class':'quicklook-videobox'});
		i.setStyles({'width':this.options.qlGeometry.endWidth+'px','height':this.options.qlGeometry.endHeight+'px'});
		i.addClass(this.options.additionalCSS);
		i.addEvent('click',function(){
			location.href="http://www.friulfiliere.it/en/products/New-Products/FFC";
		});
		return i;
	},
	addVideoSrc:function(){
		//http://www.youtube.com/v/0nBfV3D3r8g&hl=it&fs=1&
		var vb=$$('.quicklook-videobox')[0];
		var mySwiff = new Swiff(this.flv_src, {
			/*width: this.options.qlGeometry.endWidth,
			height: this.options.qlGeometry.endHeight,*/
			width: "100%",
			height: "100%",
			container: vb,
			options:{
				wMode: 'transparent'
			}
		});
	},
	calculateImageDimension:function(){
		var iEle=this.quicklook.getElement('.quicklook-imge');
		var dim=iEle.getDimensions(true);
		var obj={width:dim.width,height:dim.height};
		this.calculateQLGeometry(this.options._ele,obj);
		iEle.setStyles({
				'display':'block',
				'opacity':1,
				'width': '100%',
			'height': '100%'
			});
	},
	/**
	 * 
	 */
	hideBG:function(){
		this.quicklook.getElement('.quicklook-box').setStyle('background-color','transparent');
	},
	/**
	 * 
	 */
	hideLoader:function(){
		this.quicklook.getElement('.quicklook-box-loader').setStyle('display','none');
	},
	/**
	 * 
	 */
	addLoader:function(){
		var l=new Element('div',{'class':'quicklook-box-loader'});
		l.addClass(this.options.additionalCSS);
		return l;
	},
	/**
	 * 
	 */
	addCloseBtn:function(){
		var cb=new Element('div',{'class':'quicklook-box-close','html':''}).addEvent('click',function(e){
			this.close();
		}.bind(this)).hide();
		cb.addClass(this.options.additionalCSS);
		return cb;
	},
	showCloseBtn:function(){
		this.hideLoader();
		$$('.quicklook-box-close')[0].show();
		this.addVideoSrc();
		
	},
	/**
	 * 
	 * @param {Object} str
	 */
	debug:function (str){
		try{
			//console.log(str);
			
		}catch(e){
			//alert(str);
		}
	}
});