/**
 * @author jfdesgagne
 */
var ProductGallery = new Class({
	Implements: Options,
	options:{
		'sensibility':false,
		'menu':false
	},
	
	dragable:null,
	droppables:null,
	drag:null,
	currentThumb:null,
	newImage:null,
	lists:null,
	
    initialize: function(dragable, droppables, options){
		this.setOptions(options);
		this.dragable = dragable;
		this.droppables = droppables;
		this.initInteractivity();	
		if(this.options.menu) this.addMenu();
		
		this.droppables.each(function(el){
			el.store('coordinate', el.getCoordinates());
		}, this);	
    },

	
	addMenu:function() {
		this.lists = [];
		var types_windows = new Element('div').inject($('galleryMenu').getElement('div'));
		var types_doors = $('galleryMenu_portes');
		
		this.lists[0] = new Element('ul').inject(types_windows);
		for (var i=0; i<galleryImages_data.windowsTypes.length; i++) {
			var li = new Element('li').inject(this.lists[0]);
			var label = new Element('label', {'for':'windowsType'+i}).set('text', galleryImages_data.windowsTypes[i].title.toLowerCase()).inject(li);
			var input = new Element('input', {'id':'windowsType'+i, 'value':galleryImages_data.windowsTypes[i].id, type:'checkbox', name:"windowsType[]"}).inject(li);
				input.addEvent('click', this.getDatas.bind(this));
			if(i==0) input.set('checked', 'checked');
		};
		
		this.lists[1] = new Element('ul').inject(types_windows);
		for (var i=0; i<galleryImages_data.windowsContent.length; i++) {
			var li = new Element('li').inject(this.lists[1]);
			var label = new Element('label', {'for':'windowsContent'+i}).set('text', galleryImages_data.windowsContent[i].title.toLowerCase()).inject(li);
			var input = new Element('input', {'id':'windowsContent'+i, 'value':galleryImages_data.windowsContent[i].id, type:'checkbox', name:"windowsContent[]"}).inject(li);
				input.addEvent('click', this.getDatas.bind(this));
			if(i==0) input.set('checked', 'checked');
		};
		
		this.lists[3] = new Element('ul').inject(types_doors);
		for (var i=0; i<galleryImages_data.doorsContent.length; i++) {
			var li = new Element('li').inject(this.lists[3]);
			var label = new Element('label', {'for':'doorsContent'+i}).set('text', galleryImages_data.doorsContent[i].title.toLowerCase()).inject(li);
			var input = new Element('input', {'id':'doorsContent'+i, 'value':galleryImages_data.doorsContent[i].id, type:'checkbox', name:"doorsContent[]"}).inject(li);
				input.addEvent('click', this.getDatas.bind(this));
		};
		
		$('galleryImagesMenu').set('send', {
			"url":donatflamand_httpadress+"assets/php/class.imagesgallery.php",
			"method":"post",
			"onComplete":function(data) {this.refreshPreview(JSON.decode(data));}.bind(this),
			"lang":lang, 
			"callFunction":"getDatas"
		});		
	},
	
	getDatas:function(event) {
		$('imagesGallery_photoFilm').getElement('ul').empty();
		new Element('li', {'styles':{'height':'30px', 'width':'30px', 'display':'block'}}).inject($$('#imagesGallery_photoFilm ul')[0]);
		$('galleryImagesMenu').send();				
	},
	
	parseData:function(listNo) {
		values_array = [];
		if (this.lists[listNo]) {
			this.lists[listNo].getElements('li').getElement('input').each(function(el){
				if (el.get('value') != "false" && el.get('value')) 
					values_array.push(el.get('value'));
			});
		}
		return values_array;
	},
	
	refreshPreview:function(datas) {
		var ul = $('imagesGallery_photoFilm').getElement('ul');
			
		if (datas) {
			if(datas.length>0) ul.empty();
			var left = 0;
			var top = 0;
			var width = ($('imagesGallery_photoFilm').getWidth() / datas.length) - 1;
			if (width > 60) width = 60;
					
			datas.each(function(el){
				if (el.substring) {
					var small_src = el.substring(0, el.length - 4) + '_small' + el.substring(el.length - 4);
					var li = new Element('li').inject(ul);
					var img = new Element('img', {
						height: null,
						width:width,
						src: root + 'assets/file_library/imagesGallery/' + small_src
					}).inject(li);
					if(top==0) top = li.getTop();
					if(left==0) left = li.getLeft(); else left += width;
					var coordinate = {'left':left, 'top':top, 'width':width};
					li.store('coordinate', coordinate);
				}
			}.bind(this));
		}
		
		if(this.drag) this.drag.stop();
		if (datas) {
			this.drag = new Drag($('imagesGallery_slider'), {
				"snap": 0,
				"modifiers": {
					"y": ""
				},
				"limit": {
					"x": [-20, $('imagesGallery_photoFilm').getElement('ul').getSize().x - $('imagesGallery_slider').getSize().x + 21]
				}
			});
		
			this.droppables = $$('#imagesGallery_photoFilm ul li');
			if (this.droppables.length>0) {
				this.droppables.each(function(el){
					img = el.getElement('img');
					if (img) {
						var width = ($('imagesGallery_photoFilm').getWidth() / datas.length) - 1;
						if (width > 60) width = 60;
						var coordinate = el.retrieve('coordinate');
							coordinate.width = width;
						el.store('coordinate', coordinate)
						img.set('width', width);
						img.set('height', null);
					}
					
				}.bind(this));
				this.drag.addEvent('onDrag', this.cursorMove.bind(this));
				this.drag.addEvent('onComplete', this.completeDrag.bind(this));
				this.droppables[0].getParent().addEvent('click', this.clickListHandler.bind(this));
			}
			this.resetCurrentView();
		}
		
	},
	
	resetCurrentView:function () {
		this.changeThumb(this.droppables[0]);
		this.changeImage();
		$('imagesGallery_slider').setStyle('left', -20);
	},
	
	initInteractivity:function() {
		var filmHeight = 24 + imagesHeight;
		var sliderHeight = $('imagesGallery_slider').getSize().y;
		var sliderY = ((sliderHeight - filmHeight) /2);
		if(sliderHeight>filmHeight) sliderY *= -1;
		$('imagesGallery_slider').setStyle('top', sliderY);
		//this.drag = new Drag($('imagesGallery_slider'));
		this.drag = new Drag($('imagesGallery_slider'), {"snap": 0, "modifiers":{"y":""}, "limit":{"x":[-20, $('imagesGallery_photoFilm').getElement('ul').getSize().x - $('imagesGallery_slider').getSize().x + 1 + 40]}});
		this.drag.addEvent('onDrag', this.cursorMove.bind(this));
		this.drag.addEvent('onComplete', this.completeDrag.bind(this));
		this.droppables[0].getParent().addEvent('click', this.clickListHandler.bind(this));
	},
	
	
	clickListHandler:function(event) {
		this.dragable.setStyle('left', event.client.x - this.droppables[0].getParent().getPosition().x - (this.dragable.getSize().x/2));
		this.cursorMove();
		this.completeDrag();
	},	
	
	cursorMove:function(event) {
		var coordinate = this.dragable.getCoordinates();
			
		this.droppables.each(function(el) {
			var coordinateEl = el.retrieve('coordinate');
			var draggablePos = coordinate.left + (coordinate.width / 2);
			var elementPos = coordinateEl.left + (coordinateEl.width / 2);
			if(!this.options.sensibility) this.options.sensibility = (coordinateEl.width /2);
			if(draggablePos>elementPos-this.options.sensibility && draggablePos<elementPos+this.options.sensibility) this.changeThumb(el);
		}.bind(this));	
	},
	
	changeThumb:function(el) {
		if (el.getElement('img')) {
			this.currentThumb = el;
			$('imagesGallery_slider').getElement('div').setStyle('background-image', 'url(' + el.getElement('img').src + ')');
		} else {
			$('imagesGallery_slider').getElement('div').setStyle('background-image', 'none');
		}
	},
	
	completeDrag:function(event) {
		$('imagesGallery_image').getElement('img').set('tween', {'duration:':'300', 'onComplete':this.changeImage.bind(this)});
		$('imagesGallery_image').getElement('img').fade('out');
	},
	
	changeImage:function(event) {
		if($('imagesGallery_image').getElement('img')) $('imagesGallery_image').getElement('img').set('tween', {'duration:':'300'});
		if (this.currentThumb.getElement('img')) {
			this.newImage = new Asset.image(this.currentThumb.getElement('img').src.substring(0, this.currentThumb.getElement('img').src.length - 10) + ".jpg", {
				'title': this.currentThumb.getElement('img').alt,
				'onload': this.imageLoaded.bind(this)
			});
		} else {
			$('imagesGallery_image').getElement('img').fade('out');			
		}
	},
	
	imageLoaded:function(event) {
		if (this.newImage) {
			this.newImage.setStyle('opacity', '0');
			this.newImage.injectAfter($('imagesGallery_image').getElement('img'));
			$('imagesGallery_image').getElement('img').destroy();
			$('imagesGallery_image').getElement('img').fade('in');
			
			this.newImage = null;
		}
	}
	
});