// JavaScript Document

(function($) {
	// plugin code here, use $ as much as you like

	// Declare our class
	$.ProductPicsClass = function ( )
	{	// This is the handler for our constructor
		this.construct();
	};


// Extend jQuery elements for productPics
	$.fn.productPics = function ( options)
	{	
		
		// Init a el for ProductPics
		// Eg. $('#gallery').productPics();
		
		// If need be: Instantiate $.ProductPicsClass to $.ProductPics
		$.ProductPics = $.ProductPics || new $.ProductPicsClass();
		
		// Add a new image
		if (options == "addImage") {	
			$.ProductPics.addImage(arguments[1], arguments[2]);	
			$.ProductPics.setMainImg();
			return true;
		}

		
		// Establish options
		options = $.extend({text:"none"}, options);
		
			$.ProductPics.options = options;
		
		// Get group
		var el = $(this);
		el.empty();
		el.append('<div class="productPicsContainer"><div class="thumbsContainer"><ul class="sortableThumbs"></ul></div><div class="mainImgContainer"><img id="productPicsMainImg" src="" ><br><span class="caption"></span></div></div>');

		$.each(options.images, function(index) {
	
				var data = options.images[index];
				var id = data.id;
	
				
				$.ProductPics.images[id] = data;	// copy the image data into us so we can manipulate it later
				$.ProductPics.addImage(id, data);	// add the new image to the display	
			}
		);


		
		
		// Start?
		// Start
		// Get obj
		var obj = $(this);
		// Get rel
		// var rel = $(obj).attr('rel');
		// Init group
		
	
		$.ProductPics.el = el;

		$.ProductPics.setMainImg();
		
		// Assign some events
		$(".productPicsContainer #productPicsMainImg").bind('click',
					function (e) {
						
						$('.thumbsContainer a').each(function(index) {
							if (this.id == $.ProductPics.currThumbId) {
								$('.thumbsContainer a').lightbox({
									 'events'		:	false,
									 'start'		:	true,
									 'startIndex'	:	index
								});
							}
															  
						});
						
						
						return false;
												 
					}
				);
		
		
		// hide the thumbnails if there is only one
		var thumbnailCount = $.sum(
				$(".productPicsContainer .thumbsContainer a").map(
					function() {
						return 1
					}
				).get()
			);
		if (thumbnailCount <=1) {
			$(".productPicsContainer .thumbsContainer").hide();
		}
		
		// And chain
		return this;
	};
	
	
	
	
	// Define our class
	$.extend($.ProductPicsClass.prototype,
	{	// Our LightboxClass definition
		
		currThumbId: null,
		
		images: {},
	
		
		showSlideShow: function (e) {
			var startIndex = e.data.startIndex;																	
			$('.thumbsContainer a').lightbox({
											 'events':false,
											 'start':true,
											 'startIndex':startIndex});
			return false;
		},
		
		domReady: function () {
				// e.g. Include stylesheet
				$('head').append('<link rel="stylesheet" type="text/css" href="'+ this.files.css.productpics +'" media="screen" />');
		},
		
		setMainImg: function () {
			
			if (this.currThumbId && (this.images[this.currThumbId])) {
				$(".productPicsContainer #productPicsMainImg").attr('src', this.images[this.currThumbId].main);
				
				$(".productPicsContainer .caption").html(this.images[this.currThumbId].desc + " (Click to enlarge)");
				
				if (this.options.enableRemove) {
					$(".productPicsContainer .caption").append(' <a href="#" id="removeImageLink">Delete</a>');
					
					$(".productPicsContainer .caption #removeImageLink").bind("click", {'id':this.currThumbId},
							function (e) {
								// e.data.id = the id of the thumbnail image that we want to show
								$.ProductPics.removeImage(e.data.id);
								return false;
							})
				}
				
			} else {
				$(".productPicsContainer #productPicsMainImg").attr('src', "/images/unknown_product.jpg");
				$(".productPicsContainer .caption").html("");
			}
			
		},
		
		removeImage: function (id) {
				
								
			delete($.ProductPics.images[id]);	// remove the image data
			
			$(".productPicsContainer .thumbsContainer .sortableThumbs li:has(#" + id + ")").remove();	// delete the li tag containing the current thumbnail
			
			
			$.ProductPics.currThumbId = $(".productPicsContainer .thumbsContainer .sortableThumbs a:first").attr('id');
			
	
			$.ProductPics.setMainImg();
			
			
			if ($.ProductPics.options.removed)  $.ProductPics.options.removed(id);
			return false;
							
			
		},
		
		addImage: function(id, imageData) {
			
			if ($.ProductPics.currThumbId == null){	// if we don't have a picture to show, show this new one
				$.ProductPics.currThumbId = id;
			}
			
			$(".productPicsContainer .thumbsContainer .sortableThumbs").append(
				'<li><a href="' + imageData.large + '" title="' +imageData.desc + '" class="thumb" id="' + id + '"><img src="' + imageData.thumb + '"></a></li>'
			);
			
			$.ProductPics.images[id] = imageData;
			//this.options.images[id] = imageData;
			
			$(".productPicsContainer .thumbsContainer #" + id).bind('click',
							{'id':id},
							function (e) {
								// e.data.id = the id of the thumbnail image that we want to show
								$.ProductPics.currThumbId = e.data.id;
								$.ProductPics.setMainImg();
								return false;
							}
						);
			
			
	
		},

		
		files: {
			// If you are doing a repack using packer, then append .packed onto the js and css files before you pack it.
			js: {
				productpics:	'jquery.product-pics.js'
			},
			css: {
				productpics:	'jquery.product-pics.css'
			},
			images: {
				prev:		'images/prev.gif',
				next:		'images/next.gif',
				blank:		'images/blank.gif',
				loading:	'images/loading.gif'
			}
		},
		
		construct: function( )
			{	// Construct our Lightbox
				
				// Set baseurl
				// we should able to do this:
				// var baseUrl = $('script[src$='+this.files.js.productpics+']').attr('src');
				// i.e. find me the src of the <script> tage that has the src that ends with the name of this script.
				// but since we upgraded tp FF 3.5 it doens't work. not sure why....
				
				var me = this;
				
	
				$("script[src]").each(
					function(){
					
						if ($(this).attr("src").indexOf(me.files.js.productpics) != -1) {
							//console.log($(this).attr("src"));
							me.baseurl = $(this).attr("src"); 
						}
					}
				);
				
				//console.log("base url: " + this.baseurl);
				
			
				this.baseurl = this.baseurl.substring(0, this.baseurl.length-this.files.js.productpics.length);
				
				// Apply baseurl to files
				var me = this;
				$.each(this.files, function(group, val){
					$.each(this, function(file, val){
						me.files[group][file] = me.baseurl+val;
					});
				});
				
	
				// All good
				return true;
			}
		
	}); // We have finished extending/defining our ProductPicsClass
	
		// --------------------------------------------------
	// Finish up
	
	// On document load, Instantiate our class
	$(function() {
		// Instantiate
		$.ProductPics = $.ProductPics || new $.ProductPicsClass();
		
		// domReady
		$.ProductPics.domReady();
	});

})(jQuery);