// JavaScript Document of select box on right top corner--------------------------------------------------------------------------------------------------------

//setup select box
function selectBox(target){
	var dummy = $(target)
	pos = dummy.offset()
	dummy.parent().children(".selectBox").remove();
	dummy.parent(".selectContainer").children().unwrap();
	dummy.wrap("<div class='selectContainer'>").after('<div class="selectBox active '+dummy.attr("class")+'"><div class="btn clearfix"><div class="display"><span></span></div><div class="arrow">&nbsp;</div></div><div class="list"><div class="scrollPanel"></div>')
	dummy.hide();
	var selectBox = dummy.parent();
	var maxWidth = selectBox.find(".selectBox").width()-10;
	selectBox[0].listInit = function(){
		var selectBoxDummy = $(this);
		var targetSelect  = selectBoxDummy.find("select")
		selectBoxDummy.find(".list").html('<div class="scrollPanel"></div>')
		targetSelect.children("option").each(function(){
			var myDummy = $(this)
			if(myDummy.attr('disabled')){
			    selectBoxDummy.find(".list .scrollPanel").append("<div class='listItem' vid='"+myDummy.attr("value")+"' style='float:left'><span>"+String(myDummy.html()).replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;")+"</span></div>")
			}else{
				selectBoxDummy.find(".list .scrollPanel").append("<a class='listItem' href='javascript:void(0);' vid='"+myDummy.attr("value")+"' style='float:left'><span>"+String(myDummy.html()).replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;")+"</span></a>")
			}
			var target = selectBox.find(".list .scrollPanel").children(".listItem:last");
			if(target.width()>maxWidth){
				maxWidth = target.width();
			}
		})
		selectBoxDummy.find(".list,.list .listItem").width(maxWidth+10);
		selectBoxDummy.find(".list .scrollPanel").height(Math.min(166,selectBoxDummy.find(".list .listItem").length*selectBoxDummy.find(".list .scrollPanel .listItem:first").height()))
		selectBoxDummy.find(".list  a").mousedown(function(){
			targetSelect.find("option[value="+$(this).attr("vid")+"]").attr("selected","true");
			target.attr("tips","")
			targetSelect.change();
			selectBoxDummy.find(".display span").html($(this).html());
			selectBoxDummy.find(".selectBox").removeClass("active");
		})
	}
	/*dummy.children("option").each(function(){
		var myDummy = $(this)
		selectBox.find(".list .scrollPanel").append("<a href='javascript:void(0);' vid='"+myDummy.attr("value")+"' style='float:left'><span>"+String(myDummy.html()).replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;").replace("%n","<br/>&nbsp;")+"</span></a>")
		var target = selectBox.find(".list .scrollPanel").children("a:last");
		if(target.width()>maxWidth){
			maxWidth = target.width();
		}
	})*/
	//alert(selectBox.find(".display").css("padding-left"))
	selectBox.find(".display").width(selectBox.find(".selectBox").width()-selectBox.find(".arrow").width())//-parseInt(selectBox.find(".display").css("padding-left"))-parseInt(selectBox.find(".display").css("padding-right")));
	selectBox.find(".display").height(selectBox.find(".selectBox").height());

	selectBox .find(".selectBox").removeClass("active");
	selectBox.hover(function(){$(this).attr("over","true")},function(){$(this).attr("over","false")})
	selectBox.find(".btn").hover(
		function(){
			if(!selectBox.children(".selectBox").hasClass("block")){
				$(this).addClass("select")}		
			},
		function(){
			if(!selectBox.children(".selectBox").hasClass("block")){
				$(this).removeClass("select")
			}
		})
	selectBox.find(".btn").mousedown(function(){
			if (!selectBox.children(".selectBox").hasClass("block")) {
				$(this).addClass("press")
				selectBox.find(".selectBox").toggleClass("active");
				if (selectBox.find(".list").css("display") == "block") {
					selectBox[0].listInit();
					selectBox.find(".scrollPanel").each(function(){
						$(this).jScrollPane();
					});
				}
			}
	})
	selectBox.find(".btn").mouseup(function(){
		$(this).removeClass("press")
	})
	$(document).mousedown(function(){
		$(".selectContainer").each(function(){
			if($(this).attr("over") == "false"){
				$(this).find(".selectBox").removeClass("active");
			}
		})
	})

	if(Boolean(dummy.attr("tips"))){
		dummy.parent().find('.display span').html('&nbsp;' + dummy.attr("tips"))
	}else{
		dummy.parent().find('.display span').html('&nbsp;' + target.children('option[value="'+target.val()+'"]').html())
	}
}