// JavaScript Document
// Name:		LHN Flyout Menus
// Author:		Tom Belknap
// Description:	Provides rollover panels for LHN menus which do not sink
//				below the fold when they appear.
// Version:		0.1

// Some global values
window.t = new Object;
window.currentFlyout	= '';
window.currentMenu		= '';

/*
// pos:				Determines the best placement of an element, based on height and distance from bottom.
//					Will not allow an element to flow below the fold unless there's no adjustment room
//					left above the fold.
// @var obj elm:	The element to place.
*/
function pos(menu,flyout) {
	var offset		= $('#' + menu.id + ' li').offset();
	var left		= offset.left + 180;
	var top			= offset.top - 7;
	var elmHeight	= parseInt($(flyout).css('height'));
	var winTop		= posTop();
	var winBottom	= $(window).height();
	
	var botScreen	= winTop + winBottom;
	var botElm		= offset.top + elmHeight;
	var diff		= botScreen - botElm;
	if(diff <= 0) {
		top = top + diff;
	}
	// $(flyout).append("botScreen = " + botScreen + ", botElm = " + botElm + ", diff: " + diff);
	$(flyout).css('top', top);
	$(flyout).css('left', left);
	delete(base);
}



/*
// calcDimensions:Calculates the dimensions of a flyout based on the number of elements in it.
*/
function calcDimensions(menu, list) {
	var pItemHeight	= 30  // $('ul.priceFlyout li').css('height');
	var pItemWidth	= 130 // $('ul.priceFlyout li').css('width');
	var bItemHeight	= 30  // $('ul.brandFlyout li').css('height');
	var bItemWidth	= 120 // $('ul.brandFlyout li').css('width');
	var dim			= new Array();
	// For price, we create a single block list:
	if(list == 'price') {
		dim[0]		= pItemHeight * menu.length;
		dim[1]		= pItemWidth;
	// For brand, we create a wrapping inline list:
	} else {
		var rows	= menu.length / 3;
		if(rows >= 1) {
			dim[0]		= bItemHeight * Math.ceil(rows);
			dim[1]		= 360;
		} else {
			dim[0]		= bItemHeight * menu.length;
			dim[1]		= bItemWidth;
		}
	}
	// alert(dim[0] + ',' + dim[1]);
	return dim;
}


/*
// doFlyout:Creates the actual flyout menu
*/
function doFlyout(menu) {
	if($('#' + menu.id + '_flyout').length == 0) { // no element found
		var seeAll		= $('#' + menu.id + '-seeAll');;
		var price		= $('#' + menu.id + '-price li');
		var brand		= $('#' + menu.id + '-brand li');
		var priceDim	= calcDimensions(price, 'price');
		var brandDim	= calcDimensions(brand, 'brand');
		// Compare dimensions of the two lists, select the correct size for the div:
		var flyoutSize	= new Array();
		flyoutSize[0] 	= (priceDim[0] > brandDim[0]) ? priceDim[0] : brandDim[0];
		// Add header and footer
		flyoutSize[0]	= flyoutSize[0]+26;
		flyoutSize[1]	= priceDim[1] + brandDim[1] + 28;
		
		// Build the flyout:
		var flyout = $('<div />');
		flyout.attr('id', menu.id + '_flyout');
		flyout.attr('class', 'flyout_menu');
		flyout.attr('style', 'height:' + flyoutSize[0] + 'px; width:' + flyoutSize[1] + 'px;');
		$(flyout).hover(function () {flyoutOver(this); }, function () {flyoutOut(this); });
		pos(menu,flyout);
		
		// Build the flyout header:
		var fo_header = $('<div />');
		fo_header.attr('class', 'fo_header');
		fo_header.appendTo(flyout);
		
		// Build header left corner:
		var fo_headerLeft = $('<div />');
		fo_headerLeft.attr('class', 'fo_headerLeft');
		fo_headerLeft.appendTo(fo_header);
		
		// Build header center:
		//var fo_headerCenter = $('<div />');
		//fo_headerCenter.attr('class', 'fo_headerCenter');
		//fo_headerCenter.appendTo(fo_header);
		
		// Build header right corner:
		var fo_headerRight = $('<div />');
		fo_headerRight.attr('class', 'fo_headerRight');
		fo_headerRight.appendTo(fo_header);
		
		// Build content area:
		var fo_content = $('<div />');
		fo_content.attr('class', 'fo_content');
		fo_content.appendTo(flyout);
		
		// Build "By Price" H3
		var byPrice = $('<h3 />');
		byPrice.attr('class', 'fo_priceHeader');
		byPrice.attr('style', 'width:' + priceDim[1] + 'px;');
		byPrice.append('By Price:');
		byPrice.appendTo(fo_content);
		
		// Build "By Brand" H3
		var byBrand = $('<h3 />');
		byBrand.attr('class', 'fo_brandHeader');
		byBrand.attr('style', 'width:' + brandDim[1] + 'px;');
		byBrand.append('By Brand:');
		byBrand.appendTo(fo_content);
		
		// Build the Price ul:
		var priceUl	= $('<ul />');
		priceUl.attr('class', 'priceFlyout');
		priceUl.attr('id', menu.id + '-priceFo');
		priceUl.attr('style', 'width:' + priceDim[1] + 'px;');
		$.each(price, function(index, litem){
							   $(litem).clone().appendTo(priceUl);
							   });
		priceUl.appendTo(fo_content);
		
		// Build the Price ul:
		var brandUl	= $('<ul />');
		brandUl.attr('class', 'brandFlyout');
		brandUl.attr('id', menu.id + '-brandFo');
		brandUl.attr('style', 'width:' + brandDim[1] + 'px;');
		$.each(brand, function(index, litem){
							   $(litem).clone().appendTo(brandUl);
							   });
		brandUl.appendTo(fo_content);
		/*$(flyout).position({
						my: "left top",
						at: "right top",
						of: "#menu",
						collision: "fit"
						});*/
		
		// Build spacer (for CSS hack
		var spacer = $('<div />');
		spacer.attr('id', 'spacergeneral');
		spacer.appendTo(fo_content);
		
		// Build the flyout footer:
		var fo_footer = $('<div />');
		fo_footer.attr('class', 'fo_footer');
		
		// Build header right corner:
		var fo_footerLeft = $('<div />');
		fo_footerLeft.attr('class', 'fo_footerLeft');
		fo_footerLeft.appendTo(fo_footer);
		
		// Build header center:
		//var fo_footerCenter = $('<div />');
		//fo_footerCenter.attr('class', 'fo_footerCenter');
		//fo_footerCenter.appendTo(fo_footer);
		
		// Build header right corner:
		var fo_footerRight = $('<div />');
		fo_footerRight.attr('class', 'fo_footerRight');
		$(seeAll).clone().appendTo(fo_footerRight);
		fo_footerRight.appendTo(fo_footer);
		
		fo_footer.appendTo(flyout);
		
		// Attach to the document
		flyout.prependTo('body');
	}
}


/*
// removeFlyouts:Removes flyouts from screen when not needed
*/
function removeFlyouts(elm) {
	$('.flyout_menu').each(function(index, element) {
										var splitup = element.id.split('_flyout');
										if((element.id != window.currentFlyout) && (splitup[0] != window.currentMenu)) {
											$(element).remove();
										}
									});
	}


/*
// Menu and Flyout combination functions
*/
function menuOut(elm) {
	window.currentMenu	= '';
	window.t			= setTimeout("removeFlyouts()",100);
}

function menuOver(elm) {
	window.currentMenu		= elm.id;
	doFlyout(elm);
}

function flyoutOut(elm) {
	window.currentFlyout	= '';
	removeFlyouts(elm);
}

function flyoutOver(elm) {
	window.currentFlyout	= elm.id;
}


/**** Helper Functions ****/
/**
 * Function : dump()
 * Arguments: The data - array,hash(associative array),object
 *    The level - OPTIONAL
 * Returns  : The textual representation of the array.
 * This function was inspired by the print_r function of PHP.
 * This will accept some data as the argument and return a
 * text that will be a more readable version of the
 * array/hash/object that is given.
 * Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
 */
function dump(arr,level) {
	var dumped_text = "";
	if(!level) level = 0;
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object') { //Array/Hashes/Objects 
		for(var item in arr) {
			var value = arr[item];
			
			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,level+1);
			} else {
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}


function wait(msecs){
	var start = new Date().getTime();
	var cur = start
	while(cur - start < msecs){
		cur = new Date().getTime();
	}
}

// getElementsByClassName: extends and unifies this poorly-implemented function
/*document.getElementsByClassName = function(clsName){
	var retVal = new Array();
	var elements = document.getElementsByTagName("*");
	for(var i = 0;i < elements.length;i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");
			for(var j = 0;j < classes.length;j++){
				if(classes[j] == clsName)
					retVal.push(elements[i]);
			}
		}
		else if(elements[i].className == clsName)
			retVal.push(elements[i]);
	}
	return retVal;
}*/

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

// getUrlVars grabs variables from the GET and returns them as an associative array
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++){
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
return vars;
}

// Browser Window Size and Position
// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
// you may copy these functions but please keep the copyright notice as well
function pageWidth() {
	return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
	} 
function pageHeight() {
	return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
	} 
function posLeft() {
	return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
	} 
function posTop() {
	return typeof window.pageYOffset != 'undefined' ?  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
	} 
function posRight() {
	return posLeft()+pageWidth();
	} 
function posBottom() {
	return posTop()+pageHeight();
	}


// Finally, lets start up our application
$(document).ready(function(){
	/*$('.flyout').mouseover(function(event) {
									doFlyout(this);					
									});
	$('.flyout').mouseout(function(event) {
									removeFlyouts();					
									});*/
	$('.flyout').hover(function(event) {
								menuOver(this);					
								},
						function(event) {
								menuOut(this);					
								});
});