window.onload = function() {
	new catSlider();
	$(window).bind('resize', calOverlay); 
}

function catSlider() {
	this.updateUI();
}

catSlider.prototype = {
	updateUI: function() {
		this.addNode();
		calOverlay();
	},
	addNode: function() {
    $("a.category").each(function(i) {
    	$(this).click(function(){
    		$("#prod_cat_slider_overlay").fadeIn("slow");
    		$("ul.prod_cat_list").fadeOut().empty();
				$.getJSON("get_brand.php?brand_type=" + ( i + 1 ), function(data) {
          $.each(data.items, function(i,item) {
            var catList = $("<img/>").attr("src", "admin/brand_getpic_s.php?brand_id=" + item.id).appendTo("ul.prod_cat_list");
            var catLink = document.createElement("a");
            if (item.iframe) {
	            catLink.setAttribute("href","#");
	            catLink.setAttribute("onclick", "tb_show(null, 'brand_main.php?brand_id=" + item.id + "&KeepThis=true&TB_iframe=true&height=800&width=1000');");
            }else{
	            catLink.setAttribute("href","brand_main.php?brand_id=" + item.id );
	          }
            catList.wrap(document.createElement("li"));
            catList.wrap(catLink);
          });
        });
        $("ul.prod_cat_list").fadeIn("slow");
        calSlider();
//        tb_init('a.thickbox, area.thickbox, input.thickbox');
		
    	});
    });
	}
};

var calOverlay = function() {
	$('#prod_cat_slider_overlay').css({ 
  	'left' : $('#tblcontent').offset().left, 
    'righ' : $('#tblcontent').offset().left
	}); 
};


var calSlider = function() {
	//When user move mouse over menu
  $('div.prod_cat_list').bind( "mousemove", function(e){
	//Get our elements for faster access and set overlay width
	var div = $('div.prod_cat_list');
  var ul = $('ul.prod_cat_list');
  // unordered list's left margin
  var ulPadding = 20;

	//Get menu width
  var divWidth = div.width();
  
	//Remove scrollbars
  div.css({overflow: 'hidden'});

	//Find last image container
  var lastLi = ul.find('li:last-child');
  
		//As images are loaded ul width increases,
  	//so we recalculate it each time
	  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  	div.scrollLeft(left);
	});
};