(function($) {
	if (typeof $.Shfr == "undefined") $.Shfr = {};
	
	$.Shfr.Gallery = function() {
		this.main = $("#home-gellery-image");
		
		this.main.empty();
		
		this.image1 = $("<img src=\"" + $.siteUrl() + "assets/image/blank.gif\" alt=\"\" />");
		this.image2 = $("<img src=\"" + $.siteUrl() + "assets/image/blank.gif\" alt=\"\" />");
		
		this.main.append(this.image1);
		this.main.append(this.image2);
		this.image2.hide();
		
		this.main.css("position", "relative");
		this.main.children("img")
			.css("position", "absolute")
			.css("top", "0px")
			.css("left", "0px");
		
		this.counter = 0;
		this.active = -1;
		this.timer = null;
		
		this.menu = $('#home-gallery-menu');
		this.menu.empty();
		this.numberbox = $("<div></div>");
		this.numberbox
			.css("position", "absolute")
			.css("top", "0px")
			.css("right", "20px")
			.css("width", "100px")
			.css("height", "22px")
			.css("overflow", "hidden");
			
		this.numberbox.css("text-indent", "0px");
		this.numberbox.appendTo(this.menu);
		
		$("<div><strong>&gt;</strong></div>").click(function() {
				$.gallery.update();
			}).css("position", "absolute")
			.css("top", "0px")
			.css("right", "0px")
			.css("width", "10px")
			.css("height", "10px")
			.css("cursor", "pointer")
			.appendTo(this.menu);
		
		$("<div><strong>&lt;</strong></div>").click(function() {
				$.gallery.counter -= 2;
				if ($.gallery.counter < 0) {
					$.gallery.counter = 0;
				}
				$.gallery.update();
			}).css("position", "absolute")
			.css("top", "0px")
			.css("right", "160px")
			.css("width", "10px")
			.css("height", "10px")
			.css("cursor", "pointer")
			.appendTo(this.menu);
		
		$.ajax({
			url: $.siteUrl() + "index.php/home/images",
			dataType: 'json',
			success: function(data, status) {
				$.gallery.init(data);
			}
		});
	};
	
	$.extend($.Shfr.Gallery.prototype, {
		init: function(data) {
			this.imageList = data;
			
			this.menu.css("position", "relative");
			//this.menu.children("a").detach();//.appendTo(this.numberbox);
			
			for (var i=0; i < this.imageList.length; i++) {
				$("<a href=\"#\">" + (i+1) + "</a>")
					.data("id", i)
					.click(function() {
						$.gallery.counter = $(this).data("id");
						$.gallery.update();
						
						return false;
					})
					.addClass('gallery-menu-' + Math.min(i, 4))
					.appendTo(this.numberbox);
			};
			
			this.numberbox.append("<a href=\"#\">&nbsp;</a>");
			
			this.update();
		},
		update: function() {
			var newImage = this.imageList[this.counter];
			this.active = this.counter;
			this.counter++;
			if (this.counter > this.imageList.length-1) {
				this.counter = 0;
			}
			
			this.numberbox.children("a").removeClass().addClass('gallery-menu-4');
			for (var i=this.active - 3; i < this.active + 4; i++) {
				if (i >= 0) {
					$(this.numberbox.children("a")[i])
						.removeClass()
						.addClass('gallery-menu-' + (Math.abs(i - this.active) + 1));
				}
			};
			
			var oldIndent = this.numberbox.css("text-indent");
			this.numberbox.css("text-indent", "0px");
			
			var first = $(this.numberbox.children("a")[Math.max(this.active - 3, 0)]);
			var last = $(this.numberbox.children("a")[Math.min(this.active + 4, this.imageList.length)]);
			var firstPosition = first.position();
			var lastPosition = last.position();
			
			var newWidth = lastPosition.left - firstPosition.left;
			var newIndent = -firstPosition.left;
			
			this.numberbox.css("text-indent", oldIndent);
			
			this.loadImage(newImage);
			if (this.active == 0) {
				newIndent = 0;
			}
			
			this.numberbox.animate({
					'text-indent': newIndent + "px",
					//width: newWidth + "px"
					width: "135px"
				});
			
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout('$.gallery.update();', 10000);
		},
		loadImage: function(imageURL) {
			var image = new Image();
			$(image).load(function() {
				$.gallery.showImage(image);
			});
			image.src = imageURL;
		},
		showImage: function(image) {
			this.image2.attr("src", image.src);
			var activeImage = this.image1;
			this.image1 = this.image2;
			this.image2 = activeImage;
			
			this.image1.fadeIn(400);
			this.image2.fadeOut(400);
		}
	});
	
	$(document).ready(function() {
		$.gallery = new $.Shfr.Gallery();
	});
})(jQuery);