/*
 * Add image scroller section to the page
 */
$("#top-sect").append('\
<div id="images-scroller">\n\
	<div id="scrolling-images">\n\
		<ul>\n\
			<li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610033749.jpg" longdesc="./gallery/uploads/1.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610033854.jpg" longdesc="./gallery/uploads/2.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/180610031032.jpg" longdesc="./gallery/uploads/3.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610033913.jpg" longdesc="./gallery/uploads/4.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610033926.jpg" longdesc="./gallery/uploads/5.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610041641.jpg" longdesc="./gallery/uploads/6.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/160610041647.jpg" longdesc="./gallery/uploads/7.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/180610030710.jpg" longdesc="./gallery/uploads/front-8.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/180610030722.jpg" longdesc="./gallery/uploads/front-9.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/180610030733.jpg" longdesc="./gallery/uploads/front-10.jpg" alt="" /></a></li><li class="scroll-image"><a href="#"><img src="./gallery/thumbs/180610031032.jpg" longdesc="./gallery/uploads/3.jpg" alt="" /></a></li>			<div class="clearfix"></div>\n\
		</ul>\n\
		<div class="clearfix"></div>\n\
	</div>\n\
</div>\n\
<div class="clearfix"></div>');

$("#top-sect #images-scroller #scrolling-images ul li:first").addClass("selected");

$("#large-image img").attr("src",$("#top-sect #images-scroller #scrolling-images ul li:first img").attr("longdesc"));


var bigimage = $("#large-image img");

hovered = false;

var j = $("#scrolling-images ul li").length;
var li_width = 102;

$("#scrolling-images ul").css("width",(li_width*j)+"px");

$("#images-scroller").append('<div id="images-scroll-left">&lt;</div><div id="images-scroll-right">&gt;</div>');

$(".scroll-image a").click(function(e) {
	e.preventDefault();
	var image = $(this).find("img");
	var li = $(this).parent();
	$(li).parent().find("li").each(function(i) {
		$(this).removeClass("selected");
	});
	$(li).addClass("selected");
	$(bigimage).attr("src",image.attr("longdesc"));
	$(bigimage).attr("longdesc",image.attr("longdesc"));
	hovered = false;
});

$(".scroll-image a").hover(function(e) {
	e.preventDefault();
	var image = $(this).find("img");
	var li = $(this).parent();
	$(li).parent().find("li").each(function(i) {
		$(this).removeClass("selected");
	});
	$(li).addClass("selected");
	$(bigimage).attr("src",image.attr("longdesc"));
	hovered = true;
});


if(j > 8)
{

	$("#images-scroll-left").css("opacity",0.2);
	$("#images-scroll-left").css({cursor:"default"});

	function scrollimages(dist,width,mult)
	{
		var left = $("#scrolling-images ul").css("margin-left").replace("px","")
		$("#scrolling-images ul").animate({
			"margin-left": "-"+width+"px"
		},((left - dist) * mult),'linear',function() {
			if($("#scrolling-images ul").css("margin-left").replace("px","") == 0)
			{
				$("#images-scroll-left").animate({
					opacity: 0.2
				});
				$("#images-scroll-left").css({cursor:"default"});
			}
			if($("#scrolling-images ul").css("margin-left").replace("px","") == -($("#scrolling-images ul").width() - (7 * li_width) - 5))
			{
				$("#images-scroll-right").animate({
					opacity: 0.2
				});
				$("#images-scroll-right").css({cursor:"default"});
			}
		});
	}

	$("#images-scroll-right").hover(function(e) {
		var dist = ((j-7)*li_width) * -1;
		var width = $("#scrolling-images ul").width() - (7 * li_width) - 5;
		scrollimages(dist, width, 6.5);
		$("#images-scroll-left").animate({opacity:1});
		$("#images-scroll-left").css({cursor:"pointer"});
	},function(e) {
		$("#scrolling-images ul").stop();
	});

	$("#images-scroll-left").hover(function(e) {
		scrollimages(0,0, -6.5);
		$("#images-scroll-right").animate({opacity:1});
		$("#images-scroll-right").css({cursor:"pointer"});
	},function(e) {
		$("#scrolling-images ul").stop();
	});

}
if(j <= 8)
{
	$("#images-scroll-left").remove();
	$("#images-scroll-right").remove();

	$("#scrolling-images ul").css("width","105%");

	$("#scrolling-images").css("margin-left",((8-j)*51)+"px");
}