/*
	jQuery slider gallery plugin. 
	Version 0.5 dev
	TODO :
	Customize caption options. 
	Animation options for captions.
	Placement options.
	Pager with options
	Rewind off option
	Expand to larger image (when image is too large for set display)
*/

(function($) {
	$.fn.gallery = function(opts) {
		
		// Set up default values
		var imageWidth = $('ul li img', this).width();
		var imageHeight = $('ul li img', this).height();
		var totalImages = parseInt($('ul li', this).size());
		var caption = $('img', this).attr('title');
		var thisGallery = this; // reference to this gallery
		
		// defaults options
		var defaults = {
			skin: null,
			galleryWidth: imageWidth,
			speed: 600,
			imageWidth : imageWidth,
			imageHeight : imageHeight,
			totalImages : totalImages,
			galleryWidth : totalImages * imageWidth,
			currentImage : 0, // this is also the start image
			teasers : false, // teaser, set id for teaser container
			captionType : false, // title, div
			rewind : false, // should images rewind at end or constant slide forwards
			cycle : true, // should images cycle
			cycleSpeed : 4000,
			pagerType : 'numbers', // false, numbers, images
			transitionType : 'fade',
			descTrigger : '#' // trigger for a class id, if you need to use # at the start of your descriptions you could change the trigger here.
		}
		
		// Set first mask link
		$("a.#mask").attr('href', $('#teasers a:first').attr('href'));

		// Get default options	
		var opts = $.extend(defaults, opts);

		// set Gallery width
		$(this).width(opts.galleryWidth);
	
		return this.each(function() {
		
		// Image cycle
		if(opts.cycle == true){
			var refreshIntervalId = setInterval(next, opts.cycleSpeed); // rotate images
			$(this).hover(function () { // stop and resume rotate on rollover of main image. 
				clearInterval(refreshIntervalId);
			}, function () {
				refreshIntervalId = setInterval(next, 4000);
			});
		}
		
		// Rewind images 
		if(opts.rewinds == true) {
			
		}
		
		$(this).css({
			'position' : 'relative',
			'overflow' : 'hidden',
			'width' : opts.imageWidth,
			'height' : opts.imageHeight
		});		
			
		$('ul', this).css({
			width: opts.galleryWidth
		});
		
		$('ul, li', this).css({
			'float' : 'left',
			'margin' : 0,
			'padding' : 0,
			'list-style' : 'none'
		});
			
		// Create Gallery Previous and next
		var galleryPrevious = '<div id="gallery-prev"></div>';
   		var galleryNext = '<div id="gallery-next"></div>';
   		$(this).append(galleryPrevious + galleryNext)
   			
		// Postion Gallery Previous and Next
			
		$('#gallery-prev, #gallery-next', this).css({
			'position' : 'absolute',
			'zIndex' : 1,
			'height' : opts.imageHeight,	
			'width' : (opts.imageWidth / 2), // prev and next take up half the image
			'cursor' : 'pointer'
			});
		$('#gallery-prev', this).css({
			'left' : 0
		});
		$('#gallery-next', this).css({
			'right' : 0
		});
			
		$('img', this).css({'display' : 'block'});
		
		$('#teasers a').click(function(e) { // jump to image
			opts.currentImage = $(this).index();
			imageLocation = opts.currentImage*opts.imageWidth; // find where currentImage is located
			e.preventDefault();
			transition(opts.transitionType, imageLocation, opts.currentImage);
		});

		$('#gallery-prev', this).click(function() {
			previous();
		});
		$('#gallery-next', this).click(function() {
			next();
		});

		// Gallery captions
		if(opts.captionType != false) {
			if(opts.captionType.charAt(0) == '.') { // if custom class captions are used add active class
					$(opts.captionType).eq(opts.currentImage).addClass('active');
				return false;
			} else { // do typical caption
				$('li', this).each(function(n) {
					captionTitle = $('img').eq(n).attr('title');
					captionContent = '<div class="caption-content">'+captionTitle+'</div>';
					caption = '<div class="caption"></div>';
					captionContentHeight = $('li .caption-content').height();
					$('li').eq(n).append(caption);
					$('li').eq(n).append(captionContent);
				});
	   			$('.caption-content').css({
	   				'color' : '#fff',
	   				'zIndex' : 3,
	   				'fontFamily' : 'arial'
	   			});
	   			$('.caption, .caption-content').css({
	   				'position' : 'absolute',
	   				'bottom' : 0,
	   				'padding' : 5
	   			});
	   			
	   			alert(captionContentHeight)
	   			$('.caption').css({
	   				'background' : '#000',
	   				'opacity' : .4,
	   				'width' : imageWidth-10,
	   				'height' : captionContentHeight,
	   				'zIndex' : 2
	   			});
	   		}
		}

		if(opts.pagerType != false) {
			pager();
		}
			
		$(window).keypress(function (event) {
		
			var keyCode = event.keyCode || event.which, 
				arrow = {left: 37, right: 39 };
				clearInterval(refreshIntervalId);
			switch (keyCode) {
				case arrow.left:
				previous();
			break;
				case arrow.right:
				next();
			break;
			}
		});
	});

	function previous() {
		if(!$('ul', thisGallery).is(':animated')) {
			opts.currentImage -= 1;
			if(opts.currentImage >= 0) {
				imageLocation = opts.currentImage*opts.imageWidth;
			} else {
				opts.imageLocation = opts.imageWidth*opts.totalImages-opts.imageWidth;
				opts.currentImage = opts.totalImages-1;
			}
			transition(opts.transitionType, imageLocation, opts.currentImage);
		}
	}
	function next() {
		if(!$('ul', thisGallery).is(':animated')) {
			opts.currentImage += 1;
			if(opts.currentImage < opts.totalImages) {
				imageLocation = opts.currentImage*opts.imageWidth;
			} else {
				imageLocation = 0;
				opts.currentImage = 0;
			}
			transition(opts.transitionType, imageLocation, opts.currentImage);
		}
	}
	function transition(transitionType, imageLocation, currentImage) {
		$('ul', thisGallery).stop(true, true).animate({marginLeft:-imageLocation}, opts.speed);
		imageLocation = imageLocation; // update imageLocation
		opts.currentImage = currentImage; // update currentImage
		if(opts.teasers != false) {
			$(opts.teasers).removeClass('active');
			$(opts.teasers).eq(currentImage).addClass('active');
		}
		if(opts.captionType.charAt(0) == '.') {
			$(opts.captionType).fadeOut();
			$(opts.captionType).eq(currentImage).fadeIn();
		}
		
		// custom rule
		currentLink = $('#teasers a').eq(currentImage).attr('href');
		$("a.#mask").attr('href', currentLink);

	}
	function pager() {
		i=0;
		var  pager = '<ul id="pager">';
			while(i <= opts.totalImages) { // build pager
				if(i == opts.currentImage) {
					var pager = pager + '<li class="active"><a href="#'+i+'">'+i+'</a><\/li>';
				} else {
					var pager = pager + '<li><a href="#'+i+'">'+i+'</a><\/li>';
				}
				i++;
			}
		var pager = pager+'<\/ul>';
		$(thisGallery).after(pager);
	}
}
})(jQuery);