// since IE8 can't seem to handle many objects in the scroll without hover delay, we set it differently than all other browsers, including all other IE's. Go figure.
if ((jQuery.browser.msie) && (parseInt(jQuery.browser.version) == 8)) {
	var startPx = -450;
	var multiples = 1;
}else{
	var startPx = -5000;
	var multiples = 6;
}
var thumbWidth = 90;
var numItems = 0;
var areaWidth = 940;
var getItems = function(xml){
	// get multiple copies of all categories
	r=0;
	do { 
		$('category:not(has(category))', xml).each(function(){
			numItems ++; 
			$(".scrollItems").append("<a title='" + $(this).children('name').text() + "' href='" + $(this).children('url').text() + "'><img src='" + $(this).children('thumb_path').text() + "'></a>");
		})
		r=r+1;
	} while (r<multiples);
	doMoreStuff();
}
function setupStructure(){
	$("#categoryScroll").append("<div class='scrollContainer'></div>");
	$(".scrollContainer").append("<div class='scrollPrev'></div>");
	$(".scrollContainer").append("<div class='scrollNext'></div>");
	$(".scrollContainer").append("<div class='scrollArea'></div>");
	$(".scrollArea").append("<div class='scrollWindow'></div>");
	$(".scrollWindow").append("<div class='scrollItems'></div>");	
}
function move(distance, direction, speed){ 
	if (direction == "next"){
		$(".scrollItems").animate({left: '-='+distance}, speed);
	}else{
		$(".scrollItems").animate({left: '+='+distance}, speed);
	} 
}
function setupBehaviours(){
	$(".scrollPrev").hover(
		function(){
			$(this).addClass("over");
		}, function(){
			$(this).removeClass("over");
	});
	$(".scrollNext").hover(
		function(){
			$(this).addClass("over");
		}, function(){
			$(this).removeClass("over");
	});
	$(".scrollNext").click(function() {
		 move(200, 'next', 500); 
	});
	$(".scrollPrev").click(function() {
		 move(200, 'prev', 500); 
	});
	// bounce effect
	// $(".scrollItems img").mouseover(function(){
	//	$(this).animate({top: "-8px"}, 140);
	//	$(this).animate({top: "0px"}, 140);
	// });
	$(".scrollItems").mousewheel(function(event, delta){
		if (delta > 0){
			move(100, 'next', 200);
		}else if (delta < 0){
			move(100, 'prev', 200);
		}
		return false;
	});
}
$(document).ready(function(){
	setupStructure();
	$.ajax({
		type: "GET", 
		url: "/cats.xml", 
		dataType: "xml", 
		success: getItems
	});
});
function doMoreStuff(){
	setupBehaviours();
	// set starting position of items container
	w = thumbWidth * numItems;
	startPos = (0-(w/2))+(areaWidth/2);
	$(".scrollItems").css("width", w);
	$(".scrollItems").css("left", startPx);
	// alert (w+", "+startPos); 
}