/**
 * @author jfdesgagne
 */
var Caracteristics = new Class({
	Implements:Options,
	
	currentGallery:null,
	currentAccordion:null,
	
	options: {//set all the options here
		overlayOpacity: 0.3,
		topPosition: 80,
		position:{top:"50%", left:"50%"},
		initSize:{width:10, height:'auto'},
		resizeDuration: 500,
		resizeTransition: 'sine:in:out',/*function (ex. Transitions.Sine.easeIn) or string (ex. 'quint:out')*/
		listClass:"listText",
		targetSize:{width:647, height:'auto'}
	},	
	
	initialize: function(options){
		this.setOptions(options);
		this.init();
	},	
	
	init:function(){
		this.prepareGalleries();
		this.prepareHTML();
		this.prepareEffects();
		this.prepareEvents();
		this.activated = true;
	},
	
	open: function(event){
		this.currentGallery = event.target.retrieve('list');
		this.currentGallery.getElements('.link').getElement('a').removeClass('selected');
		
		this.overlay.setStyles({
			'top': -$(window).getScroll().y,
			'height': $(window).getScrollSize().y + $(window).getScroll().y
		});
		this.overlay.tween('opacity',this.options.overlayOpacity);
		this.center.getElements('ul').dispose();
		this.center.adopt(event.target.retrieve('list'));

		
		event.target.retrieve('list').getElements('a').each(function(a) {
			a.getParent().addEvent('click', this.openInfo.bind(this));
			if (a.get('text') == event.target.get('text')) {
				this.currentAccordion = new Accordion($$('#cCenter .link'), $$('#cCenter .content'), {
					show:$$('#cCenter .link').indexOf(a.getParent())
				});
				a.getParent().getNext().setStyles({
					'opacity': 1,
					'visibility': 'visible',
					'height': ''
				});
				$$('#cCenter .content').set('tween',{
					duration: 'short',
					onComplete: function(event){
						this.displayOrNot.bindWithEvent(this)
					}.bind(this)
				});
				
				a.addClass('selected');
			}
		}, this);
	},
	

		
	close:function(event) {
		this.content.morph({
			width: 0,
			height: 0,
			top:($(window).getScroll().y+$(window).getHeight())/2,
			left:($(window).getScroll().x+$(window).getWidth())/2,
			opacity:0
		});
		this.closeBtn.set('opacity', 0);
		this.closeBtn.tween('opacity', 0)
		
	},
	
	openInfo:function(event) {
		this.currentGallery.getElements('.link').getElement('a').removeClass('selected');
		event.target.addClass('selected');
	},	
	
	cancelAllEffects:function(){
		this.overlay.retrieve('tween').cancel();

	},
	
	prepareEffects:function() {
		this.overlay.set('tween',{ duration:'short',link:'cancel' });
		this.content.set('morph',{ duration:'short',link:'cancel', transition:this.options.resizeTransition });
		this.closeBtn.set('tween',{ duration:'long',link:'cancel'});
		
		this.content.get('morph').addEvent('onComplete',function() {
			if (this.content.getWidth()<=20 && this.content.getHeight()<=20) {
				this.overlay.tween('opacity',0);
			} else {
				if(Browser.Engine.trident4) {
					this.closeBtn.setStyles({
						'left':this.content.getLeft()+this.content.getWidth() - 15,
						'top':this.content.getTop()-15			
					});
				} else {
					this.closeBtn.setStyles({
						'left':this.content.getLeft()+this.content.getWidth() - 25,
						'top':this.content.getTop()					
					});
				}
				
				this.closeBtn.tween('opacity', 1);
			}
		}.bindWithEvent(this));
			
		
		this.overlay.get('tween').addEvent('onComplete',function(){
			if (this.overlay.getStyle('opacity') == this.options.overlayOpacity) {
				this.content.setStyle('display', 'block');
				this.content.morph({
					"left": ($(window).getWidth() - this.options.targetSize.width) / 2,
					"top": $(window).getScroll().y + 100,
					'width': this.options.targetSize.width,
					"opacity": 1
				});
		
			} else if(this.overlay.getStyle('opacity') == 0) {
				this.overlay.setStyles({'height':'','top':''});
				this.content.setStyles({
					'height':'',
					'visibility':'hidden'
				});
			}
		}.bindWithEvent(this));
	},
	
	prepareGalleries:function(){
		$$('.'+this.options.listClass).each(function(ul) {
			var gUl = new Element('ul');
			if (ul.getPrevious("h3")) {
				gLi = new Element('li', {
					'class': 'title'
				}).set('text', ul.getPrevious("h3").get('text'));
				gUl.adopt(gLi);
			}
			ul.getElements('li').each(function(li) {
				var a = li.getElement('.caracteristics');
				if (a != null) {
					a.store('href', a.href);
					a.store('rel', a.rel);
					a.store('title', a.title);
					a.store('list', gUl);
					
					var gLi = new Element('li', {'class':'link'}).inject(gUl);
					var gA = new Element('a', {'href':'javascript://'}).set('text', a.get('text')).inject(gLi);
					var gLi2 = new Element('li', {'class':'content'}).inject(gUl);
					var text = li.get('text').substring(a.get('text').length);
					if(text.substring(0, 3) == " : ") text = text.substring(3);
					if(text!="") new Element('p').set('text', text).inject(gLi2);
					var gImg = new Element('img', {'src':a.href}).inject(gLi2);
				}
			}, this);			
		},this);
		
		
	},
	
	prepareEvents:function() {
		$$('.caracteristics').each(function(a) {
			a.href = "javascript://";
			a.addEvent('click', this.open.bind(this));
		}, this);
		
		this.overlay.addEvent('click', this.close.bind(this));
		this.closeBtn.addEvent('click', this.close.bind(this));
		
	},
	
	prepareHTML:function(){		
		this.overlay = new Element('div', { 'id':'cOverlay','styles':{ 'opacity':'0','visibility':'visible' }}).inject($(document.body));
		this.content = new Element('div', {'id':'cContent', 'styles':{'width':this.options.initSize.width,'height':this.options.initSize.height,'marginLeft':-(this.options.initialWidth/2)}}).inject($(document.body));
		this.closeBtn = new Element('div', {'id':'cClose'}).inject($(document.body));
		this.bgTop = new Element('div', {'id':'cBgTop'}).inject(this.content);
		this.center = new Element('div', {'id': 'cCenter'}).inject(this.content);
		this.bgBottom = new Element('div', {'id':'cBgBottom'}).inject(this.content);
		
	}
	
	
})