/*
	1)when hover change opacity of thumnail
	2)remove left right arrows when end
*/
//Note:Put the thumbnails in Images/thumbs folder and the larger images with same name in Images/thumbs/larger folder

$(document).ready(function(){
	$('#gallery').Gallery();
});

(function($){
$.fn.Gallery = function(params){
	var defaults = {
		moveLeft: true,
		isAnimating: false,
		pageSize: 8,
		itemCount: 0,
		startIndex: 0,
		nextIndex: 0
	},
	intialize = function(id){
		//select the first thumnail
		$('#thumbHousing li.item:first').addClass('on');
		LoadSelectedImage();
	
		//click event on thumbnails
		$('#thumbHousing li a').click(function(){
			$('li.on').removeClass('on');
			$(this).parent().addClass('on');
			LoadSelectedImage();
			return false;
		});
		$('.largePreviousButton').click(function(){
			var $items = $('#thumbHousing li');
			var index = $items.index($('li.on').eq(0));
			index--;
			if(index < 0){
				index = 0;
				return false;
			}
			if(index < defaults.startIndex) Slide(-defaults.pageSize);
			$('li.on').removeClass('on');
			$items.eq(index).addClass('on');
			LoadSelectedImage();
			return false;
		});
		$('.largeNextButton').click(function(){
			var $items = $('#thumbHousing li');
			var index = $items.index($('li.on').eq(0));
			index++;
			if(index >= defaults.itemCount){
				index = defaults.itemCount-1;
				return false;
			}
			if(index > defaults.nextIndex) Slide(defaults.pageSize);
			$('li.on').removeClass('on');
			$items.eq(index).addClass('on');
			LoadSelectedImage();
			return false;
		});
		
		//get size of #canvas ul and set it
		var li = $('#thumbHousing li.item');
		var liWidth = li.eq(0).width();
		var liCount = li.length;
		defaults.itemCount = liCount;
		var pageWidth = (liWidth*defaults.pageSize);
		$(id).find('.wrap').css({width: pageWidth + 'px'});
		defaults.nextIndex = defaults.startIndex + (defaults.pageSize-1);
		
		//set width of thumbslider to center align
		var wid = pageWidth + ($('div.thumbPreviousButton').width()*2);
		$('div#thumbSlider').css({width: wid+3});
		
		//bind click event on left n right buttons
		var leftLimit = (liWidth*liCount) - $('div#canvas').width();
		$('div.thumbPreviousButton').click(function(){
			if(!defaults.isAnimating)
				Slide(-defaults.pageSize);
		});
		$('div.thumbNextButton').click(function(){
			if(!defaults.isAnimating)
				Slide(defaults.pageSize);
		});	
	
	},
	Slide = function(c){
		
		var a = defaults.startIndex + 1 + c;
		var b = defaults.nextIndex + 1 + c;
		
		if(b > defaults.itemCount){
			var inc = c - (b-defaults.itemCount);
			a = (defaults.startIndex+1) + inc;
			b = (defaults.nextIndex+1) + inc;
		}
		if(a < 1){
			var inc = c + (1-a);
			a = (defaults.startIndex+1) + inc;
			b = (defaults.nextIndex+1) + inc;			
		}
		
		defaults.startIndex = a-1;
		defaults.nextIndex = b-1;
		
		var li = $('#thumbHousing li.item');
		var liWidth = li.eq(0).width();
		var amount = (defaults.startIndex)*liWidth;
		$('div#thumbSliderInner').animate({
			left: -amount
		}, 2000);
		
		//UpdatePager();
	},
	LoadSelectedImage = function(){
		var src = $('#thumbHousing li.on a').attr('rel');
		var img = new Image();
		$('#loader').addClass('loading');
		$('#largePhotoLink').css({opacity: .5});
		$(img).load(function () {
			$(this).css({display: 'none'});
			$('#loader').removeClass('loading');
			$('#largePhotoLink').empty();
			$('#largePhotoLink').css({opacity: 1});
			$('#largePhotoLink').attr('rel', src);
			$('#largePhotoLink').attr('href', src);
			$('#largePhotoLink').append(this);
			$(this).fadeIn(800);
			var width = $('div#largePhotoCon').outerWidth() + $('div.largePreviousButton').width() + $('div.largeNextButton').width();
			$('div.largePhoto').css({width: width});
		}).attr('src', src).attr('id','gallery_img_container');

	}

	return this.each(function(){
		intialize(this);
	});
}
})(jQuery);