$(document).ready(function(){
	/***
	*Sets the scrollable browser. 
	*@return void
	*/
	
	/***
	*The width of the image that makes up one scrollable item
	*@var number itmWidth
	*/
	var itmWidth = 118;
	
	/***
	*Width of the visible pane
	*@var number itmWidth
	*/
	var paneWidth = 870;


	//Set width of browser div to overcome overflow
	var kids = $("#browser").children();
	var len = kids.length;
	var totalWidth = itmWidth*Number(len);
	totalWidth += "px";
	$("#browser").css("width", totalWidth);
	
	/***
	*Click and scroll images to the left
	*@return void
	*/
	$("#nextButton").click(function(){
		//Disable if animation is already in progress
		if ($(':animated').length) {
			return false;
		}
		//Find left val
		var leftVal = $('#browser').css('left');
		var pos = leftVal.search("p");
		var leftValNum = Number(leftVal.substr(0,pos));
		//Find total width
		var kids = $("#browser").children(".scrollItem");
		var len = Number(kids.length);
		var totalWidth = itmWidth*len;
		var totalMovement = (totalWidth-paneWidth);
		var movementLeftOver = totalMovement-(leftValNum*-1);
		var newVal = 0;
		if(movementLeftOver > (itmWidth*4)){
			newVal = leftValNum-(itmWidth*4);	
		}else{
			newVal = leftValNum-movementLeftOver;
		}
		newVal += "px";
		$("#browser").animate( { left:newVal }, 1500);
	});
	
	/***
	*Click and scroll images to the right
	*@return void
	*/
	$("#prevButton").click(function(){
		//Disable if animation is already in progress
		if ($(':animated').length) {
			return false;
		}
		//Find left val
		var leftVal = $('#browser').css('left');
		var pos = leftVal.search("p");
		var leftValNum = Number(leftVal.substr(0,pos));
		if(leftValNum < 0){
			var newVal = 0;
			if(leftValNum >= -(itmWidth*4)){
				newVal = 0;
			}else{
				newVal = leftValNum+(itmWidth*4);
			}
			newVal += "px";
			$("#browser").animate( { left:newVal }, 1500);
		}
	});
});

/***
*This creates a div to hover over a link. 
*@param element aElem : The link that has fired the event
*@param string image : The image that will make up the rollover
*@param string text : HTML text that will make up the rollover
*@return void
*/
function showArtist(aElem,image,text){
	//obtain elems
	var a = $(aElem);
	var offset = a.offset();
	var newTop = Number(offset.top);
	newTop += "px";
	var newLeft = Number(offset.left)+100;
	newLeft += "px";

	//Create div
	var hoverDiv = $(document.createElement("div"));
	hoverDiv.attr("class","artistOver");
	hoverDiv.html('<img src="images/artists/portrait/'+image+'" align="left" alt=""/>'+'<p class="artistOverText">'+text+'</p>');
	hoverDiv.css({top:newTop, left:newLeft});
	$("#artistsContainer").append(hoverDiv);
}

/***
*Removes the div created by showArtist() 
*@param aElem : The link that has fired the event
*@return void
*/
function hideArtist(aElem){
	$(".artistOver").remove();
}