$(document).ready(function() {
	var imageBoxen = $('div.skim');
	imageBoxen.append('<div class="corners">&nbsp;</div><div class="mask"><div class="count"><div class="text"></div></div></div>');
	var images;
	var percent;
	var hotspots;
	var left;
	$('div.skim img:first-child').addClass('selected');
	$('div.skim div.skimsrc span:first-child').addClass('current');
	for(var x=0;x<imageBoxen.length;x++) { // Generate hotspots for image swapping
		left = 0;
		images = $(imageBoxen[x]).find('img.reflected');
		if(images.length == 0) {
			images = $(imageBoxen[x]).children('img');
		}
		percent = 100/images.length;
		if(percent < 100) {
			for(var y=0;y<images.length;y++) {
				$(imageBoxen[x]).children('.corners').append("<div class='hotspot' style='width: "+ percent +"%; left: "+ left +"%;'></div>");
				$(imageBoxen[x]).children('div.mask').children('div.count').append("<div class='scroll' style='width: "+ percent +"%; left: "+ left +"%;'></div>");
				left+=percent;
			}
		}
		if($(imageBoxen[x]).children('div.skimsrc').children('span').length > 1)
			$(imageBoxen[x]).children('div.corners').append('<span class="nav left"></span><span class="nav right"></span>');
	}
	$('div.hotspot').mouseover(function() {
		/*$(this).css("background","red");
		$(this).css("opacity","0.5");*/
		hotspots = $(this).parent().children('div.hotspot');
		
		var hsIndex = hotspots.length - $(this).nextAll('div.hotspot').length;
		$(this).parent().siblings('div.mask').children('div.count').children('.text').text("Viewing "+ hsIndex +" of "+ hotspots.length); // Write text to counter
		
		if($(this).parent().siblings('div.mask').children('div.count').css("bottom") == "0px" && $(this).parent().siblings('div.mask').children('div.count').hasClass("down")) {
			$(this).parent().siblings('div.mask').children('div.count').css("bottom","-20px");
		}
		if($(this).parent().siblings('div.mask').children('div.count').hasClass("down")) {
			$(this).parent().siblings('div.mask').children('div.count').animate({
				bottom: "+=20px"
			}, "fast");
			$(this).parent().siblings('div.mask').children('div.count').removeClass("down");
		}
		
		$(this).parents('div.corners').siblings('div.selected').removeClass('selected');
		$(this).parents('div.corners').siblings('div:eq('+(hsIndex-1)+')').addClass('selected');

		$(this).parent().siblings('div.mask').children('div.count').children('div.selected').removeClass('selected');
		$(this).parent().siblings('div.mask').children('div.count').children('div.scroll:eq('+(hsIndex-1)+')').addClass('selected');
	});
	/*$('.hotspot').mouseout(function() {
		$(this).css("background","transparent");
	});*/
	$('div.skim').bind("mouseleave", function() {
		if(!$(this).parent().siblings('div.mask').children('div.count').hasClass("down")) {
			$(this).children('div.mask').children('div.count').animate({
				bottom: "-=20px"
			}, "fast");
			$('div.skim div.mask div.count').addClass('down');
		}
	});
	$('.skim .mask .count').addClass('down');
	
	$('span.left').click(function() {
		var xthis = $(this);
		var skimList = xthis.parent().siblings('div.skimsrc');
		var curSrc = skimList.children('span.current');
		
		if(curSrc.prev().length) {
			var skimSrc = curSrc.prev().text();
			curSrc.prev().addClass('current');
			curSrc.removeClass('current');
		} else {
			var skimSrc = curSrc.parent().children().filter(':last').text();
			curSrc.parent().children().filter(':last').addClass('current');
			curSrc.removeClass('current');
		}
		
		xthis.parent().siblings('div.selected').remove();
		xthis.parents('div.skim').prepend("<img class='reflect rheight15 ropacity30 selected' src='"+skimSrc+"' />");
		$('div.skim img').load(function() {
			addReflections();
		});
		//xthis.parent().siblings('div.selected').children('canvas').height(18);
	});
	$('span.right').click(function() {
		var xthis = $(this);
		var skimList = xthis.parent().siblings('div.skimsrc');
		var curSrc = skimList.children('span.current');
		
		xthis.parent().siblings('div.selected').remove();
		
		if(curSrc.next().length) {
			var skimSrc = curSrc.next().text();
			curSrc.next().addClass('current');
			curSrc.removeClass('current');
		} else {
			var skimSrc = curSrc.parent().children().filter(':first').text();
			curSrc.parent().children().filter(':first').addClass('current');
			curSrc.removeClass('current');
		}
		
		xthis.parent().siblings('div.selected').remove();
		xthis.parents('div.skim').prepend("<img class='reflect rheight15 ropacity30 selected' src='"+skimSrc+"' />");
		$('div.skim img').load(function() {
			addReflections();
		});
	});
});