/*
 * Mootools: Slider, by Limarc /Alexander Lobashev/
 * 
 * (c) 2008-2009 by Limarc, Lim-on Media
 * _link: http://www.free-lance.ru/users/Limarc
 *
 * _version: 1.3
 * _date: 27.08.2009 09:24
 * _update: 06.09.2009 02:17
 * 
 */

 var iSlider = new Class
 ({
	 Implements : [Options, Events],
	 
	 options:
	 {
		 size: 3,
		 wheel: false
	 },
	 
	 initialize: function(element, options)
	 {
		 if (!element)
		 {
			 return;
		 }
		 
		 //
		 // -> set options
		 //
		 this.setOptions(options);
		 
		 //
		 // -> set params
		 //		 
		 this.slider =
		 {
			 wrapper: undefined,
			 container: undefined,
			 element: element,
			 id: element.get('id'),
			 
			 conf:
			 {
			     controls:
			     {
				 width: 30,
				 iNext: '/bitrix/templates/otoplenie.me.index/images/form.style/slider-next.png',
				 iBack: '/bitrix/templates/otoplenie.me.index/images/form.style/slider-back.png',
				 iNextSelected: '/bitrix/templates/otoplenie.me.index/images/form.style/slider-next-selected.png',
				 iBackSelected: '/bitrix/templates/otoplenie.me.index/images/form.style/slider-back-selected.png'				 
			     },
			     elements:
			     {
				 width: 0,
				 picture: 0,
				 padding: 0
			     },
			     size: 0,
			     selected: this.options.size,
			     margin: 0
			 },
			 
			 myFx: undefined,
			 scroll: undefined,
			 controls: {back: undefined, next: undefined}
		 }		 
		 
		 //
		 // -> set structure
		 //
		 this.setStructure(element, this);
		 
		 //
		 // -> initialization
		 //
		 this.initSlider(this);
		 
		 //
		 // -> set controls
		 //
		 this.setControls(this);
	 },
	 
	 //
	 // -> Set structure
	 //
	 setStructure: function(element)
	 {
		 //
		 // -> set conf
		 //
		 this.styles =
		 {
			 wrapper:
			 {
			     background: 'transparent',
			     position: 'relative',
			     width: "100%",
			     height: "auto",
			     /*border: "1px solid #ff0000",*/
			     display: 'block'
			 },
			 container:
			 {
			     background: 'transparent',
			     position: 'relative',
			     overflow: 'hidden',
			     width: "auto",
			     height: "auto",
			     /*border: "1px solid #ff0000",*/
			     margin: '0px auto'
			 },
			 element:
			 {
			     width: 0,
			     position: 'relative',
			     'float': 'left',
			     overflow: 'hidden',
			     'white-space': 'nowrap',
			     margin: '0px auto'
			 }
		 }
		 
		 //
		 // -> calculate width/size/height
		 //
		 $each(this.slider.element.getElements('ul.catalog-data'), function(element, index)
		 {
			 //
			 // -> calculate width {one element}
			 //
			 if (index < 1)
			 {
				 this.slider.conf.elements.width = (element.getSize().x).toInt();
				 this.slider.conf.elements.padding = (element.getStyle('padding-right')).toInt();
			 }
		 }
		 .bind(this));
		 
		 //
		 // -> set elements
		 //		 
		 this.elements =
		 {
			 wrapper: new Element("div", {id: "slider-wrapper-" + this.slider.id, styles: this.styles.wrapper}),
			 container: new Element("div", {id: "wrapper-container-" + this.slider.id, styles: this.styles.container})
		 }		 
		 
		 //
		 // -> add container/wrapper
		 //
		 this.elements.container.wraps(this.slider.element);
		 this.slider.container = document.id("wrapper-container-" + this.slider.id);
		 
		 this.elements.wrapper.wraps(this.slider.container);
		 this.slider.wrapper = document.id("slider-wrapper-" + this.slider.id);
		 
		 //
		 // -> calculate width {container}
		 //
		 this.styles.container =
		 {
		     width: (this.slider.wrapper.getSize().x).toInt() - this.slider.conf.controls.width*2
		 }
		 
		 this.slider.container.setStyles(this.styles.container);
		 
		 //
		 // -> set/calculate for width/size/height
		 //
		 this.slider.conf.elements.padding = this.slider.conf.elements.padding + ((this.styles.container.width/this.options.size - this.slider.conf.elements.width)/2).toInt();
		 
		 $each(this.slider.element.getElements('ul.catalog-data'), function(element, index)
		 {
			 //
			 // -> set padding {element}
			 //
			 
			 element.setStyle('padding-left', this.slider.conf.elements.padding.toInt() + 'px');
			 element.setStyle('padding-right', this.slider.conf.elements.padding.toInt() + 'px');
			 
			 //
			 // -> calculate width {element}
			 //
			 this.styles.element.width = this.styles.element.width + (element.getSize().x).toInt();
			 this.styles.element.width = this.styles.element.width + (element.getStyle('margin-right')).toInt() + (element.getStyle('margin-left')).toInt();
			 
			 //
			 // -> calculate height {preview}
			 //
			 /*if (this.slider.conf.elements.picture < element.getElement('.preview').getSize().y)
			 {
				 this.slider.conf.elements.picture = element.getElement('.preview').getSize().y;
			 }*/
			 
			 //
			 // -> calculate params {slider}
			 //
			 this.slider.conf.size = this.slider.conf.size + 1;
			 
			 if (index < 1)
			 {
				 this.slider.conf.elements.width = this.styles.element.width;
			 }
		 }
		 .bind(this));
		 
		 //
		 // -> set style
		 //		 
		 this.slider.element.setStyles(this.styles.element);
	 },
	 
	 //
	 // -> Initialization slider
	 //
	 initSlider: function()
	 {
		 //
		 // -> effect slide
		 //
		 this.slider.myFx = new Fx.Morph(this.slider.id,
		 { 
		     wait: true, 
		     transition: Fx.Transitions.linear,
		     duration: 800
		 });
	 },
	 
	 //
	 // -> Set controls
	 //
	 setControls: function()
	 {
		 //
		 // -> set conf.
		 //
		 this.styles = {
			 next:
			 {
			     background: "url('" + this.slider.conf.controls.iNext + "') no-repeat 100% 50%",
			     position: 'absolute',
			     top: 0,
			     right: 0,
			     width: this.slider.conf.controls.width + "px",
			     height: '100%',
			     display: 'block',
			     'float': 'left',
			     cursor: 'pointer'
			 },
			 back:
			 {
			     background: "url('" + this.slider.conf.controls.iBack + "') no-repeat 0% 50%",
			     position: 'absolute',
			     top: 0,
			     left: 0,
			     width: this.slider.conf.controls.width + "px",
			     height: '100%',
			     display: 'block',
			     'float': 'left',
			     cursor: 'pointer'
			 }
		 }
		 
		 //
		 // -> set height
		 //
		 this.styles.next.height = (this.slider.container.getSize().y).toInt();
		 this.styles.back.height = (this.slider.container.getSize().y).toInt();
		 
		 //
		 // -> set new element
		 //		 
		 this.elements = {
			 next: new Element("a",
			 {
			     id: "slider-next-" + this.slider.id,
			     styles: this.styles.next
			 }),
			 back: new Element("a",
			 {
			     id: "slider-back-" + this.slider.id,
			     styles: this.styles.back
			 })
		 }		 
		 
		 //
		 // -> set controls
		 //
		 this.elements.back.inject(this.slider.container, 'before');
		 this.elements.next.inject(this.slider.container, 'after');
		 
		 this.slider.controls.back = document.id("slider-back-" + this.slider.id);
		 this.slider.controls.next = document.id("slider-next-" + this.slider.id);
		 
		 //
		 // -> add events
		 //
		 //(this.slider.controls.back, this.slider.controls.next).addEvent('click', function (e)
		 this.slider.controls.back.addEvents
		 ({
		     click: function (e)
		     {
			     e = new Event(e).stop();
			     
			     //
			     // -> scrolled
			     //
			     this.iSliding(-1, this);
		     }.bind(this),
		     dblclick: function (e) { e.stop(); }.bind(this),
		     mouseenter: function() { this.slider.controls.back.setStyle('background-image', "url('" + this.slider.conf.controls.iBackSelected + "')"); }.bind(this),
		     mouseleave: function() { this.slider.controls.back.setStyle('background-image', "url('" + this.slider.conf.controls.iBack + "')"); }.bind(this)
		 });
		 
		 this.slider.controls.next.addEvents
		 ({
		     click: function (e)
		     {
			     e = new Event(e).stop();
			     
			     //
			     // -> scrolled
			     //
			     this.iSliding(1, this);
		     }.bind(this),
		     dblclick: function (e) { e.stop(); }.bind(this),
		     mouseenter: function(e)
		     {
			     //alert(this.slider.conf.controls.iNextSelected);
			     this.slider.controls.next.setStyle('background-image', "url('" + this.slider.conf.controls.iNextSelected + "')");
		     }.bind(this),
		     mouseleave: function(e)
		     {
			     this.slider.controls.next.setStyle('background-image', "url('" + this.slider.conf.controls.iNext + "')");
		     }.bind(this)
		 });
	 },
	 
	 //
	 // -> set template
	 //
	 iSliding: function(index)
	 {
		 //this.slider.conf.margin = (this.slider.element.getStyle('margin-left')).toInt();
		 this.selected = this.slider.conf.selected + index;
		 //alert(this.slider.conf.size + '/' + this.slider.conf.selected );
		 
		 //
		 // -> filtration
		 //
		 if (this.selected > this.slider.conf.size)
		 {
		 	 this.slider.conf.margin = 0;
			 this.selected = this.options.size;
		 }
		 else if (this.selected < 3)
		 {
			 this.slider.conf.margin = -(this.slider.conf.size-this.options.size)*this.slider.conf.elements.width;
			 this.selected = this.slider.conf.size;
		 }
		 else
		 {
			 this.slider.conf.margin = this.slider.conf.margin - this.slider.conf.elements.width*index;
			 //this.selected = this.slider.conf.selected + index;
		 }
		 
		 //
		 // -> scrolled
		 //
		 this.slider.myFx.start
		 ({ 
		     'margin-left': this.slider.conf.margin
		     /*onComplete: function ()
		     {
			     //this.slider.conf.selected = this.selected;
			     alert(this.selected);
		     }.bind(this)		     */
		 })
		 .chain(function()
		 {
		     this.slider.conf.selected = this.selected;
		     this.slider.conf.margin = (this.slider.element.getStyle('margin-left')).toInt();
		     //$('debug').innerHTML+= this.slider.conf.selected;
		 }.bind(this));	 
	 }
 });