// JavaScript Document

/* CLASSES */
/**
 * this is the Footer class.
 * this class controls the functionality for the footer.
 */
var Footer = function() {
	this.fluid = jQuery("#footer").children(".fluid");
	this.closed_row_height = 25;
	this.open_row_height = 139;
	this.sections = jQuery("#footer").children(".fluid").children(".menu").children(".row");
	this.activeRow;
	this.anim = "slow";
	
	this.Footer = function() {
		var thisPtr = this;
		
		/**
		 * controls the mouse over and mouse out (open and close)
		 */
		jQuery("#footer-plus").bind("mouseenter", function() {
			thisPtr.openUp();
		});
		jQuery("#footer").bind("mouseleave", function() {
			thisPtr.closeDown();
		});
		
		
		jQuery("#footer").children(".fluid").children(".menu").children(".whats-new").children(".content").children("ul").children("li").each(function(){
			jQuery(this).bind("mouseenter", function() {
				jQuery(this).stop().fadeTo("fast", "1.0").siblings().stop().fadeTo("fast", "0.5");
			}).bind("mouseleave", function() {
				jQuery(this).siblings().stop().fadeTo("def", "1.0");
			});
		});
		
		this.sections.each(function(obj) {
			jQuery(this).css("height", thisPtr.closed_row_height + "px");
		});
		this.maxHeight = this.closed_row_height * this.sections.length - 1;
		this.maxHeight += this.open_row_height;
	}
	
	/**
	 * this opens the footer menu
	 */
	this.openUp = function() {
		jQuery("#footer-plus").fadeOut(0);
		
		this.fluid.stop();
		/* the -3 is to bump the div up so that "HOME" is vertically centered in the footer bg */
		this.fluid.animate({top:(-3 - this.maxHeight + jQuery("#footer").height()) + "px"}, this.anim);
		
		this.fluid.children(".menu").stop();
		this.fluid.children(".menu").fadeIn(0);
		
		this.openSectionById(0);
	}
	/** 
	 * this closes the footer menu
	 */
	this.closeDown = function() {
		jQuery("#footer-plus").stop(null, true);
		jQuery("#footer-plus").fadeIn(this.anim);
		
		this.fluid.stop();
		this.fluid.animate({top:"0"}, this.anim);
		
		this.fluid.children(".menu").stop();
		this.fluid.children(".menu").fadeOut(0);
		
		var thisPtr = this;
		this.sections.each(function(obj) {
			jQuery(this).css("height", thisPtr.closed_row_height + "px");
		});
		
		this.activeRow = null;
	}
	/**
	 * this takes the secion name and finds the matching section object. It then opens that section.
	 */
	this.openSectionByName = function(str) {
		var thisPtr = this;
		this.fluid.children(".menu").children(".row").each(function() {
			if(jQuery(this).attr("name") == str) {
				thisPtr.openSection(this);
				return 0;
			}
		});
	}
	this.openSectionById = function(val) {
		this.openSection(this.sections[val]);
	}
	this.closeSection = function(obj) {
		jQuery(obj).stop();
		jQuery(obj).animate({height:this.closed_row_height + "px"}, this.anim);
		jQuery(obj).children(".background").fadeOut("fast");
		jQuery(obj).children(".content").fadeOut("fast");
	}
	/**
	 * expands the corresponding section and shrinks any other open section.
	 */
	this.openSection = function(obj) {
		if(this.activeRow && (this.activeRow.attr("name") == jQuery(obj).attr("name"))) return false;
		
		var thisPtr = this;
		this.sections.each(function() {
			thisPtr.closeSection(this);
		});
		
		this.activeRow = jQuery(obj);
		this.activeRow.stop();
		this.activeRow.animate({height:this.open_row_height + "px"}, this.anim);
		this.activeRow.children(".background").fadeIn("fast");
		this.activeRow.children(".content").fadeIn("fast");
	}
	
	// mimic a constructor;
	this.Footer();
}
/**
 * this manages the resizing of the page by limiting the size of the content by aspect ratio
 */
var Resizer = function() {
	this.interval_id;
	this.iw;
	this.ih;
	this.resizeCustom;
	
	// initials
	if(this.interval_id) clearInterval(this.interval_id);
	this.interval_id = setInterval("resizer.func()", 100);
	
	/**
	 * This function runs every tenth of a second to make sure the content is at is it's maximum viewable size.
	 */
	this.func = function() {
		this.iw = document.documentElement.clientWidth;
		this.ih = document.documentElement.clientHeight;
		// if we're over the minimum size, process changes
		if((this.iw > page_min_width + page_width_buffer) && (this.ih > page_min_width * page_aspect_ratio + page_height_buffer)) {
			var w;
			var h;
			
			// if we're over the maximum size, snap to maximum.
			if((this.iw > page_max_width) && ((this.ih - page_height_buffer) > page_max_width * page_aspect_ratio)) {
				// snap to maximum
				w = page_max_width;
				h = page_max_width * page_aspect_ratio;
			} else {
				// within resize thresh hold
				if(this.iw > ((this.ih - page_height_buffer) / page_aspect_ratio)) {
					// constraint is height
					w = (this.ih - page_height_buffer) / page_aspect_ratio;
					h = this.ih - page_height_buffer;
				} else {
					// constraint is width
					w = this.iw - page_width_buffer;
					h = this.iw * page_aspect_ratio;
				}
			}
			
			// this was to try and animate the changes, but it won't work like this and has been commented out.
			// jQuery("#container").animate({width:w}, 500);

			jQuery("#container").css("width", (w) + "px");
			jQuery("#main").css("height", (h) + "px");
			
			if(this.resizeCustom) this.resizeCustom({iw:this.iw,ih:this.ih,h:h,w:w});
		} else {
			var w = page_min_width;
			var h = page_min_width * page_aspect_ratio;
			jQuery("#container").css("width", w + "px");
			jQuery("#main").css("height", h + "px");
			jQuery("#main").children(".middle").css("margin-top", 0);
			
			// if the page has specified a custom resize function, run it.
			if(this.resizeCustom) this.resizeCustom({iw:this.iw,ih:this.ih,h:h,w:w});
		}
	}
}

/* VARIABLES */
var footer;
var page_aspect_ratio;
//var page_min_width = 1024;
var page_min_width = 1003;
var page_max_width = 1280;
var page_width_buffer = 21;
var page_height_buffer = 98;
var resizer;



/* FUNCTIONS */
function check_key()
{
  alert("form submit");
  return false;
}

function searchOnFocus()
{
		var strsearch = document.forms[0].search.value;
  	if (strsearch == "SEARCH")
    {
      document.forms[0].search.value = "";
    }
}

function searchOnClick(searchpage) 
{
	// when the user clicks on the search box, this is called.
		var strsearch = document.forms[0].search.value;
  	if (strsearch.length > 3 && strsearch != "SEARCH")
    {
      document.forms[0].__VIEWSTATE.value = "";
    	document.forms[0].action = searchpage;
   		document.forms[0].submit();
    }
    else 
    {
        if (strsearch.length == 0) 
        {
            alert("Please enter a search term.");
        }
        else 
        {
            alert("Please enter a search term of a least 4 characters.");
        }
    
   		document.forms[0].search.focus();
    }
}

//i.e. windows.event.keyCode
function searchOnEnter(searchpage, event)
{
 
  var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
 
  if (key == 13)
  {
    searchOnClick(searchpage);
  }
}

// this is used for debugging.
function trace(val) {
	jQuery("#traces").html(val + "<br />" + jQuery("#traces").html());
}
/**
 * this converts a px amount to a number. ie 78px becomes 78
 */
function px(val) {
	var pos = String(val).indexOf("px");
	return Number(String(val).substr(0, pos));
}

/* JQUERY DOC READY */
jQuery(document).ready(function() {
	//jQuery(document).pngFix();
	
	// instantiates the footer singleton
	footer = new Footer();
	// instantiates the resizer singleton
	resizer = new Resizer();
	// this calculates the current pages aspect ratio. Used by the resizer singleton
	page_aspect_ratio = jQuery("#main").height() / jQuery("#container").width();

  //resizer.func();
  //alert(jQuery("#main").height() + ", " + jQuery("#container").width());
});