function CHEIGHT() {
    if (typeof window.innerWidth != 'undefined') {
        return window.innerHeight
    }
    else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) {
        return document.documentElement.clientHeight
    } else {
        return document.getElementsByTagName('body')[0].clientHeight
    }
}
var colors = ['1f1f1f', '6a2300', '333300', '020260', '10488e', '333333', '800000', 'dd5800', '5b5b00', '008000', '008080', '4201ad', '3f3f7e', '808080', 'd60000', 'd99022', '658700', '276546', '209191', '2b3c6f', '800080', '676767', '450145', '8c7000', '63631f', '075907', '1d9595', '096f88', '993366', '9b9b9b', 'a36182', 'b67e46', '5e5e40', '398585', '31506f', '828c77'];
var color = $.cookie("bgColor");
if (color == null) {
    color = "#" + colors[Math.floor(Math.random() * colors.length)];
    $.cookie("bgColor", color, {expires: 365});
}

function SetHeight() {
    var hgt = CHEIGHT() - 300;
    try {
        //scrolldiv2
        $("#scrolldiv").css({ "height": hgt });
        $("#scrolldiv2").css({ "height": hgt });
    }
    catch (exp) { }
}

$(document).ready(
		function() {
		    SetHeight();
		    //document.getElementById("scrolldiv")
		    $("body").css({ "background-color": color });
		    Cufon.replace('a, span').CSS.ready(function() {
		        var $menu = $("#slidingMenu");

		        /**
		        * the first item in the menu, 
		        * which is selected by default
		        */
		        var $selected = $menu.find('li:eq(' + menuIndex + ')');

		        /**
		        * this is the absolute element,
		        * that is going to move across the menu items
		        * it has the width of the selected item
		        * and the top is the distance from the item to the top
		        */
		        var $moving = $('<li />', {
		            className: 'move',
		            top: $selected[0].offsetTop + 'px',
		            width: $selected[0].offsetWidth + 'px'
		        });

		        /**
		        * each sliding div (descriptions) will have the same top
		        * as the corresponding item in the menu
		        */
		        $('#slidingMenuDesc > div').each(function(i) {
		            var $this = $(this);
		            $this.css('top', $menu.find('li:nth-child(' + parseInt(i + 2) + ')')[0].offsetTop + 'px');
		        });

		        /**
		        * append the absolute div to the menu;
		        * when we mouse out from the menu 
		        * the absolute div moves to the top (like innitially);
		        * when hovering the items of the menu, we move it to its position 
		        */
		        $menu.bind('mouseleave', function() {
		            moveTo($selected, 400);
		        })
						 .append($moving)
						 .find('li')
						 .not('.move')
						 .bind('mouseenter', function() {
						     var $this = $(this);
						     var offsetLeft = $this.offset().left - 20;
						     //slide in the description
						     $('#slidingMenuDesc > div:nth-child(' + parseInt($this.index()) + ')').stop(true).animate({ 'width': offsetLeft + 'px' }, 400, 'easeOutExpo');
						     //move the absolute div to this item
						     moveTo($this, 400);
						 })
						  .bind('mouseleave', function() {
						      var $this = $(this);
						      var offsetLeft = $this.offset().left - 20;
						      //slide out the description
						      $('#slidingMenuDesc > div:nth-child(' + parseInt($this.index()) + ')').stop(true).animate({ 'width': '0px' }, 400, 'easeOutExpo');
						  }); ;

		        /**
		        * moves the absolute div, 
		        * with a certain speed, 
		        * to the position of $elem
		        */
		        function moveTo($elem, speed) {
		            $moving.stop(true).animate({
		                top: $elem[0].offsetTop + 'px',
		                width: $elem[0].offsetWidth + 'px'
		            }, speed, 'easeOutExpo');
		        }
		        moveTo($("#slidingMenu").find('li:eq(' + menuIndex + ')'), 400);
		    });
		    $('#dock2').Fisheye(
				{
				    maxWidth: 60,
				    items: 'a',
				    itemsText: 'span',
				    container: '.dock-container2',
				    itemWidth: 80,
				    proximity: 75,
				    alignment: 'left',
				    valign: 'bottom',
				    halign: 'center'
				}
			)
		    $.fn.colorPicker.addColors(colors);
		    $('#color1').colorPicker();
		    $('#color1').change(function() {
		        color = $("#color1").val();
		        $.cookie("bgColor", color, { expires: 365 });
		        $("body").css({ "background-color": color });
		    });
		    $("#color1").val(color);
		    $("#color1").change();
		}
	);