$(document).ready(function(){
    msb();
});

function click_event() {     
           $elem_height = $(this).next('ul').children('li').css('line-height');
           $elem_count = $(this).next('ul').children('li').size();
           $box_height = parseInt($elem_height)*parseInt($elem_count)+25;
           if($box_height >= 200) {
                $box_height = 200+'px';
            }
            else
                $box_height = $box_height+'px';
            $(this).next('ul').css('height', $box_height);
            $this_width = ($(this).css('width'));
            $this_width = $this_width.replace(/px/g, "");
            $(this).next('ul').css('width', $this_width);
            $this_width = $this_width-50;
            $(this).next('ul').children('li').children('label').css('width', $this_width);
            if($(this).next('ul').hasClass("on")) {
                $(this).next('ul').removeClass("on");
            }
            else {
               $(".msb ul").removeClass("on");
               $(this).next('ul').addClass("on");
               // set focus to the first selected element
               for (var i = 0; i < $(this).next('ul').children('li').length; i++) {
                    if($(this).next('ul').children('li').get(i).firstChild.checked == true) {
                        $(this).next('ul').children('li').get(i).firstChild.focus();
                        return;
                    }
                }
            }
        }

function msb(){

        $(".msb").each(function(i){
                $box_width = ($(this).css('width'));
                $this_width = parseInt($box_width)-30;
                $this_width = $this_width+'px';
                $inner_width = parseInt($box_width)-2;
                $inner_width = $inner_width+'px';
		$newContent = '';
		$('select', this).each(function(){
			$select = this;
			$name = this.name;
			$i = 0;
			$options = '';
			$selectedText = '';
			$('option', this).each(function(){
				$value = $(this).attr('value');
				$text = $(this).text();
				$isSelected = $(this).attr('selected') == true? 'checked="checked"' : '';
				$isBold = $(this).attr('selected') == true? 'class="b"' : '';
				$options+= '<li><input type="checkbox" value="' + $value + '" name="' + $name + '" ' + $isSelected + ' /><label ' + $isBold + '>' + $text + '</label><div class="clear"></div></li>';
				if ($isBold) {
					$selectedText+= '<li style="width:'+$this_width+'">' + $text + '</li>';
					$i++;
				}
			});
                        if($i == 0) {
                            $newContent+= '<h3 style="width:'+$inner_width+'">-- select --</h3>';
                        }
                        else if($i == 1) {
                            $newContent+= '<h3 style="width:'+$inner_width+'">'+$i+' entry selected</h3>';
                        }
                        else {
                            $newContent+= '<h3 style="width:'+$inner_width+'">'+$i+' entries selected</h3>';
                        }
			$newContent+= '<ul class="sbox" style="width:'+$inner_width+';overflow-x:hidden;overflow-y:scroll">';
			$newContent+= $options;
			$newContent+= '</ul>';
                        if($selectedText == '') {
                            $newContent+= '<ul class="selected" style="width:'+$inner_width+'"></ul>';
                        }
			else
                            $newContent+= '<ul class="selected" style="width:'+$inner_width+'"><li style="list-style-type:none;border-top:none;width:'+$this_width+';margin-left:5px;"><b>selected:</b></li>'+$selectedText+'</ul>';
		});
		$(this).html($newContent);
	});

        $(".msb li").hover(
                function(e) {
                    $(this).addClass("hover");
                },
                function(e) {
                    $(this).removeClass("hover");
                }
            );
                
        $(".msb h3").click(click_event);

        $(".msb h3").mouseover(function(){
                $(this.parentNode).css({'border':'1px solid #426E97'});
	});

        $(".msb h3").mouseout(function(){
                $(this.parentNode).css({'border':'1px solid #DDDDDD'});
	});
	
	$(".msb").mouseout(function(){
		$(document).bind("click", closeWindow);
	});

	$(".msb").mouseover(function(){
		$(document).unbind("click", closeWindow);
	});

        $(".msb li input").click(function(){
                $box_width = ($(this).css('width'));
		$isSelected = $(this).attr('checked') == true? 1 : 0;
		if($isSelected == 0) {
                    $(this).attr("checked","checked")
                    $(this).next("label").addClass('b');
                }
		else {
                    $(this).removeAttr('checked');
                    $(this).next("label").removeClass('b');
                }
		$i=0;
		$z = $(this).parent('li').parent('ul');
                $this_width = parseInt($box_width)-30;
                $this_width = $this_width+'px';
		$selectedText = '<li style="list-style-type:none;width:'+$this_width+';border-top:none;margin-left:5px;"><b>selected:</b></li>';
		$('li', $z).each(function(i){
			$isSelected = $('input',this).attr('checked') == true? 1 : 0;
			$text = $('label',this).text();
			if ($isSelected) {
				$selectedText+= '<li style="width:'+$this_width+'">' + $text + '</li>';
				$i++;
			}
		});
		$w = $z.parent();
                if($i == 0) {
                    $("h3", $w).text('-- select --');
                    $selectedText = '';
                }
                else if($i == 1) {
                    $("h3", $w).text($i + ' entry selected');
                }
                else {
                    $("h3", $w).text($i + ' entries selected');
                }
		$("ul.selected", $w).html($selectedText);
	});

        
        $(".msb .sbox li").click(function(){
                $elem = $(this).children("input");
                $isSelected = $elem.attr('checked') == true? 1 : 0;
		if($isSelected == 0) {
                    $elem.attr("checked","checked")
                    $elem.next("label").addClass('b');
                }
		else {
                    $elem.removeAttr('checked');
                    $elem.next("label").removeClass('b');
                }
		$i=0;
		$z = $(this).parent('ul');
		$selectedText = '<li style="list-style-type:none;width:270px;border-top:none;margin-left:5px;"><b>selected:</b></li>';
		$('li', $z).each(function(i){
			$isSelected = $('input',this).attr('checked') == true? 1 : 0;
			$text = $('label',this).text();
			if ($isSelected) {
				$selectedText+= '<li style="width:270px">' + $text + '</li>';
				$i++;
			}
		});
		$w = $z.parent();
                if($i == 0) {
                    $("h3", $w).text('-- select --');
                    $selectedText = '';
                }
                else if($i == 1) {
                    $("h3", $w).text($i + ' entry selected');
                }
                else {
                    $("h3", $w).text($i + ' entries selected');
                }
		$("ul.selected", $w).html($selectedText);
	});
        
}

function closeWindow() {
	$(".msb ul").removeClass("on");
        $('.newList').not($(this).next()).hide().parent().removeClass('newListSelFocus');
}