/*
 * 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',
			leftArrow : '',
			rightArrow : '',
			playButton : '',
			pauseButton : '',
			autoPlay : false,
			autoPlayDelay : 5000
		},options);

		//PROPERTIES
		var originalHTML = '';
		var mainDivId = '';
		var leftArrowImage = settings.leftArrow;
		var rightArrowImage = settings.rightArrow;
		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 currentPhotoIndex = 0;
		var allPhotos = new Array();
		var autoPlayStatus = false;

		//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 { //photos.length exists
					var imageTop = $("<div />")
									.attr('id',mainDivId + '-image-top')
									.css({
										 'clear' : 'both',
										 'height' : settings.imageHeight + 'px',
										 'overflow' : 'hidden',
										 'margin-bottom' : '15px'
									})
									.appendTo(obj);
					var playPauseImage = $("<img />")
						.attr('id',mainDivId + '-play-pause')
						.css({
							'display' : 'block',
							'width' : settings.imageWidth,
							'height' : settings.imageHeight,
							'position' : 'absolute',
							'padding-left' : Math.ceil((settings.width-settings.imageWidth)/2)+'px',
							'padding-right' : Math.ceil((settings.width-settings.imageWidth)/2)+'px',
							'z-index' : '2'
						});
					var imagePhoto = $("<div />")
									.attr('id',mainDivId + '-image-photo')
									.css({
										 'text-align' : 'center',
										 'margin-bottom' : '10px',
										 'height' : settings.imageHeight + 'px'
									})
									.mouseover(function() {
										var thisPhotoDiv = $(this);
										playPauseImage
											.css('cursor','pointer')
											.attr('src',(autoPlayStatus) ? settings.pauseButton : settings.playButton)
											.mouseout(function() {
												$(this)
													.css('cursor','default')
													.remove();
											})
											.click(function() {
												if(autoPlayStatus) {
													playPauseImage.attr('src',settings.playButton);
													$(imageSelector).stopTime('autoPlayControl');
													autoPlayStatus = false;
												}
												else {
													$(imageSelector).everyTime(settings.autoPlayDelay,'autoPlayControl',function() {
													if(currentPhotoIndex==allPhotos.length-1) { currentPhotoIndex = 0; }
													else { currentPhotoIndex++; }
													photo = allPhotos[currentPhotoIndex];						
													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']);
													if(currentPhotoIndex+(settings.thumbs)<=allPhotos.length) {
														var newPos = (currentPhotoIndex) * (thumbSize);
														scrollSlider($(this),newPos,settings.speed,settings.easing);
													}
												});
												autoPlayStatus = true;
												}
											})
											.prependTo(imageTop);
									})
									.appendTo(imageTop);
					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() {
											currentPhotoIndex = i;
											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')
									   }
						);
					}); //$.each(allPhotos)
					obj.css('height',(settings.imageHeight + 70 + imageNavigationHeight) + 'px');
				} //else photos.length exists
				if(settings.autoPlay) {
					$(imageSelector).everyTime(settings.autoPlayDelay,'autoPlayControl',function() {
						if(currentPhotoIndex==allPhotos.length-1) { currentPhotoIndex = 0; }
						else { currentPhotoIndex++; }
						photo = allPhotos[currentPhotoIndex];						
						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']);
						if(currentPhotoIndex+(settings.thumbs)<=allPhotos.length) {
							var newPos = (currentPhotoIndex) * (thumbSize);
							scrollSlider($(this),newPos,settings.speed,settings.easing);
						}
					});
					autoPlayStatus = true;
				}
			}); //$.getJSON(settings.url)
		}); //return this.each()
	};

}) (jQuery);