jQuery.fn.extend({
	selectbox: function(options) {
		return this.each(function() {
			new jQuery.SelectBox(this, options);
		});
	}
});

jQuery.SelectBox = function(selectobj, options) {
	var opt = options || {};
	opt.inputClass = opt.inputClass || "selectbox";
	opt.containerClass = opt.containerClass || "selectbox-wrapper";
	opt.hoverClass = opt.hoverClass || "selected";
	opt.debug = opt.debug || false;

	var elm_id = selectobj.id;
	var active = -1;
	var inFocus = false;
	var hasfocus = 0;
    var hasObserver = false;
	//jquery object for select element
	var $select = $(selectobj);
	// jquery container object
	var $container = setupContainer(opt);
	//jquery input object
	var $input = setupInput(opt);
	// hide select and append newly created elements
	$select.hide().before($input).before($container);


	init();

    if($($container)[0].parentNode.className.indexOf('disabled')==-1) {
    	$input
    	.click(function(e){
            if (!inFocus) {
    		  $container.toggle();
    		}
    	})
    	.focus(function(){
    	   if ($container.not(':visible')) {
    	       inFocus = true;
    	       $container.show();
    	   }
    	})
    	.keydown(function(event) {
    		switch(event.keyCode) {
    			case 38: // up
    				event.preventDefault();
    				moveSelect(-1);
    				break;
    			case 40: // down
    				event.preventDefault();
    				moveSelect(1);
    				break;
    			//case 9:  // tab
    			case 13: // return
    				event.preventDefault(); // seems not working in mac !
    				setCurrent();
    				hideMe();
    				break;
    		}
    	})
    	.blur(function(e) {
    		if ($container.is(':visible') && hasfocus > 0 ) {
    			if(opt.debug) console.log('container visible and has focus')
    		} else {
    			hideMe();
    		}
    	});

        $('li',$container).removeClass(opt.hoverClass);
        }
    	function hideMe() {
    		hasfocus = 0;
    		$container.hide();
    	}

    	function init() {
    		$container.append(getSelectOptions($input.attr('id'))).hide();
            var _cname = $input.attr('id').split('_');
            if($('#'+_cname[0]+'_other').size()>0) {
                hasObserver = $($('#'+_cname[0]+'_other')[0].parentNode);
            }
    		var width = $input.css('width');
    		$container.width(width);
        }

    	function setupContainer(options) {
    		var container = document.createElement("div");
    		$container = $(container);
    		$container.attr('id', elm_id+'_container');
            $container.attr('unselectable', 'on');
    		$container.addClass(options.containerClass);
            $container.bind('mouseleave',function(){hasfocus = -1;});
    		return $container;
    	}

    	function setupInput(options) {
    		var input = document.createElement("input");
    		var $input = $(input);
    		$input.attr("id", elm_id+"_input");
    		$input.attr("type", "text");
    		$input.addClass(options.inputClass);
    		$input.attr("autocomplete", "off");
    		$input.attr("readonly", "readonly");
            /*$input.attr('unselectable', 'on');*/
    		$input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie

    		return $input;
    	}

    	function moveSelect(step) {
    		var lis = $("li", $container);
    		if (!lis) return;

    		active += step;

    		if (active < 0) {
    			active = 0;
    		} else if (active >= lis.size()) {
    			active = lis.size() - 1;
    		}

    		lis.removeClass(opt.hoverClass);

    		$(lis[active]).addClass(opt.hoverClass);
    	}

    	function setCurrent() {
            var _s = $("li."+opt.hoverClass, $container).size();
            if(_s >1) {
                var li = $("li."+opt.hoverClass, $container).get((_s-1));
            } else {
    		    var li = $("li."+opt.hoverClass, $container).get(0);
            }
    		var ar = (''+li.id).split('_');
    		var el = ar[ar.length-1];
    		$select.val(el);
    		$input.val($(li).text());
            if(hasObserver && el=='other') {
                hasObserver.show();
            } else if(hasObserver) {
                hasObserver.hide();
            }
    		return true;
    	}

    	// select value
    	function getCurrentSelected() {
    		return $select.val();
    	}

    	// input value
    	function getCurrentValue() {
    		return $input.val();
    	}

    	function getSelectOptions(parentid) {
    		var select_options = new Array();
    		var ul = document.createElement('ul');
    		$select.children('option').each(function() {
    			var li = document.createElement('li');
    			li.setAttribute('id', parentid + '_' + $(this).val());
    			li.innerHTML = $(this).html();
    			if ($(this).is(':selected')) {
    				$input.val($(this).text());
    				$(li).addClass(opt.hoverClass);
    			}
    			ul.appendChild(li);
    			$(li)
    			.mouseover(function(event) {
    				hasfocus = 1;
    				if (opt.debug) console.log('out on : '+this.id);
    				jQuery(event.target, $container).addClass(opt.hoverClass);
    			})
    			.mouseout(function(event) {
    				if (opt.debug) console.log('out on : '+this.id);
    				jQuery(event.target, $container).removeClass(opt.hoverClass);
    			})
    			.click(function(event) {
                    if (opt.debug) console.log('click on :'+this.id);
    				$(this).addClass(opt.hoverClass);
                    // get original value
                    var _org = getCurrentSelected();
    				setCurrent();
    				hideMe();
                    // autosubmit for sorter (search)
                    // the id we are looking for is the orignal id plus _container
                    if($container.attr('id') == 'sorter_container' || $container.attr('id') == 'amount-select_container') {
                        // get current value
                        var _cur = getCurrentSelected();
                        // in case the current one is different...
                        if(_cur!=_org) {
                            // find the form container
                            var _form = getContainer(this, 'form');
                            // in case it was successfull
                            if($(_form).size()>0) {
                                // submit the form and cancel further scripting...
                                _form.submit();
                                return false;
                            }
                        }
                    }
                    else if ($container.attr('id') == 'countries_container') {
                        // get current value
                        var _cur = getCurrentSelected();
                        // in case the current one is different...
                        if(_cur && _cur!=_org) {
                        	window.open(_cur, 'grohe');
                        	return false;
                        }
                    }
					// MTN: Imagebank
					else if ($container.attr('id') == 'amount1_container' || $container.attr('id') == 'amount2_container')
					{
                        var _cur = getCurrentSelected();


                        if (_cur && _cur!=_org) {
                        	location.href = "search.php?restore=" + _cur;
                        	return false;
                        }
                    }
					// MTN: Imagebank
					else if ($container.attr('id') == 'frm_usage_container')
					{
                        var _cur = getCurrentSelected();

						if(_cur == "web") {
                        	$("#usageURL").css("display", "block");
                        }
						else {
							$("#usageURL").css("display", "none");
						}
                    }
                    else
					{
                        // special action for locator script...
                        if($container.attr('id')=='frmCounty_container') {
                            var _current = $select.val();
                            // find correct target...
                            var _x = $container[0].parentNode.parentNode;
                            var _t = $('p',_x)[1];
                            var _tx = $('p',_x)[0];
                            if(_current!=0) {
                                // something selected...
                                var _list = oHTML.replace(/<\/select>/gi,'');
                                $(_tx).removeClass('disabled');
                                // ajax call with json response demo...
                                /*
                                $.post(posturl, {'frmCounty':_current},function(json) {
                                    try {
                                       eval('resp = ' + json);
                                       if(resp.error) {
                                        // in case an error occrued...
                                       } else {
                                         // everything fine, script loops through
                                         // an json array named list, where each
                                         // element is another array - first value
                                        // is the option value, secon the option text..
                                         for(a=0; a<resp.list; a++) {
                                            _list+='<option value="'+list[a][0]+'">'+list[a][1]+'</option>';
                                         }
                                         $(_t)[0].innerHTML = _list+'</select>';

                                         // remove the disabled class
                                         $(_t).removeClass('disabled');
                                         // reactivate the dhtml select box...
                                         $('#frmRegion').selectbox({'inputClass':'selectbox2','containerClass':'selectbox-wrapper2'});
                                         $(_t).removeClass('disabled');
                                       } catch(e) {}
                                   });
                                */
                                // remove this line in case you use the ajax function!!!!!!
                                $('.jsform').submit();
                                //$(_t).removeClass('disabled');
                            } else {
                                // use default box text...
                                $(_t)[0].innerHTML = oHTML;
                                // disable otherwise
                                $(_t).addClass('disabled');
                                // reactivate the dhtml select box...
                                $('#frmRegion').selectbox({'inputClass':'selectbox2','containerClass':'selectbox-wrapper2'});
                            }
                        }

                        if($container.attr('id')=='frmRegion_container') {
                        	$('#start_search').attr("value", "1");
                        	$('.jsform').submit();
                        }
                    }
    			});
    		});
    		return ul;
    	}

    function getContainer(element, tagName) {
        while (element != null) {
        	if (element.nodeName != null &&
    	    	element.nodeName.toUpperCase() == tagName.toUpperCase()
    		) {
    		    return element;
        	}
        	element = element.parentNode;
        }
    }

};

var oHTML = '';

$().ready(function(){

    // required for the locator addon
    if($('.worldselector select').size()>0) {
	    $('.worldselector select').selectbox({'inputClass':'selectbox3','containerClass':'selectbox-wrapper3'});
	}

    if($('#frmRegion').size() > 0) {
        _tx = $('#frmRegion')[0].parentNode;
        _tx2 = $('#frmCounty')[0].parentNode;
        oHTML = _tx.innerHTML;
        $('#frmZip').focus(function(){
            $(_tx).addClass('disabled').html('').hide();
            $(_tx2).addClass('disabled');
            _tx.innerHTML = oHTML;
            $('#frmRegion').selectbox({'inputClass':'selectbox2','containerClass':'selectbox-wrapper2'});
            $(_tx).show();
       });
    }
});