// 
//  jquery.customizer.select2.js
//  Customise select inputs
//  
//  Created by Kirill Yakovenko on 2008-10-22.
//  Copyright 2008 Kirill Yakovenko. All rights reserved.
//  
//  MOD by thinmoto for correct onclick work && fix collapse check

/*
	TODO add key search
	TODO release next version!
	TODO Make settings and Documentation
*/
(function($){
	$.fn.extend({
		settings:{
			css:{
				width:147,
				height:20,
				"background":"transparent url(./templates/Original_B2B/images/select/select_bg.png) no-repeat 0 0",
				padding:4,
				margin:0
			} 
		},
		el: {},
		container: {},
		expand: function(e){
			if($('#select_up').length == 1){
				$('#select_up').remove();
				$('input',this).focus();
				return;
			}
		
			$(this).unbind('mouseleave');
			$(this).css({
				"background-position":"0 100%"
			});
			var div = $('<div id = "select_up"></div>').appendTo("body");
			div.css({
				position:"absolute",
				width:$(this).width() - 3,
				background:"#FFF",
				top:$(this).offset().top+$(this).height(),
				left:$(this).offset().left,
				borderTop:"2px solid #b2b2b2",
				borderLeft:"2px solid #b2b2b2",
				borderBottom:"1px solid #000",
				borderRight:"1px solid #000",
				overflowY:"scroll",
				zIndex:1000
			});
			$("option",this).each(function(){
				$('<a href="#">'+$(this).text()+'</a>').appendTo(div);
			});
			var options = $('a',div);
			options.css({
				widht:$(this).width(),
				color:"#000",
				display:"block",
				border:0,
				padding:$('div',this).css("padding"),
				outline:"none",
				cursor:"default"
			});
			div.css({height:(div.height() > 200)?200:div.height()});
			options.bind('mouseenter',options,e.data.aHover);
			options.bind('focus',e.data.aFocus);
			options.bind('blur',e.data.aBlur);
			options[$("select",this).attr('selectedIndex')].focus();
			options.bind('keydown',$("select",this), e.data.aPressHendler);
			options.bind('click',this, e.data.aClickHandler);
			$(document).bind('click',{div:div,container:$(this),css:e.data.settings.css},e.data.collapse);
		},
		collapse: function(e){
			var x1 = e.data.container.offset().left;
			var x2 = e.data.container.offset().left + e.data.container[0].clientWidth;
			var y1 = e.data.container.offset().top;
			var y2 = e.data.container.offset().top + e.data.div.height() + e.data.css.height;
			var x = e.pageX;
			var y = e.pageY;
			if ((x < x1) || (x > x2) || (y < y1) || (y > y2)){
				$('#select_up').remove();
				$('input',e.data.container).focus();
				$(document).unbind('click');
				return false;
			}
		},
		aClickHandler: function(e){
			$('select', e.data).attr('selectedIndex',$('#select_up a').index(this));
			$('div',e.data).text($('option[index='+$('#select_up a').index(this)+']',e.data).text());
			$('select', e.data).triggerHandler('change');
			$('#select_up').remove();
			$('input',e.data).focus();
			return false;
		},
		aPressHendler: function(e){
			if(e.keyCode == 40){
				if ($(this).next('a').length == 0) return;
				e.data.setVal(1);
				$(this).blur();
				$(this).next().focus();
				return false;
			}
			if(e.keyCode == 38){
				if ($(this).prev('a').length == 0) return;
				e.data.setVal(-1);
				$(this).blur();
				$(this).prev().focus();
				return false;
			}		
		},
		aHover: function(e){
			e.data.blur();
			$(this).focus();
		},
		aBlur:function(){
			$(this).css({
				background:"#FFF"
			});
		},
		aFocus: function(){
			$(this).css({
				background:"#b2b2b2"
			});		
		},
		focusHendler: function(){
			$(this).parent().css({
				backgroundPosition: "0 100%"
			});
			$(this).parent().unbind('mouseleave');
		},
		blurHendler: function(){
			$(this).parent().css({
				backgroundPosition: "0 0"
			});
			$(this).parent().bind('mouseleave',function(){
				$(this).css({
					backgroundPosition: "0 0"
				});				
			});			
		},
		cClickHendler: function(){
			$("input",this).focus();
		},
		setVal:function(pos){
			var pos = (($(this).attr("selectedIndex")+pos) < 0)?0:(($(this).attr("selectedIndex")+pos) > ($('option',this).length -1))?($('option',this).length -1):$(this).attr("selectedIndex")+pos;
			$(this).attr("selectedIndex",pos);
			$(this).next().text($('option[index='+$(this).attr('selectedIndex')+']',$(this)).text());
		},
		pressHendler: function(e){
			if(e.keyCode == 40)
				$(this).prev().prev().setVal(1);
			if(e.keyCode == 38)
				$(this).prev().prev().setVal(-1);
		},
		draw:function(){
			$.el.hide();
			$.container = $.el.wrap('<div></div>').parent();
			$.container.css(this.settings.css);
			$.container.css({
				position:"relative",
				padding:0,
				overflow:"hidden"
			});
			var text = $('<div></div>').appendTo($.container);
			text.css({
				background:"transparent",
				border:0,
				height:this.settings.css.height - (this.settings.css.padding * 2),
				padding:this.settings.css.padding,
				position:"absolute",
				width:this.settings.css.width -(this.settings.css.padding * 2)-24
			});
			var input = $('<input type="text" />').appendTo($.container);
			input.css({
				position:"absolute",
				top:-100,
				width: 1000,
				left: -20,
				background:"transparent",
				color:"transparent"
			});
			text.text($('option[index='+$.el.attr('selectedIndex')+']',$.el).text());
			input.bind('focus', this.focusHendler);
			input.bind('blur', this.blurHendler);
			input.bind('keydown',this.pressHendler);
			
			$.container.bind('mouseenter',function(){
				$(this).css({
					backgroundPosition: "0 100%"
				});				
			});
			$.container.bind('mouseleave',function(){
				$(this).css({
					backgroundPosition: "0 0"
				});				
			});
			$.container.bind('click', this, this.expand);
		},
		select: function(options){
			if (typeof(options)!='undefined') $.extend(this.settings, options);
			this.each(function(){
				$.el	= $(this);
				$(this).draw();
			});
		}
	})
})($);