// Catalogue
var $scrollerTarget = $('#scroller');
var activeEnlargement = false;
var dataSource = "data.js";

/*Zoom Image Dimensions*/
var zoomSmallImageWidth = 353;
var zoomSmallImageHeight = 500;
var zoomLargeImageWidth = 706;
var zoomLargeImageHeight = 1000;

var catalogue =  {
	
	//set up the page
	init: function() {
		$('#scroller').jScrollPane({
								   animateTo:true,
								   showArrows:true
		});
		//add preloader and hide it
		$('#page_viewer').append('<span id="load"></span>');
		$('#load').hide();
		
		var last_index = imagePath.length;
		var cat = imagePath.substring(4,last_index)
		
		//load the first page
		catalogue.update("1",null,null,false);
		//load page on click
		$('#scroller li a').bind("click", function(){
			//get the id of the button clicked
			var id = $(this).parent().attr('id');
			var seperatorPos = id.indexOf("_")+1;
			var idIndex = id.substr(seperatorPos);
			var pageName = $(this).attr("title");
			pageName = pageName.replace(/\s/g, "");
			pageName = pageName.toLowerCase(); 
			_gaq.push(['_trackPageview', cat+pageName])
			catalogue.update(idIndex,null,null,false);
			return false;
		});		
		
		$("form").submit( function() {
				if (!activeEnlargement) {
					var productID = $("input[name=\"ProductID\"]").val();
					catalogue.submit(productID);
					//$("button[type=submit]").attr("disabled", true);
				}
				return false;
		} );		
	},
	
	//Zoom into image and show text
	enLargeImage: function(imageID, text) {
		
			if (!text) {
				text = "No information available.";
			} else {
				text = text;
			}
			
			activeEnlargement = true;
			
			//used only for search to highlight image when page is loaded in
			if (imageID != null) {
				var targetThumb =  "#"+imageID;				
				$("ul.image_map li a").removeClass("active");
				$(targetThumb).addClass("active");
			}	
			
			//create overlays to dimm background
			var background = $('<div/>');
			$(background).attr('id', 'overlayBackground').css( {
				'opacity' : 0.8
			});
			$('body').append(background);
			background.hide();
			
			//create containing div
			var width = $('body').width();
			var productContainer = $('<div/>');
			$(productContainer).attr('id', 'product_holder').css({
				'left' : width/2 - 291
			});

			var productInner = $('<div/>');
			$(productInner).attr('id', 'product_holder_inner');

			//create zoom image area
			var zoom_container = $('<div/>');
			$(zoom_container).attr({
				'id': "zoom"
			})
			
			//create zoom mask
			var zoomMask = $('<div/>');
			$(zoomMask).attr({
				'id': "zoom_mask",
				'class': "minizoompan"
			})
			$(zoom_container).append(zoomMask);
			
			var zoom_loader = $('<span/>');
			$(zoom_loader).attr({
				'class': "loader"
			})
			$(zoom_container).append(zoom_loader);
			
			
			var imageMapID = $('.image_map').attr("id");
			var imageMapIDPos = imageMapID.indexOf("_")+1;
			var imageMapIDIndex = imageMapID.substr(imageMapIDPos)

			//create image
			var imgSrc = imagePath+imageMapIDIndex+"/"+imageID;
			var zoomImage = $('<img/>');
			var zoomImageSrc = imgSrc+"_s.jpg";
			$(zoomImage).attr({
				'src':zoomImageSrc
			});
			$(zoomMask).append(zoomImage);
			
			//zoom function
			var ig = zoomMask.children();	
			ig.css({position: "relative"});
			zoomMask.mousemove(function(e){
				var divWidth = zoomSmallImageWidth;
				var divHeight = zoomSmallImageHeight;
				var igW = ig.width();
				var igH = ig.height();
				var dOs = zoomMask.offset();
				var x = e.pageX;
				var divLeft = dOs.left;
				var leftPan = (e.pageX - dOs.left) * (divWidth - igW)/(divWidth);
				var topPan = (e.pageY - dOs.top) * (divHeight - igH)/(divHeight);
				ig.css({left: leftPan, top: topPan});			
			});    
			
			//swap image from small to big
			zoomMask.hover(
				function () {
					zoomImage.css({ width: zoomLargeImageWidth, height: zoomLargeImageHeight});
					var hiSrc = zoomImage.attr("src").replace(/s.jpg/, 'l.jpg');
					swapImage(zoomImage, hiSrc);
					$("#zoom span.loader").fadeIn(250);
				},
				function () {
					zoomImage.css({left: "0", top: "0", width: zoomSmallImageWidth, height: zoomSmallImageHeight});
					var loSrc = zoomImage.attr("src").replace(/l.jpg/, 's.jpg');
					swapImage(zoomImage, loSrc);
					$("#zoom span.loader").fadeOut(250);
				}
			);
			function swapImage(param, uri){
				param.load(function () {
					$("#zoom span.loader").fadeOut(250);
				}).error(function (){
					alert("Image does not exist or its SRC is not correct.");
				}).attr('src', uri);
			}			
			
			//create text bubble if no text is found do the following
	
			var bubble = $('<div/>');
			$(bubble).attr('id', 'infoBubble');		
			$(bubble).append(text);
			
			//create the close button
			var closeHref = $('<a/>');
			$(closeHref).attr({
				'id': 'closeButton',
				'title': 'Close',
				'href': '#'
			}).click(function(){ 			
				activeEnlargement = false;
				productContainer.remove();
				$('div#overlayBackground').remove();
				return false; 
			});
			var closeSpan = $('<span/>');
			var closeText = "Close";
			$(closeSpan).append(closeText);
			$(closeHref).append(closeSpan);
			


			//Add Elements to body
			$(productContainer).append(closeHref);
			$(productInner).append(zoom_container);
			$(productInner).append(bubble);
			$(productContainer).append(productInner);
			$('body').append(productContainer);
			productContainer.hide();
			
			//show newly created elements
			background.fadeIn(250);
						
			productContainer.animate({"opacity": 1.0}, 250)
			.fadeIn(200)
			
			
	},
	
	
	//load in external page
	update: function(page, image, txt, search) {
		
		//grab url of id
		var targetThumb = $("#thumb_"+page).find('a');
		var url = targetThumb.attr("href");
		
	
		if (!targetThumb.hasClass('active') && url) {
									   
			//restart loader and buttons
			$('#load').hide();
			$('#scroller li a').removeClass("active");
			
			//grab the content from external page and load
			var toLoad = url+' #image_holder';
			$('#canvas').animate({opacity:0}, 500)
			.animate({opacity:0},0, 
				function() {
					$('#canvas').load(toLoad,'',
						function() {
							$('#canvas').animate({"marginLeft": 0, opacity: 1.0},500, hideLoader());
							
						}
					)
				}
			)
			
			//add active to clicked button
			var scrollToID = '#'+targetThumb;
			//$scrollerTarget.scrollTo(scrollToID);
			targetThumb.addClass("active");
			
			//show loader
			$('#load').fadeIn(250);
				
	
			
			//hide loader and run the enlarge image function
			function hideLoader() {
				$('#load').animate({"opacity": 1.0}, 250).fadeOut(250, 
					function() { 
						//set enlarge image and text for search
						if(search && !activeEnlargement ) {
							var text = $('#txt_'+txt).html();
							//alert("text id: "+txt+", text:"+text);
							catalogue.enLargeImage(image, text);
							
						}
						//Hover Javascript for IE
						hover = function() {
							$("ul.image_map li a").hover( 
								function() {
									$(this).addClass('active');								 
								},
								function() {
									$(this).removeClass('active');								 
								}
							)
						}
						
						//set enlarge image and text for on click function
							$('#image_holder li a')
							.bind("click", function(){ 
																		
								var imageID = $(this).attr("id"); 
								var text = $(this).html(); 
								catalogue.enLargeImage(imageID, text);
	
							 return false;
							 })
							
							//disable keypress on enter
							.bind("keypress", function(e) { 
							  if (e.which == 13) { 
								return false; 
							  } 
							}); 						
						
						
					}
				);
			}
			
		} else if(search && !activeEnlargement) {
			var text = $('#text_'+txt).html(); 
			catalogue.enLargeImage(image, text);	
		} 
	},
	
	
	//search for product id
	submit: function(productID) {
		
		
		//get product id based off search value
		$.getJSON(dataSource, function(data) {
				
				//get total products
				var products = data.products 
				var totalProducts = products.length; 
				
				//reset product id's not found
				var error = 0;

				$.each(products, function(i,product){
					
					var jsonProductID = product.id;
					
					//if product id matches in json send to update function
					if (jsonProductID == productID) {
						var page = product.page;
						var image = product.image;
						var text = product.text;
						
						catalogue.update(page,image,text, true)
						return false;
					} else {
						//if product id does not match add to error list
						error++;
					}
					
				 });
				//if no match then do something
				if (error == totalProducts){
					alert("not found");
				}
		});
	}
	
}

var clearField = function() {
	$("input")
	.focus(function() {
	if( this.value == this.defaultValue ) {
		this.value = "";
	}
	})
	.blur(function() {
	if( !this.value.length ) {
		this.value = this.defaultValue;
	}
	});
}


$(document).ready( function() {
	catalogue.init();
	clearField();
})