/**************************************************************

	Script	: Image Menu
	Version	: 2.2
	Authors	: Samuel Birch
	Desc	: 
	Licence	: Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({
	
	getOptions: function(){
		return {
			onOpen: false, //
			onClose: Class.empty,
			openWidth: 300, // Ширина выделенной, активной картинки
			defaultWidth: 82, // Ширина закрытой картинки для динамического расчета
			blockWidth: 992,  // Ширина блока слайдера  /* Для "резинового" поставить screen.width-20 */
			transition: Fx.Transitions.quadOut,
			duration: 400, // Скорость изменений при действии
			open: null,
			border: 0 // Бордер
		};
	},

	initialize: function(elements, options){
        this.setOptions(this.getOptions(), options);
        
        var isMSIE = /*@cc_on!@*/false;
        this.options.blockWidth = (isMSIE) ? 980 : 992;
		
		this.elements = $$(elements); // Список  элементов(картинок)  слайдера 
		
		this.widths = {}; // Список размеров отображения для картинок
		/* 
		// Вариант для статического варианта 
		this.widths.closed = this.elements[0].getStyle('width').toInt(); // Размеры картинок при активации
		*/
		// Вариант для динамического варианта , расчет размера закрытой картинки
		this.widths.closed = Math.round((this.options.blockWidth - (this.options.openWidth+this.options.border) - 
																	((this.elements.length-1)*this.options.border))/(this.elements.length-1));
		// Размер неактивных картинк
		this.options.defaultWidth = Math.round((this.options.blockWidth - (this.elements.length*this.options.border))/this.elements.length)+2;
		var isMSIE = /*@cc_on!@*/false;
		if (isMSIE) this.options.defaultWidth++;
		/* По-умолчанию берет из первого элемента. У него прописано в css. И равно 93px */
		this.widths.openSelected = this.options.openWidth; // Размер активной картинки
		/* Расчет размеров картинок */
		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1));
		
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		
		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				this.reset(i);
				
			}.bind(this));
			
			el.setStyle('width', this.options.defaultWidth);
			//el.setProperty('target', '_blank'); // Открытие документа в новом окне или текущем
			
			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				this.reset(this.options.open);
				
			}.bind(this));
			
			var obj = this;
			el.addEvent('click', function(e){
				if(obj.options.onOpen){
					new Event(e).stop();
					if(obj.options.open == i){
						obj.options.open = null;
						obj.options.onClose(this.href, i);
					}else{
						obj.options.open = i;
						obj.options.onOpen(this.href, i);
					}
				}
			})
			
		}.bind(this));
		
		if(this.options.open){
			if($type(this.options.open) == 'number'){
				this.reset(this.options.open);
			}else{
				this.elements.each(function(el,i){
					if(el.id == this.options.open){
						this.reset(i);
					}
				},this);
			}
		}
		
	},
	
	reset: function(num){
		if($type(num) == 'number'){
			var width = this.widths.closed;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.options.defaultWidth;
		}
		
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'width': w};
		}.bind(this));
		
		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected};
		}
				
		this.fx.start(obj);
	}
	
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);


/*************************************************************/