$('html').addClass('js');

$(document).ready(function() {
	$('html').removeClass('js');
	initScroller($('.p1m-image-scroller'));
});

function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

function initScroller(element)
{

	var $prevButton = '<a class="nav-button prev"></a>',
		$nextButton = '<a class="nav-button next"></a>',
		$wrapper = element.find('> div'),
		$scroller = $wrapper.find('> ul'),
		$items = $scroller.find('> li'),
		$firstItem = $items.filter(":first"),
		itemWidth = $firstItem.outerWidth(),
		itemsPerPage = 3,
		currentPage = 0,
		numPages = Math.ceil($items.length / itemsPerPage),
		currentElement = null;
	// Set random start Product
	var startElement = null,
		startArrowPos = 0,
		topIndex = $items.length - 1,
		randomIndex = randomXToY(0, topIndex);
	
	startElement = $items.get(randomIndex);
	startPage = findPage(randomIndex);
	var pagePosition = randomIndex % itemsPerPage;
	switch (pagePosition)
	{
		case 0:
			startArrowPos = 450 - itemWidth;  // left
			break;
		case 1:
			startArrowPos = 450; // center
			break;
		case 2:
			startArrowPos = 450 + itemWidth; // right
	}	
	
	function findPage(index)
	{
		var page = 0;
		while (page <= numPages)
		{
			page++;
			var pageTopIndex = page * itemsPerPage;
			if (index < pageTopIndex)
			{
				break;
			}
		}
		return page - 1;
	}

	/**
	 * When an element is hovered over, update detail pane (if defined) 
	 */
	function hoverAnimation(element, forceLeft)
	{
		if ($("#p1m-scroller-detail"))
		{
			var currElementId = "";
			if (currentElement) {
				currElementId = currentElement.attr('id');
			}
				
			if (currElementId != element.attr('id'))
			{
				var imagePosition = element.offset();
				var arrowPosition = imagePosition.left + (element.width() / 2) - 7;
				if (forceLeft)
				{
					$(".details-arrow img").css("left", forceLeft);
					$(".details-arrow img").fadeIn("slow");
				}
				else
				{
					if (!$('.details-arrow img').is(':visible'))
					{
						$(".details-arrow img").animate({
							"left" : arrowPosition,
							"opacity" : "show"
						}, 150);
					}
					$(".details-arrow img").animate({"left" : arrowPosition}, "fast");
				}
		
				
				$("#p1m-detail-content-holder").queue(function() {
					$(this).fadeOut(100);
					$(this).animate({opacity:1}, 0, function() { changeContent(element) });
					$(this).dequeue();
					$(this).fadeIn(150);
				});
				
				currentElement = element;
			}
		}
	}
	
	/*
	 * Changes the detail pane's content 
	 */
	function changeContent(element)
	{
		var contentId = element.attr('id');
		var content = $('#p1m-detail-content .' + contentId);
		var contentHolder = $('#p1m-detail-content-holder'); 
		
		contentHolder.find('h1').text(content.find('h1').text());
		
		var newImageSrc1 = content.find('img:first').attr('src') ? content.find('img:first').attr('src') : "";
		var newImageSrc2 = content.find('img:last').attr('src') ? content.find('img:last').attr('src') : "";
		 
		contentHolder.find('img:first').attr('src', newImageSrc1);
		contentHolder.find('img:last').attr('src', newImageSrc2);
		contentHolder.find('p').html(content.find('p').html());
	}

	/*
	 * Creates a new string composed of str repeated num times
	 * @param str string the string to repeat
	 * @param num integer the number of times to repeat the string
	 */
	function repeat(str, num) 
	{
		var v = new Array( num + 1 ).join( str );
		return v;
	}

	/*
	 * Scroll to the desired page of images 
	 */
	function setPage(page)
	{
		if (page >= numPages)
		{
			page = 0;
		}
		if (page < 0)
		{
			page = numPages - 1;
		}
		
		$('.details-arrow img').fadeOut("slow");
	
		var direction = page < currentPage ? -1 : 1,
			n = Math.abs(currentPage - page),
			left = itemWidth * direction * itemsPerPage * n;
			
		$wrapper.filter(':not(:animated)').animate({
				scrollLeft : '+=' + left
			}, 500, function() {
			
			}
		);
		return page;
	}
	
	// display specific
	$scroller.addClass("p1m-scroller-style");
	$scroller.after('<div style="clear:both;"></div>');
	
	
	if (($items.length % itemsPerPage) != 0) // last page isn't full of images
	{
		$scroller.append(repeat('<li class="empty" />', itemsPerPage - ($items.length % itemsPerPage))); // pad with empty li's
		$items = $scroller.find('> li');
	}
	
	$wrapper.before($prevButton);
	$wrapper.after($nextButton);
	if (navigator.userAgent.toLowerCase().indexOf('msie') > 0)
	{
		$wrapper.css("margin", "0");
	}
	
	// hook up hover and nav button events
	$items.hover(function() {
		hoverAnimation($(this));
	});
	
	$('a.next', element).click(function () {
		currentPage =  setPage(currentPage + 1);
		return false;
	});
	
	$('a.prev', element).click(function () {
		currentPage = setPage(currentPage - 1);
		return false;
	});
	
	// start up the scroller
	currentPage = setPage(startPage);
	hoverAnimation($(startElement), startArrowPos);
}