/*
 * Mootools: Custom style form, 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: 28.08.2009 16:13
 * 
 */

 var iStyle = new Class
 ({
	 Implements : [Options, Events],
	 
	 options:
	 {
	 	 input: false,
		 select: false,
		 button: false,
		 textarea: false
	 },
	 
	 initialize: function(options)
	 {
		 this.setOptions(options);
		 
		 //
		 // -> initialization
		 //
		 this.iStyle(this);
	 },
	 
	 
	 //
	 // -> Initialization styling form
	 //
	 iStyle: function()
	 {
		 //
		 // -> loading: input[type=text, password]
		 //
		 if (this.options.input)
		 {
			 this.iInput(this);
			 this.iRadio(this);
			 this.iCheckbox(this);
		 }
		 
		 //
		 // -> loading: button, input[type=submit]
		 //
		 if (this.options.button)
		 {
			 this.iButton(this);
		 }
		 
		 //
		 // -> loading: textarea
		 //
		 if (this.options.textarea)
		 {
			 this.iTextarea(this);
		 }
		 
		 
		 //
		 // -> loading: select
		 //
		 if (this.options.select)
		 {
			 this.iSelect(this);
		 }
	 },
	 
	 
	 //
	 // -> style: input[type=text, password]
	 //
	 iInput: function()
	 {
		 this.input = undefined;
		 
		 //
		 // -> get input
		 //
		 this.input = document.getElements('input[type=text]');
		 this.input.extend(document.getElements('input[type=password]'));
		 
		 //
		 // -> set custom style
		 //
		 this.input.each(function (input)
		 {
			 input.addClass('custom-style-input');
			 
			 if (input.getParent('div.authorization'))
			 {
				 input.setStyle('width', '130px');
				 
			 }
			 
			 //
			 // -> set structure
			 //
			 input.left = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-input-left' }).inject(input, 'before');
			 input.right = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-input-right' }).inject(input, 'after');
			 input.center = new Element("div", { 'class': 'custom-style-input-center' }).wraps(input);
			 
			 //
			 // -> set fixed
			 //
			 this.iFixed(input, 'input');
			 
			 //
			 // -> add event
			 //			 
			 input.addEvents
			 ({
			     focus: function()
			     {
				 this.left.addClass('custom-style-hover');
				 this.right.addClass('custom-style-hover');
				 this.center.addClass('custom-style-hover');
			     },
			     blur: function()
			     {
				 this.left.removeClass('custom-style-hover');
				 this.right.removeClass('custom-style-hover');
				 this.center.removeClass('custom-style-hover');
			     }			     
			 });
		 }, this);
	 },
	 
	 
	 //
	 // -> style: button, input[type=submit], input[type=reset]
	 //
	 iButton: function()
	 {
		 this.button = undefined;
		 
		 //
		 // -> get button
		 //
		 this.button = document.getElements('button');
	 	 this.button.extend(document.getElements('input[type=submit]'));
		 this.button.extend(document.getElements('input[type=reset]'));
		 
		 //
		 // -> set custom style
		 //
		 this.button.each(function (button)
		 {
			 button.addClass('custom-style-button');
			 button.setStyle('margin', 0);
			 
			 //
			 // -> set structure
			 //
			 button.left = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-button-left' }).inject(button, 'before');
			 button.right = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-button-right' }).inject(button, 'after');
			 
			 //
			 // -> add event
			 //			 
			 button.addEvents
			 ({
			     mouseover: function()
			     {
				 this.left.addClass('custom-style-hover');
				 this.right.addClass('custom-style-hover');
				 this.addClass('custom-style-hover');
			     },
			     mouseout: function()
			     {
				 this.left.removeClass('custom-style-hover');
				 this.right.removeClass('custom-style-hover');
				 this.removeClass('custom-style-hover');
			     }			     
			 });
		 }, this);
	 },	 
	 
	 //
	 // -> style: textarea
	 //
	 iTextarea: function()
	 {
		 this.textarea = undefined;
		 
		 //
		 // -> get textarea
		 //
		 this.textarea = document.getElements('textarea');
		 
		 //
		 // -> set custom style
		 //
		 this.textarea.each(function (textarea)
		 {
			 textarea.addClass('custom-style-textarea');
			 textarea.setStyle('margin', 0);
			 
			 //
			 // -> set structure
			 //
			 new Element("div", {'class': 'custom-style-textarea-wrapper' }).wraps(textarea);
			 
			 textarea.top = new Element("div", {'class': 'custom-style-textarea-top' }).inject(textarea, 'before');
			 textarea.bottom = new Element("div", {'class': 'custom-style-textarea-bottom' }).inject(textarea, 'after');
			 
			 textarea.topLeft = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-textarea-top-left' });
			 textarea.top.grab(textarea.topLeft);
			 
			 textarea.bottomLeft = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-textarea-bottom-left' });
			 textarea.bottom.grab(textarea.bottomLeft);
			 
			 
			 textarea.right = new Element("div", {'class': 'custom-style-textarea-right' }).wraps(textarea);
			 
			 textarea.left = new Element("div", {'class': 'custom-style-textarea-left' }).inject(textarea, 'after');
			 textarea.right.grab(textarea.left, 'top');
			 
			 //
			 // -> fixed width/height
			 //
			 var width = 277;
			 
			 if (Browser.Engine.version < 5)
			 {
				 width = 280;
			 }
			 
			 textarea.top.setStyle('width', width + 'px');
			 textarea.bottom.setStyle('width', width + 'px');
			 
			 //
			 // -> add event
			 //			 
			 textarea.addEvents
			 ({
			     focus: function()
			     {
				 this.topLeft.addClass('custom-style-hover');
				 this.bottomLeft.addClass('custom-style-hover');
				 
				 this.top.addClass('custom-style-hover-r');
				 this.bottom.addClass('custom-style-hover-r');
				 
				 this.left.addClass('custom-style-textarea-left-hover');
				 this.right.addClass('custom-style-textarea-right-hover');
			     },
			     blur: function()
			     {
				 this.topLeft.removeClass('custom-style-hover');
				 this.bottomLeft.removeClass('custom-style-hover');
				 
				 this.top.removeClass('custom-style-hover-r');
				 this.bottom.removeClass('custom-style-hover-r');
				 
				 this.left.removeClass('custom-style-textarea-left-hover');
				 this.right.removeClass('custom-style-textarea-right-hover');
			     }			     
			 });
		 });
	 },
	 
	 
	 //
	 // -> style: select
	 //
	 iSelect: function()
	 {
		 this.select = undefined;
		 
		 //
		 // -> get select
		 //
		 this.select = document.getElements('select');
		 
		 //
		 // -> set custom style
		 //
		 this.select.each(function (select)
		 {
			 select.addClass('custom-style-select');
			 select.setStyle('opacity', 0);
			 
			 //
			 // -> calculate wrapper position
			 //
			 this.styles =
			 {
			     width: select.getWidth() + "px",
			     left: select.getScrollSize().x
			 }
			 
			 if (select.getPrevious('label'))
			 {
				 this.styles.left = select.getPrevious('label').getWidth();
			 }
			 
			 //
			 // -> if parent element is display: none
			 //
			 if (select.getParent('form').getStyle('display') == 'none')
			 {
				 //
				 // -> set style: block
				 //
				 select.getParent('form').setStyle('display', 'block');
				 
				 //
				 // -> new calculate wrapper position
				 //
				 this.styles =
				 {
				     width: select.getWidth() + "px",
				     left: select.getScrollSize().x
				 }
				 
				 if (select.getPrevious('label'))
				 {
					 this.styles.left = select.getPrevious('label').getWidth();
				 }				 
				 
				 //
				 // -> set style: none
				 //				 
				 select.getParent('form').setStyle('display', 'none');
			 }
			 else if (select.getParent('div').getStyle('display') == 'none')
			 {
				 //
				 // -> set style: block
				 //
				 select.getParent('div').setStyle('display', 'block');
				 
				 //
				 // -> new calculate wrapper position
				 //
				 this.styles =
				 {
				     width: select.getWidth() + "px",
				     left: select.getScrollSize().x
				 }
				 
				 if (select.getPrevious('label'))
				 {
					 this.styles.left = select.getPrevious('label').getWidth();
				 }				 
				 
				 //
				 // -> set style: none
				 //				 
				 select.getParent('div').setStyle('display', 'none');
			 }
			 
			 //
			 // -> set structure
			 //
			 select.wrapper = new Element("div", { 'class': 'custom-style-select-wrapper', styles: this.styles }).inject(select, 'before');
			 select.left = new Element("img", {src: '/bitrix/templates/otoplenie.me/images/pixel.png', 'class': 'custom-style-select-left' });
			 select.right = new Element("div", { 'class': 'custom-style-select-right', text: select.options[0].text });
			 
			 select.views = new Element("div", { 'class': 'custom-style-select-target', styles: {width: this.styles.width, display: 'none' } });
			 select.items = new Element("ul", { 'class': 'custom-style-select-options' });
			 
			 select.wrapper.adopt([select.left, select.right, select.views]);
			 select.items.inject(select.views);
			 
			 //
			 // -> add event
			 //
			 select.wrapper.addEvent('click', function() { select.views.setStyle('display', 'block'); });
			 select.views.addEvent('mouseleave', function() { select.views.setStyle('display', 'none'); });
			 
			 //
			 // -> set fixed
			 //
			 this.iFixed(select.wrapper, 'select');			 
			 
			 //
			 // -> action option element
			 //
			 select.getElements('option').each(function(option)
			 {
				 select.li = new Element('li').set('text', option.get('text')).inject(select.items).setProperty('index', option.index);
				 
				 //
				 // Устанавливаем отмеченный элемент
				 //
				 if (option.selected)
				 {
					 this.currentElement = select.li.addClass('selected');
					 select.right.set('text', option.get('text'));
				 }
				 
				 //
				 // -> add event
				 //
				 select.li.addEvents
				 ({
					 mouseenter: function(e)
					 {
					         e.stop();
						 
						 //
						 // -> active selected
						 //
						 this.currentElement.removeClass('selected');
						 e.target.addClass('selected');
					 }.bind(this),
					 mouseleave: function(e)
					 {
					         e.stop();
						 
						 //
						 // -> remove selected
						 //
						 this.currentElement.addClass('selected');
						 e.target.removeClass('selected');
					 }.bind(this),
					 
					 click: function(e)
					 {
					         e.stop();
						 
						 //
						 // -> remove selected
						 //
						 this.currentElement.removeClass('selected');
						 this.currentElement = e.target.addClass('selected');
						 
						 //
						 // -> set option in select
						 //
						 select.getSelected().removeProperty('selected');
						 select.options[this.currentElement.getProperty('index')].setProperty('selected', 'selected');
						 select.right.set('text', option.get('text'));
						 
						 //
						 // -> hide
						 //
						 select.views.setStyle('display', 'none');
					 }.bind(this)
	     			 });
			 }.bind(this));
		 }, this);
	 },	 
	 
	 
	 //
	 // -> style: input[type=radio]
	 //
	 iRadio: function()
	 {
		 this.radio = undefined;
		 this.currentInputRadio = new Array();
		 
		 //
		 // -> get radio
		 //
		 this.radio = document.getElements('input[type=radio]');
		 
		 //
		 // -> set custom style
		 //
		 this.radio.each(function (radio)
		 {
			 radio.addClass('custom-style-radio');
			 
			 //
			 // -> set structure
			 //
			 radio.wrapper = new Element("span", {'class': 'custom-style-radio-wrapper' }).inject(radio, 'before');
			 
			 //
			 // -> set checked
			 //
			 if (radio.checked)
			 {
				 radio.wrapper.addClass('custom-style-checked');
				 
				 this.currentInputRadio.extend([radio.get('name')]);
				 this.currentInputRadio[radio.get('name')] = radio;
			 }
			 
			 //
			 // -> add events for radio
			 //			 
			 radio.addEvent('click', function(e)
			 {
				 if ($type(e) == 'event')
				 {
					 e = e.target;
				 }
				 
				 //
				 // -> set unchecked last element
				 //
				 this.currentInputRadio[e.get('name')].checked = false;
				 this.currentInputRadio[e.get('name')].getPrevious('span').removeClass('custom-style-checked');
				 
				 //
				 // -> set checked new element
				 //
				 e.checked = true;
				 e.getPrevious('span').addClass('custom-style-checked');
				 
				 //
				 // -> set new element of current element
				 //
				 this.currentInputRadio[e.get('name')] = e;
			 }.bind(this));
			 
			 //
			 // -> add events for `new` radio
			 //			 
			 radio.wrapper.addEvent('click', function(e)
			 {
				 if ($type(e) == 'event')
				 {
					 e = e.target;
				 }
				 
				 //alert(e.get('tag'));
				 //e.getNext('input').fireEvent('click', e.getNext('input'));
				 radio.fireEvent('click', radio);
			 });
		 }, this);
	 },	 
	 
	 
	 //
	 // -> style: input[type=checkbox]
	 //
	 iCheckbox: function()
	 {
		 this.checkbox = undefined;
		 
		 //
		 // -> get checkbox
		 //
		 this.checkbox = document.getElements('input[type=checkbox]');
		 
		 //
		 // -> set custom style
		 //
		 this.checkbox.each(function (checkbox)
		 {
			 //
			 // -> if checkbox with display: none return false
			 //
			 if (checkbox.getStyle('display') == 'none')
			 {
				 return;
			 }
			 
			 checkbox.addClass('custom-style-checkbox');
			 
			 //
			 // -> set structure
			 //
			 checkbox.wrapper = new Element("span", {'class': 'custom-style-checkbox-wrapper' }).inject(checkbox, 'before');
			 
			 //
			 // -> set checked
			 //
			 if (checkbox.checked)
			 {
				 checkbox.wrapper.addClass('custom-style-checked');
			 }
			 
			 //
			 // -> add events for checkbox
			 //
			 checkbox.addEvent('click', function(e)
			 {
				 if ($type(e) == 'event')
				 {
					 e = e.target;
				 }
				 
				 //
				 // -> set unchecked element
				 //
				 if (e.checked)
				 {
					 e.checked = false;
					 e.getPrevious('span').removeClass('custom-style-checked');
				 }
				 //
				 // -> set checked element
				 //				     
				 else
				 {
					 e.checked = true;
					 e.getPrevious('span').addClass('custom-style-checked');
				 }
			 }.bind(this));
			 
			 //
			 // -> add events for `new` checkbox
			 //
			 checkbox.wrapper.addEvent('click', function(e) { e.target.getNext('input').fireEvent('click', e.target.getNext('input')); });
		 }, this);
	 },
	 
	 
	 //
	 // -> fixed FF, IE
	 //
	 iFixed: function(obj, t)
	 {
		 //
		 // -> fixed input
		 //
		 if (t == 'input' && (navigator.userAgent.indexOf('MSIE 7') != -1 || Browser.Engine.version < 5))
		 {
			 obj.style.margin = "2px 0px 0px 0px";
			 obj.style.padding = "1px 5px 0px 0px";
		 }
		 
		 //
		 // -> fixed select
		 //
		 if (t == 'select' && (navigator.userAgent.indexOf('MSIE 7') != -1 || Browser.Engine.version < 5))
		 {
			 obj.setStyle('margin-top',  "4px");
		 }
	 } 
 });