/*
 * jQuery Gallery Script v1.0
 * http://www.emarketed.com/
 *
 * Copyright (c) 2010 emarketed.
 *
 *
 * 
 *
 * PARAMETERS:
 * 	(string) url - the URL to the page that returns a JSON array containing all the photos.
 *  (string) rootDir - the rootDir of the images.
 *  (int) width - a number in pixels of the width of the gallery.
 *  (int) imageWidth - the main photo image width in pixels.
 *  (int) imageHeight - the main photo image height in pixels.
 *  (int) thumbs - the number of thumbnails to show in the slider.
 *  (string) speed - set the thumbnail slider speed to: "normal", "slow", or "fast".
 *  (string) easing - set the thumbnail slider transition effect to: "linear", or "swing".

 * NOTE: getJSON.php should return a JSON object with the following elements:
 *  - title
 *  - fullUrl
 *  - thumbUrl
 *
 *
 *
 *
 *
 *
 *
 */
 
(function($) {

	//FUNCTIONS
	function scrollSlider(imageSelector,newPos,speed,easing) {
		imageSelector.animate({scrollLeft: newPos},speed,easing);
	}

	$.fn.gallery = function(options) {
		//DEFAULT SETTINGS
		var settings = $.extend({
			url : '',
			rootDir : '',
			width : 600,
			imageWidth : 490,
			imageHeight: 330,
			thumbs : 7,
			speed : 'normal',
			easing : 'swing'
		},options);

		//PROPERTIES
		var originalHTML = '';
		var mainDivId = '';
		var leftArrowImage = '/tpl/js/gallery/left-arrow.jpg';
		var rightArrowImage = '/tpl/js/gallery/right-arrow.jpg';
		var currPhoto = {
			title : '',
			url : ''
		};
		var photoSize = Math.ceil(settings.width-20);
		var thumbSize = Math.ceil((settings.width-40)/settings.thumbs);
		var sliderWidth = 0;
		var imageNavigationHeight = 50;
		var allPhotos = new Array();

		//START CONSTRUCT
		return this.each(function() {
			obj = $(this);
			originalHTML = obj.html();
			obj.html("");
			mainDivId = obj.attr('id');
			obj.css('width',settings.width + 'px');
			$.getJSON(settings.url,function(data) {
				$.each(data, function(i,image) {
					if(i==0) { //if it's first image, set as default
						currPhoto = {
							title : image.title,
							fullUrl : image.fullUrl,
							thumbUrl : image.thumbUrl
						}
					}
					allPhotos.push({
						title : image.title,
						fullUrl : image.fullUrl,
						thumbUrl : image.thumbUrl
					});
				});
				sliderWidth = thumbSize * allPhotos.length;
				if(allPhotos.length==0) { obj.html(originalHTML); }
				else {
					var imagePhoto = $("<div />")
									.attr('id',mainDivId + '-image-photo')
									.css({
										 'text-align' : 'center',
										 'margin-bottom' : '10px',
										 'height' : settings.imageHeight + 'px'
									})
									//.append('<img src="' + settings.rootDir + currPhoto['fullUrl'] + '" width="' + imageDimensions.width + '" height="' + imageDimensions.height + '" alt="' + currPhoto['title'] + '" />')
									.appendTo(obj);
					var firstPhoto = new Image();
					$(firstPhoto)
						.attr('alt',currPhoto['title'])
						.attr('src',settings.rootDir + currPhoto['fullUrl'])
						.css('display','inline')
						.load(function() {
							$(this).hide();
							var imageDimensions = {
								width : firstPhoto.width,
								height : firstPhoto.height
							};
							if(imageDimensions.width>settings.imageWidth) {
								imageDimensions.height = Math.ceil((imageDimensions.height*settings.imageWidth)/imageDimensions.width);
								imageDimensions.width = settings.imageWidth;
							}
							if(imageDimensions.height>settings.imageHeight) {
								imageDimensions.width = Math.ceil((imageDimensions.width*settings.imageHeight)/imageDimensions.height);
								imageDimensions.height = settings.imageHeight;
							}
							imagePhoto.html(firstPhoto);
							$(this)
								.attr('width',imageDimensions.width)
								.attr('height',imageDimensions.height)
								.fadeIn();
						});
					var imageTitle = $("<div />")
									.attr('id',mainDivId + '-image-title')
									.css({
										 'text-align' : 'center',
										 'height' : '15px',
										 'margin-bottom' : '30px'
									})
									.html(currPhoto['title'])
									.appendTo(obj);
					var imageNavigation = $("<div />")
									.attr('id',mainDivId + '-image-navigation')
									.css({
										 'height' : imageNavigationHeight + 'px',
										 'overflow' : 'hidden'
									})
									.appendTo(obj);
					var leftArrow = $("<div />")
									.attr('id',mainDivId + '-left-arrow')
									.css({
										 'float' : 'left',
										 'width' : '15px',
										 'padding-top' : '18px'
									})
									.click(
										   function() {
											   newPos = imageSelector.scrollLeft() - (settings.width-40);
											   scrollSlider(imageSelector,newPos,settings.speed,settings.easing);
											   return false;
										   }
									)
									.append('<a href="#"><img src="' + leftArrowImage + '" alt="Previous" /></a>')
									.appendTo(imageNavigation);
					var imageSelector = $("<div />")
									.attr('id',mainDivId + '-selector')
									.css({
										 'float' : 'left',
										 'width' : (settings.width-40) + 'px', //arrow div width and margin left/right
										 'height' : imageNavigationHeight + 'px',
										 'position' : 'relative',
										 'overflow' : 'hidden',
										 'margin-left' : '5px',
										 'margin-right' : '5px'
									})
									.appendTo(imageNavigation);
					var rightArrow = $("<div />")
									.attr('id',mainDivId + '-right-arrow')
									.css({
										 'float' : 'left',
										 'width' : '15px',
										 'padding-top' : '18px'
									})
									.click(
										   function() {
											   newPos = imageSelector.scrollLeft() + (settings.width-40);
											   scrollSlider(imageSelector,newPos,settings.speed,settings.easing);
											   return false;
										   }
									)
									.append('<a href="#"><img src="' + rightArrowImage + '" alt="Next" /></a>')
									.appendTo(imageNavigation);
					var imageSlider = $("<div />")
									.attr('id',mainDivId + '-slider')
									.css({
										 'width' : sliderWidth + 'px',
										 'height' : imageNavigationHeight + 'px',
										 'margin' : '0px'
									})
									.appendTo(imageSelector);
					$.each(allPhotos, function(i, photo) {
						var newImage = $("<div />")
										.css({
											 'float' : 'left',
											 'width' : thumbSize-10 + 'px',
											 'height' : imageNavigationHeight + 'px',
											 'margin-left' : '5px',
											 'margin-right' : '5px',
											 'opacity' : '0.5'
										})
										.click(function() {
											var fullPhoto = new Image();
											$(fullPhoto)
												.attr('alt',photo['title'])
												.attr('src',settings.rootDir + photo['fullUrl'])
												.css('display','inline')
												.load(function() {
													$(this).hide();
													var imageDimensions = {
														width : fullPhoto.width,
														height : fullPhoto.height
													};
													if(imageDimensions.width>settings.imageWidth) {
														imageDimensions.height = Math.ceil((imageDimensions.height*settings.imageWidth)/imageDimensions.width);
														imageDimensions.width = settings.imageWidth;
													}
													if(imageDimensions.height>settings.imageHeight) {
														imageDimensions.width = Math.ceil((imageDimensions.width*settings.imageHeight)/imageDimensions.height);
														imageDimensions.height = settings.imageHeight;
													}
													imagePhoto.html(this);
													$(this)
														.attr('width',imageDimensions.width)
														.attr('height',imageDimensions.height)
														.fadeIn();
												});
											imageTitle.html(photo['title']);
											return false;
										})
										.append('<a href="#"><img src="' + settings.rootDir + photo['thumbUrl'] + '" width="' + (thumbSize-10) + '" height="50" alt="' + photo['title'] + '" /></a>')
										.appendTo(imageSlider);
						newImage.hover(function() {
											newImage.css('opacity','1.0')
									   },
									   function() {
									   		newImage.css('opacity','0.5')
									   }
						);
					});
					obj.css('height',(settings.imageHeight + 55 + imageNavigationHeight) + 'px');
				}
			});
		});
	};

}) (jQuery);