$(function(){
	initCarusel();
	initCustomForms();
	
});

// custom forms init
function initCustomForms() {
	//$('select').customSelect();
}

// custom forms plugin
;(function(jQuery){
	// custom checkboxes module
	jQuery.fn.customCheckbox = function(_options){
		var _options = jQuery.extend({
			checkboxStructure: '<div></div>',
			checkboxDisabled: 'disabled',
			checkboxDefault: 'checkboxArea',
			checkboxChecked: 'checkboxAreaChecked',
			filterClass:'default'
		}, _options);
		return this.each(function(){
			var checkbox = jQuery(this);
			if(!checkbox.hasClass('outtaHere') && checkbox.is(':checkbox') && !checkbox.hasClass(_options.filterClass)){
				var replaced = jQuery(_options.checkboxStructure);
				this._replaced = replaced;
				if(checkbox.is(':disabled')) replaced.addClass(_options.checkboxDisabled);
				else if(checkbox.is(':checked')) replaced.addClass(_options.checkboxChecked);
				else replaced.addClass(_options.checkboxDefault);

				replaced.click(function(){
					if(checkbox.is(':checked')) checkbox.removeAttr('checked');
					else checkbox.attr('checked', 'checked');
					changeCheckbox(checkbox);
				});
				checkbox.click(function(){
					changeCheckbox(checkbox);
				});
				replaced.insertBefore(checkbox);
				checkbox.addClass('outtaHere');
			}
		});
		function changeCheckbox(_this){
			_this.change();
			if(_this.is(':checked')) _this.get(0)._replaced.removeClass().addClass(_options.checkboxChecked);
			else _this.get(0)._replaced.removeClass().addClass(_options.checkboxDefault);
		}
	}

	// custom radios module
	jQuery.fn.customRadio = function(_options){
		var _options = jQuery.extend({
			radioStructure: '<div></div>',
			radioDisabled: 'disabled',
			radioDefault: 'radioArea',
			radioChecked: 'radioAreaChecked',
			filterClass:'default'
		}, _options);
		return this.each(function(){
			var radio = jQuery(this);
			if(!radio.hasClass('outtaHere') && radio.is(':radio') && !radio.hasClass(_options.filterClass)){
				var replaced = jQuery(_options.radioStructure);
				this._replaced = replaced;
				if(radio.is(':disabled')) replaced.addClass(_options.radioDisabled);
				else if(radio.is(':checked')) replaced.addClass(_options.radioChecked);
				else replaced.addClass(_options.radioDefault);
				replaced.click(function(){
					if(jQuery(this).hasClass(_options.radioDefault)){
						radio.attr('checked', 'checked');
						changeRadio(radio.get(0));
					}
				});
				radio.click(function(){
					changeRadio(this);
				});
				replaced.insertBefore(radio);
				radio.addClass('outtaHere');
			}
		});
		function changeRadio(_this){
			jQuery(_this).change();
			jQuery('input:radio[name='+jQuery(_this).attr("name")+']').not(_this).each(function(){
				if(this._replaced && !jQuery(this).is(':disabled')) this._replaced.removeClass().addClass(_options.radioDefault);
			});
			_this._replaced.removeClass().addClass(_options.radioChecked);
		}
	}

	// custom selects module
	
	/*
	jQuery.fn.customSelect = function(_options) {
		var _options = jQuery.extend({
			selectStructure: '<div class="selectArea"><span class="left"></span><span class="center"></span><a href="#" class="selectButton"></a><div class="disabled"></div></div>',
			hideOnMouseOut: false,
			copyClass: true,
			selectText: '.center',
			selectBtn: '.selectButton',
			selectDisabled: '.disabled',
			optStructure: '<div class="optionsDivVisible"><div class="select-top"></div><div class="select-center"><ul></ul><div class="select-bottom"></div></div>',
			optList: 'ul',
			filterClass:'default'
		}, _options);
		return this.each(function() {
			var select = jQuery(this);
			if(!select.hasClass('outtaHere') && !select.hasClass(_options.filterClass)) {
				if(select.is(':visible')) {
					var hideOnMouseOut = _options.hideOnMouseOut;
					var copyClass = _options.copyClass;
					var replaced = jQuery(_options.selectStructure);
					var selectText = replaced.find(_options.selectText);
					var selectBtn = replaced.find(_options.selectBtn);
					var selectDisabled = replaced.find(_options.selectDisabled).hide();
					var optHolder = jQuery(_options.optStructure);
					var optList = optHolder.find(_options.optList);
					if(copyClass) optHolder.addClass('drop-'+select.attr('class'));

					if(select.attr('disabled')) selectDisabled.show();
					select.find('option').each(function(){
						var selOpt = jQuery(this);
						var _opt = jQuery('<li><a href="#">' + selOpt.html() + '</a></li>');
						if(selOpt.attr('selected')) {
							selectText.html(selOpt.html());
							_opt.addClass('selected');
						}
						_opt.children('a').click(function() {
							optList.find('li').removeClass('selected');
							select.find('option').removeAttr('selected');
							jQuery(this).parent().addClass('selected');
							selOpt.attr('selected', 'selected');
							selectText.html(selOpt.html());
							select.change();
							optHolder.hide();
							return false;
						});
						optList.append(_opt);
					});
					replaced.width(select.outerWidth());
					replaced.insertBefore(select);
					optHolder.css({
						width: select.outerWidth(),
						display: 'none',
						position: 'absolute'
					});
					jQuery(document.body).append(optHolder);

					var optTimer;
					replaced.hover(function() {
						if(optTimer) clearTimeout(optTimer);
					}, function() {
						if(hideOnMouseOut) {
							optTimer = setTimeout(function() {
								optHolder.hide();
							}, 200);
						}
					});
					optHolder.hover(function(){
						if(optTimer) clearTimeout(optTimer);
					}, function() {
						if(hideOnMouseOut) {
							optTimer = setTimeout(function() {
								optHolder.hide();
							}, 200);
						}
					});
					selectBtn.click(function() {
						if(optHolder.is(':visible')) {
							optHolder.hide();
						}
						else{
							if(_activeDrop) _activeDrop.hide();
							optHolder.find('ul').css({height:'auto', overflow:'hidden'});
							optHolder.css({
								top: replaced.offset().top + replaced.outerHeight(),
								left: replaced.offset().left,
								display: 'block'
							});
							//if(optHolder.find('ul').height() > 200) optHolder.find('ul').css({height:200, overflow:'auto'});
							_activeDrop = optHolder;
						}
						return false;
					});
					replaced.addClass(select.attr('class'));
					select.addClass('outtaHere');
				}
			}
		});
	}
*/

	// event handler on DOM ready
	var _activeDrop;
	jQuery(function(){
		jQuery('body').click(hideOptionsClick)
		jQuery(window).resize(hideOptions)
	});
	function hideOptions() {
		if(_activeDrop && _activeDrop.length) {
			_activeDrop.hide();
			_activeDrop = null;
		}
	}
	function hideOptionsClick(e) {
		if(_activeDrop && _activeDrop.length) {
			var f = false;
			jQuery(e.target).parents().each(function(){
				if(this == _activeDrop) f=true;
			});
			if(!f) {
				_activeDrop.hide();
				_activeDrop = null;
			}
		}
	}
})(jQuery);

function initCarusel(){
	var holder = $('div.carusel');
	if (!holder.length) return;
	
	$('div.carusel-row',holder).each(function(){
		var holder = $(this);
		var mask = $('div.carusel-holder',holder);
		var slider = $('>ul',mask);
		var slides = $('>li',slider);
		var logo = $('div.carusel-logo span.bg',holder).css({display:'none',opacity:0});
		initGrayScale();
		initGallery();
		initFadeImages();
		
		holder.bind({
			mouseenter:function(){
				logo.stop().css({display:'block'}).animate({opacity:1},550);
			},
			mouseleave:function(){
				logo.stop().animate({opacity:0},550,function(){
					logo.css({display:'none'});
				});
			}
		});
		
		function initGrayScale(){
			slides.each(function(){
				var slide = $(this);
				var img = $('img',slide);
				var clone = img.clone();
				img.after(clone).addClass('color').css({display:'none',opacity:0});
				clone.grayscale()
				slide.data('img',img);
			});
		}
		
		function initFadeImages(){
			slides.each(function(){
				var slide = $(this);
				var img = $('img.color',slide);
				var desc = $('span.desc',slide).show();
				var descH = desc.height();
				desc.css({height: 0,display: 'none'});
				slide.bind({
					mouseenter:function(){
						img.stop().css({display:'block'}).animate({opacity:1},550);
						desc.stop().css({display:'block'}).animate({height:descH},550);
					},
					mouseleave:function(){
						img.stop().animate({opacity:0},550,function(){
							img.css({display:'none'});
						});
						desc.stop().animate({height:0},550,function(){
							desc.css({display:'none'});
						});
					}
				})
			});
		}
		
		function initGallery(){
			var maskW = mask.width();
			var slideW = slides.eq(0).width();
			var maxOffset = slideW * slides.length - maskW;
			var visibleStep = Math.round(maskW/slideW);
			var offset = 0;;
			var step = 7;
			var timer;
			var ratio;
			var direction;
			var animation = false;
			
			if (maxOffset < 0) return;
			
			mask.bind({
				mouseenter:function(e){
					ratio =  -(e.pageX - mask.offset().left - maskW/2)/maskW*2;
					clearInterval(timer);
					timer = setInterval(move,20);
					checkDirection();
				},
				mousemove:function(e){
					ratio = (e.pageX - mask.offset().left - maskW/2)/maskW*2;
					checkDirection();
				},
				mouseleave:function(){
					clearInterval(timer);
					//checkDirection();
					//timer = setInterval(moveInert,20)
					checkInt();
				}
			});
			
			function checkInt(){
				offset = Math.round(offset/slideW)*slideW;
				checkOffset();
				animation = true;
				slider.animate({marginLeft:-offset},500,function(){animation=false;});
			}
			
			function move(){
				if (!animation) {
					offset += ratio*step;
					checkOffset();
					slider.css({marginLeft:-offset});
				}
			}
			
			function moveInert(){
				offset += ratio*step;
				if (direction == 1) {
					ratio -= 0.02;
					if (ratio <= 0) clearInterval(timer);
				} else {
					ratio += 0.02;
					if (ratio >= 0) clearInterval(timer);
				}
				checkOffset();
				
				slider.css({marginLeft:-offset});
			}
			
			function checkDirection(){
				if (ratio > 0) direction = 1;
				else direction = -1;
			}
			
			function checkOffset(){
				if (offset <= 0) offset = 0;
				else if (offset >= maxOffset) offset = maxOffset;
			}
		}
	});
}

// grayscale plugin
;(function($){
	function grayscale(image, bPlaceImage) {
		var myCanvas=document.createElement("canvas");
		var myCanvasContext=myCanvas.getContext("2d");
		var imgWidth=image.width;
		var imgHeight=image.height;
		myCanvas.width= imgWidth;
		myCanvas.height=imgHeight;
		myCanvasContext.drawImage(image,0,0);
		var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
		for (i=0; i<imageData.height; i++) {
			for (j=0; j<imageData.width; j++) {
				var index=(i*4)*imageData.width+(j*4);
				var red=imageData.data[index];
				var green=imageData.data[index+1];
				var blue=imageData.data[index+2];
				var alpha=imageData.data[index+3];
				var average=(red+green+blue)/3;
				imageData.data[index]=average;
				imageData.data[index+1]=average;
				imageData.data[index+2]=average;
				imageData.data[index+3]=alpha;
			}
		}
		myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);

		if (bPlaceImage) {
			var myDiv=document.createElement("div");
			myDiv.appendChild(myCanvas);
			image.parentNode.appendChild(myCanvas);//, image);
		}
		return myCanvas.toDataURL();
	}

	jQuery.fn.grayscale = function(_options){
		var _options = jQuery.extend({
			temp:1
		},_options);
		return this.each(function(){
			// options
			var image = this;
			var _temp = _options.temp;
			if($.browser.msie && $.browser.version < 9) {
				image.style.filter = 'gray'
			} else {
				image.src = grayscale(image);
			}
		});
	}
})(jQuery);