$(document).ready(function(){
	subcount = $("#sub-count").attr("class");
	for(var i=0; i<subcount;i++){
		me = $("#left > ul > li > ul").parent().find("a:first").eq(i).click(function(){
			$(this).parent().find("ul:first").toggle(1200);
			$(this).toggleClass("selected");
			//$("#left > ul > li > a.selected").parent().find("ul:first").not($(this).parent().find("ul:first")).toggle(500);
			$("#left > ul > li > a.selected").not($(this)).removeClass("selected");
			return false;
		});
	}

	$("#left > ul > li > ul > li").find(".selected").parent().parent().toggle();
	
	/*$("#landing li").not(":last").hover(function(){
		$("#landing li").css({ 'zIndex':1 });
		$(this).css({ 'zIndex':999, 'position':'absolute' });
		$(this).animate({ 'width':'246px' }, 800);
	}, function(){
		$(this).animate({ 'width':'123px' }, 800);
	});
	
	$("#landing li:last").hover(function(){
		$("#landing li").css({ 'zIndex':1 });
		$(this).css({ 'zIndex':999, 'position':'absolute' });
		$(this).animate({ 'width':'246px', 'left':'492px' }, 800);
	}, function(){
		$(this).animate({ 'width':'123px', 'left':'615px' }, 800);
	});*/
	
	$("#landing > div > ul > li").hover(function(){	
		$('#landing > div > ul > li').stop();						   
		$('#landing > div > ul > li').not(this).animate({ 'width':'104px' }, 800);
		$(this).animate({ 'width':'260px' }, 800);
	});
	
	$("#landing > div > ul").hover(function(){		
	}, function(){
		$('#landing > div > ul > li').not(this).animate({ 'width':'130px' }, 800);
	});
});

var ignoreNativeDrag = function() {	return false; };
$('scrollbar').bind('dragstart', ignoreNativeDrag).bind('selectstart', ignoreNativeDrag);

$("#product-list").ready(function(){
								  
	$("#scroll").css("display", "block");
	$("#product-links").css("display", "block");
	$("#product-links-basic").remove();
	
	$("#product-links > dl > dd > div").css({ 'width':((($("#product-links").find("img").length)*200)+($("#product-links").find("img").length-1)*4)+'px' });
	
	sw = $("#scroll").width();
	pw = $("#product-links > dl > dd > div").width();
			 
	scrollwidth = Math.floor(sw-((sw/pw)*(pw-sw)));

	$("#scrollbar").css({ 'width':scrollwidth+'px' });
	
	$("#scrollbar").draggable({ containment: 'parent' });
	
	$('#scrollbar').bind('drag', function(event, ui) {
		percentage = Math.round(parseFloat($(this).css("left"))/$(this).parent().width()*100);
		out = Math.round(($("#product-links > dl > dd > div").width()/100)*percentage);
		$("#product-links > dl > dd").animate({ scrollLeft: out+'px' }, 0);
	});
	
	$("#product-links > dl > dt").find("a").click(function(){
		var current = $("#product-links > dl > dd").scrollLeft();
		switch($(this).attr("rel")){
			case 'Left':
				$("#product-links > dl > dd").animate({ scrollLeft: (current-660)+'px' }, 1660, "swing");
				
				if((current-660)>0){
					me = "#product-links > dl > dd > div";
					var percentage = Math.round((current-660)/$(me).width()*100);
					var out = Math.round(($("#scroll").width()/100)*percentage);
					$("#scrollbar").animate({ 'left':out+'px' }, 2660);
				}else{
					$("#scrollbar").animate({ 'left':'0px' }, 1660);
				}
			
			break;
			case 'Right':
				$("#product-links > dl > dd").animate({ scrollLeft: (current+660)+'px' }, 1660, "swing");
				
				me = "#product-links > dl > dd > div";
				var percentage = Math.round((current+660)/$(me).width()*100);
				var out = Math.round(($("#scroll").width()/100)*percentage);
				if(out > ($('#scroll').width()-$('#scrollbar').width())){
					$("#scrollbar").animate({ 'left':($('#scroll').width()-$('#scrollbar').width())+'px' }, 1660);
				}else{
					$("#scrollbar").animate({ 'left':out+'px' }, 1660);
				}
			break;
		}
		return false;
	});
	
	if($("#product-links").find("img").length < 7){
		$("#scrollbar").css({ 'width':$('#scroll').width()+'px', 'opacity':'0' });
		$("#scroll").css({ 'opacity':'0' });
		$("#product-links > dl > dt").css({ 'opacity':'0' });
	}
});

function viewProduct(id){
	$.get("product_detail.asp", { 'ProdID':id }, function(data){ $("#detail").html(data); }, "html");
}