// JavaScript Document

/*
The horizontal slider does not natively know how to change the style
of the objects that are NOT clicked, only the one that is clicked. We
need to change the background image for objects that slide.

Basically we find the x-coordinate of all of the LI objects and if 
it is greater than some value, we assign a class which shifts the 
background image. If is less than the value, we remove the class.

A setTimeout needs to be used as the generic function that calls this
function executes immediately, NOT after the animation completes. Were
we to run this function immediately, the x-coordinate would never
evaluate to greater than 320.

320 is used as it is the left cooridinate of the Home LI when active.
If any slide has a left greater than 320, it must the be on the right
side of the page.
*/

var intervalID;
function changeClass() {
	liArray = document.getElementById('accordion').getElementsByTagName('li');
	for(i=0;i<liArray.length;i++) {
		if(parseInt(liArray[i].style.left)>320) {
			$(liArray[i]).addClass("right");
		} else {
			$(liArray[i]).removeClass("right");
		}
	}
	if(!intervalID) {
		intervalID = setTimeout("changeClass()",1);
  } else {
		clearTimeout(intervalID);
		intervalID = null;
	}
}


$(document).ready(function() {
  
	/* 
	   HISTORY AND SETTING BOOKMARKS / FAVORITES
	
	   Since all main pages of the site are contained within the navigation and the navigation
	   by default is to show the Home page, we need a way to show users alternate pages if they 
		 are sent to the site via a link or accessing via a bookmark.
		 
		 As it happens, the ID's used for each slide/LI is the same as the file name of the page. This
		 was not planned but sure is exemplary of why naming convestion be obvious and consistent.
		 This coicidence affords us the opportunity to get the URL the user used to get to the site
		 and use that URL to set a class to the LI of the same name!
		 
		 The hSlides plugin / function looks for the LI with the class of "active" and sets that
		 as the LI to display upon load. By setting this class BEFORE the hSlide function is called
		 we can show the page the user intened to see.
		 
		 First get the file name of the page by slicing the URL hash.
		 
		 Next, we find all LI's in the navigation and remove the class of "active" (which is assigned
		 to the home page by default). We then assign the "active" class to the LI that shares the file
		 name of the page.
		 
		 Lastly, we call the changeClass function to update the navigation to reflect the proper background
		 image for those navigation items that are on the right-hand side of the page.
	*/

	var hashStr = window.location.hash.slice(1, -4);
	var liArray = document.getElementById('accordion').getElementsByTagName('li');
	for(i=0;i<liArray.length;i++) {
		$(liArray[i]).removeClass("active");
	}
	if (hashStr) {
		$("#"+hashStr).addClass("active");
	} 
	
	changeClass();

  // get rid of dotted lines on click of links
	$("a").click(function() {
	  this.blur();
	});

  /* 
	
	   CHANGE NAVIGATION BACKGROUND IMAGE
		 
		 Initiate "callback" after navigation sliding starts
				 
 		 The horizontal slider does not natively know how to change the style
	 	 of the objects that are NOT clicked, only the one that is clicked. We
		 need to change the background image for objects that slide.
		 
		 We will do this be finding the index value of the LI clicked. We then
		 determine if that LI is located on the right or left of page. If it is
		 on the right, we remove the class of "right" from all LI's to its left
		 and from itself. If it is on the left, we add the class of "right" to 
		 the LI's to its right and to itself.
		 
		 This function and changeClass() do roughly the same thing, however, 
		 the following function creates a more aesthetically pleasing experience.
		 Keep in mind, upon click of the LI we shift the background image.
		 Since this function will initiate the image shift and the animation at about
		 the same time, the user may not see the image shifting. If we used
		 the changeClass() function, the shift happens after the animation and
		 is very noticable. Not the polished and fluid look I wanted.
		 
  */
  enterFunction = function(){
			/*if ($(".imgHolder")) {
				$(".imgHolder").remove();
			}*/
    liIndex = $("li.nav").index(this);
		if ($(this).hasClass("right")) {
  		if ($("li.nav:lt("+liIndex+")")) {
		    $("li.nav:lt("+liIndex+")").removeClass("right");
			}
			$(this).removeClass("right");
		} else {
			if ($("li.nav:gt("+liIndex+")")) {
		    $("li.nav:gt("+liIndex+")").addClass("right");
		  }
		}
	}
	
  // call and pass parameters for horizontal slider
	$('.jq_accordion').hSlides({
		totalWidth: 1000, 
		totalHeight: 600, 
		minPanelWidth: 80, 
		maxPanelWidth: 680,
		speed: 1000,
		easing: 'easeOutExpo',
		activeClass: 'active',
		onEnter: enterFunction/*,
		onLeave: leaveFunction*/
	});
	
	// scrolling text / updates on home page
	$(function() {
	  $(".vertical").jCarouselLite({
			auto: 15000,
			speed: 1000,
			visible: 1,
			start: 0,
			vertical: true,
			btnGo:
			[".vertical .a_1", 
			 ".vertical .a_2",
			 ".vertical .a_3", 
			 ".vertical .a_4",
			 ".vertical .a_5"],
			afterEnd: function(a) {
        //alert("After animation ends:" + a);
      }
  	});
  });
	
	var animationTime = 600;
  function showWaiter(obj) {
		$.ajax({
						  type: "GET",
		          url: "product/get_products.php5",
							data: obj.attr("href").substr(obj.attr("href").indexOf("?")+1),
							dataType: "html",
							error: function (html) {
								alert("Error loading product data. Please try again.");
							},
							success: function(html) {
								$("#waiter").fadeOut(animationTime);
								$("#product_list_holder").empty();
		            $("#product_list_holder").append(html).fadeIn(animationTime);
								if("#products.active") {
									return init_overlay();
								}
			        }
						});
	}
	/* Products page, fade out categories, add in product list UL */
	$("#sub_nav a, #categories a, #products #product_list_holder a").live("click", function() {
		if($("#categories").css("display")!="none") {
			$("#waiter").fadeIn(animationTime);
			$("#categories").css("position","absolute").fadeOut( animationTime, showWaiter( $(this) ) );
		} else {
			$("#waiter").fadeIn(animationTime);
			$("#product_list_holder").fadeOut( animationTime, showWaiter( $(this) ) );
		}
		// keep <a> from being called by browser when real URL's (product/get_products.php5?category=2) are used.
		return false;
	});
	
// THE MODAL (http://www.babylon-design.com/share/popin/)
// The modal needs to be initialized upon each AJAX load that contains a link that will
// reference the modal. Links with the attribute/value pair of class/popin_ajax need initialize after
// the link has been written into the DOM. 
// Since these links are loaded dynamically via AJAX, we wrap the overlay function in a function
// and call that function when needed.

  var default_w = 600;
  var default_h = 440;
  function init_overlay () {
	  $("a.popin_ajax").popin({
			width:default_w,
			height:default_h,
			className: "mypopin2",
			loaderImg : host+'/i/ajax_loader.gif',
			opacity: .8
		});
	}
	init_overlay();
// initialize for all static links	
	$("a.popin_static").popin({
		width:default_w,
		height:default_h,
		className: "mypopin2",
		loaderImg : host+'/i/ajax_loader.gif',
		opacity: .8
	});// initialize for add_edit links	(static)
	$("a.popin_add_edit").popin({
		width:640,
		height:600,
		className: "mypopin2 add_edit",
		loaderImg : host+'/i/ajax_loader.gif',
		opacity: .8,
		onStart: function() {return},
		onComplete: function() {return},
		// datepicker creates a new instance of the datepicker object each time the script is called
		// remove those instances when we don't need them
		onExit: function() {
			$("div.datepicker").remove();
		}
	});


});