$(document).ready(function() {
        
		var start             = 1;        //Set the number of drink to be active first (first = 0)
		var curImgWidth       = 210;      //Width of the active image
		var curImgHeight      = 280;      //Height of the active image
		
		var smImgWidth        = 135;      //Width of the non-active image
		var smImgHeight       = 180;      //Height of the non-active image
		var smImgTopPad       = 100;      //Height of the non-active image
		
		//Global Variables
		var $panel;                       //Set the variable for all the drinks array
		var $timer;                       //Set variable for the automated animation
		var $clickOnOff       = 1;        //Set click identifier to help with double-clicking
		var $curNum           = start;    //Sets the number of current active drink
		
		//Global Text
		var $viewDetailsTitle = 'View Details';
		var $closeTitle       = 'Close Details';
		var $prevTitle        = 'Previous';
		var $nextTitle        = 'Next';
		var $storeLink        = 'http://www.lcbo.com/lcbo-ear/lcbo/product/inventory/searchResults.do?language=EN&itemNumber=';
		var $storeTitle       = 'Find Stores';
		var $footerText       = 'Prices subject to change without notice. Prices include container deposit fees where applicable. All products may not be available in all stores. Please see store personnel for details.';
		
		var $priceURL         = 'http://www.lcbo.com/lcbo-ear/product/priceQuery.do?language=en&product=';
		
		$("#leftNav a").attr('title', $prevTitle);
		$("#rightNav a").attr('title', $nextTitle);
		
		//Load XML data and set up the initial display
		$.get("gifts.xml", {}, function(xml){
			
			drinkLength    = $('product', xml).length;
			
			var drinkList  = '<ul>';
			
			//loop thru each drink node in XML
			$('product', xml).each(function(x){
				
				var itemNumber = $(this).find("item_number").text();
				var img        = $(this).find("carouselImg").text();
				var drinkName  = $(this).find("name").text();
				
				imagePreload(img);
				
				drinkList  = drinkList + '<li><div class="drinkPanel" id="c_' + itemNumber + '"><div class="drink"><img src="../../images/carousel/' + itemNumber + '.jpg' + '" id="i_' + itemNumber + '" /><div class="drinkInfo"><h3>' + drinkName + '</h3><a href="#" title="' + $viewDetailsTitle + '" id="d_' + itemNumber + '">View Details</a></div></div></div></li>';
				
			});
			
			drinkList  = drinkList + '</ul>';
			
			$("#carouselImgs").append(drinkList).hide().fadeIn(1000);
			
			$("#carouselImgs").css("left", -(smImgWidth * (start - 1)));
			
			$panel = $("#carouselImgs ul > li");
			
			for(var i=0; i<$panel.length; i++){
			
				if ((i) != (start)){
					shrinkDrink($panel[i]);
				}else{
					growDrink($panel[i]);
				}
				
			}
			
			
			/*move he last list item before the first item. The purpose of this is 
			if the user clicks to slide left he will be able to see the last item.*/
			$('#carouselImgs ul li:first').before($('#carouselImgs ul li:last')); 
			
			
			//timer for automated animation
			timerSlide('go', $curNum);
			
			
			//function for when the Left Arrow is clicked
			$("#leftNav a").click(function(){
				
				if($clickOnOff == 1){
					
					$clickOnOff = 0;
					
					timerSlide('stop', $curNum);
					
					if($curNum > 0){
						
						var shrink = $curNum;
						var grow = $curNum - 1;
						$curNum = $curNum - 1;
					
					}else{
						
						var shrink = $curNum;
						var grow = $panel.length - 1;
						$curNum = ($panel.length - 1);
						
					}
					
					$($panel[shrink]).find("div.drinkInfo").fadeOut('fast',function(){
						shrinkDrink($panel[shrink]);
						growDrink($panel[grow]);
						slide('left');
					});
					
					timerSlide('go', $curNum);
				
				}

				return false;
			
			});
			
			
			//function for when the Right Arrow is clicked
			$("#rightNav a").click(function(){
				
				if($clickOnOff == 1){
					
					$clickOnOff = 0;
				
					timerSlide('stop', $curNum);
					
					if($curNum < ($panel.length - 1)){
					
						var shrink = $curNum;
						var grow = $curNum + 1;
						$curNum = $curNum + 1;
					
					}else{
						
						var shrink = $curNum;
						var grow = 0;
						$curNum = 0;
						
					}
					
					$($panel[shrink]).find("div.drinkInfo").fadeOut('fast',function(){
						shrinkDrink($panel[shrink]);
						growDrink($panel[grow]);
						slide('right');
					});
					
					timerSlide('go', $curNum);
					
				}

				return false;
			
			});
			


			//slide function  
			function slide(where){
				
				//get the item width
				var item_width = $('#carouselImgs ul li').outerWidth();
				
				if(where == 'left'){
					//...calculating the new left indent of the unordered list (ul) for left sliding
					var left_indent = parseInt($('#carouselImgs ul').css('left')) + item_width;
				}else{
					//...calculating the new left indent of the unordered list (ul) for right sliding
					var left_indent = parseInt($('#carouselImgs ul').css('left')) - item_width;
				
				}
				
				
				//make the sliding effect using jQuery's animate function... '
				$('#carouselImgs ul').animate({'left' : left_indent},500,function(){    
					
					if(where == 'left'){
						
						//...and if it slided to left we put the last item before the first item
						$('#carouselImgs ul li:first').before($('#carouselImgs ul li:last'));
					}else{
						//...and if it slided to right we put the first item after the last item
						$('#carouselImgs ul li:last').after($('#carouselImgs ul li:first')); 
					}
					
					//...and then just get back the default left indent
					$('#carouselImgs ul').css({'left' : '-135px'});
					
					$clickOnOff = 1;
					
				});
					   
			}
			
			
			//function for the View Details link
			$(".drinkInfo a").click(function(){
											 
				timerSlide('stop', $curNum);
				
				var dID = $(this).attr('id').substring(2, $(this).attr('id').length);
				
				$('product', xml).each(function(x){
					if($(this).find("item_number").text() == dID){
						var id = $(this).find("item_number").text();
						var name = 	$(this).find("name").text();
						var format = $(this).find("format").text();
						var notes = $(this).find("notes").text();
						var detailImg = $(this).find("detailImg").text();
						var price = $(this).find("price").text();
						
						detailPopUp(id, name, format, notes, detailImg, price, $curNum);
						
					}
				  });
			
				return false;
				
			});
			
			//makes the active clickable and when clicked display the popup
			function clickable(e){
				var f = $(e).find('img');							  
				f.bind("click", function(){
				  
				  timerSlide('stop', $curNum);
				  
				  var dID = f.attr('id').substring(2,f.attr('id').length);
				  
				  $('product', xml).each(function(x){
				  		if($(this).find("item_number").text() == dID){
							var id = $(this).find("item_number").text();
							var name = 	$(this).find("name").text();
							var format = $(this).find("format").text();
							var notes = $(this).find("notes").text();
							var detailImg = $(this).find("detailImg").text();
							var price = $(this).find("price").text();
							
							detailPopUp(id, name, format, notes, detailImg, price, $curNum);
							
						}
				  });
				  
				});

			
			};
			
			
			//function to build the popup and display it
			function detailPopUp(id, name, format, notes, detailImg, price, $curNum){
				
				imagePreload('detailBG.jpg', 'detailLogo.jpg', 'detailClose.jpg', 'detailClose-over.jpg', 'detailLeftButton.jpg', 'detailLeftButton-over.jpg', 'detailRightButton.jpg', 'detailRightButton-over.jpg', 'findStoreButton.jpg', 'findStoreButton-over.jpg', detailImg);
				
				//price = getPrice(id);
				
				var popUp = '<div id="detailWrapper"><div id="detailContent"><div id="closeButton"><a href="#" title="' + $closeTitle + '"></a></div><div id="detailNav"><div id="detailLeftNav"><a href="#" title="' + $prevTitle + '"></a></div><div id="detailRightNav"><a href="#" title="' + $nextTitle + '"></a></div><div class="clear"></div></div><div id="detailInfo"><img src="../../images/detail/' + id + '.jpg' + '" class="detailImg" /><div id="drinkInfoBox"><h3>' + name + '</h3><h4>LCBO ' + id + ' | ' + format + '</h4><p>' + notes + '</p><h5>' + price + '</h5><a target="_top" href="' + $storeLink + id + '" title="' + $storeTitle + '"></a><div class="clear"></div></div></div><div id="footerText">' + $footerText + '</div></div></div>';
				
				$(popUp).hide().appendTo("#mainContainer").fadeIn('slow');

				
				//popup close button
				$("#closeButton a").click(function(){
			
					$("#detailWrapper").fadeOut('slow', function(){
						$("#detailWrapper").remove();											 
					});
					
					timerSlide('go', $curNum);
					return false;
				
				});
				
				
				//popup left arrow
				$("#detailLeftNav a").click(function(){
					
					if($clickOnOff == 1){
					
						$clickOnOff = 0;
					
						if ($curNum != 0){
							var prev = $curNum - 1;
						}else{
							prev = $panel.length - 1;	
						}
						
						prevImg = $($panel[prev]).find("img").attr("id");
						prevID = prevImg.substring(2, prevImg.length);
						
						$('product', xml).each(function(x){
							if($(this).find("item_number").text() == prevID){
								var id = $(this).find("item_number").text();
								var name = 	$(this).find("name").text();
								var format = $(this).find("format").text();
								var notes = $(this).find("notes").text();
								var detailImg = $(this).find("detailImg").text();
								var price = $(this).find("price").text();
								
								imagePreload(detailImg);
								
								//price = getPrice(id);
								
								var prevInfo = '<img src="../../images/detail/' + id + '.jpg' + '" class="detailImg" /><div id="drinkInfoBox"><h3>' + name + '</h3><h4>LCBO ' + id + ' | ' + format + '</h4><p>' + notes + '</p><h5>' + price + '</h5><a target="_top" href="' + $storeLink + id + '"><img src="../../images/findStoreButton.jpg" title="' + $storeTitle + '" border="0" /></a></div>';
								
								$("#detailInfo").html(prevInfo).hide().fadeIn('slow');
								
							}
						});
						
						
							
						if($curNum > 0){
							
							var shrink = $curNum;
							var grow = $curNum - 1;
							$curNum = $curNum - 1;
						
						}else{
							
							var shrink = $curNum;
							var grow = $panel.length - 1;
							$curNum = ($panel.length - 1);
							
						}
						
						$($panel[shrink]).find("div.drinkInfo").fadeOut('fast',function(){
							shrinkDrink($panel[shrink]);
							growDrink($panel[grow]);
							slide('left');
						});
						
					}

					return false;

				});
				
				
				
				//popup right arrow
				$("#detailRightNav a").click(function(){
					
					if($clickOnOff == 1){
					
						$clickOnOff = 0;
					
						if ($curNum != ($panel.length - 1)){
							var next = $curNum + 1;
						}else{
							next = 0;	
						}
						
						nextImg = $($panel[next]).find("img").attr("id");
						nextID = nextImg.substring(2, nextImg.length);
						
						$('product', xml).each(function(x){
													   
							if($(this).find("item_number").text() == nextID){
								var id = $(this).find("item_number").text();
								var name = 	$(this).find("name").text();
								var format = $(this).find("format").text();
								var notes = $(this).find("notes").text();
								var detailImg = $(this).find("detailImg").text();
								var price = $(this).find("price").text();
								
								imagePreload(detailImg);
								
								//price = getPrice(id);
								
								var nextInfo = '<img src="../../images/detail/' + id + '.jpg' + '" class="detailImg" /><div id="drinkInfoBox"><h3>' + name + '</h3><h4>LCBO ' + id + ' | ' + format + '</h4><p>' + notes + '</p><h5>' + price + '</h5><a target="_top" href="' + $storeLink + id + '"><img src="../../images/findStoreButton.jpg" border="0" title="' + $storeTitle + '" /></a></div>';
								
								$("#detailInfo").html(nextInfo).hide().fadeIn('slow');
								
							}
							
						});
						
						
							
						if($curNum < ($panel.length - 1)){
					
							var shrink = $curNum;
							var grow = $curNum + 1;
							$curNum = $curNum + 1;
						
						}else{
							
							var shrink = $curNum;
							var grow = 0;
							$curNum = 0;
							
						}
						
						$($panel[shrink]).find("div.drinkInfo").fadeOut('fast',function(){
							shrinkDrink($panel[shrink]);
							growDrink($panel[grow]);
							slide('right');
						});
						
					}
					
					return false;

				});
				
				
			}
			
			
			
			//function to animate the size of the active drink to the non-active state
			function shrinkDrink(e){
				
				$(e).find("div.drinkInfo").fadeOut(10);
				$(e).animate({paddingTop: smImgTopPad, width: smImgWidth})
					.find("img").animate({width: smImgWidth, opacity: '0.5'});
					
				if($(e).find("img").hasClass('clickable')){
					$(e).find("img").removeClass('clickable').removeAttr('title', $viewDetailsTitle);
					$(e).find("img").unbind('click');
				}
				
			}
			
			
			//function to animate the non-active drink to the active state
			function growDrink(e){

				$(e).animate({paddingTop: '0', width: curImgWidth})
					.find("img").animate({width: curImgWidth, opacity: '1.0'},function(){
					$(e).find("div.drinkInfo").fadeIn('fast');																   
				});
					
				$(e).find("img").addClass('clickable').attr('title', $viewDetailsTitle);
				clickable(e);
				
			}
			
			//Function to run the auto scroll
			function timerSlide(e, curNum){
				$curNum = curNum;
				if(e == 'go'){
					
					$timer = setInterval(function(){
					
						if($curNum < ($panel.length - 1)){
						
							var shrink = $curNum;
							var grow = $curNum + 1;
							$curNum = $curNum + 1;
						
						}else{
							
							var shrink = $curNum;
							var grow = 0;
							$curNum = 0;
							
						}
						
						$($panel[shrink]).find("div.drinkInfo").fadeOut('fast',function(){
							shrinkDrink($panel[shrink]);
							growDrink($panel[grow]);
							slide('right');
						});
		
					}, 5000);
					
				}else{
					clearInterval($timer);
					$timer = null;
				}
				
				return false;
				
			}
			
			//Function to preload images
			function imagePreload(){
				
				for(var i = 0; i<arguments.length; i++){
					$("<img>").attr("src", 'images/' + arguments[i]);
				}
				
			}
			
			//Function to gram the price from the LCBO query and send it back
			function getPrice(id){
				var htmlRes = $.ajax({
				type: "GET",
				url: $priceURL + id,
				async: false
				}).responseText;
				var price = htmlRes.substring(2);
				return price;
			}
			
		});
        
        
  });