//  Initialize the drop down menus by looking for
//  elements of class "menuHeader".  Create a DropDownMenu
//  for each "menuHeader" that is found.
function initMenus() {
  var menuHeaderWrappers = $$('.menuHeaderWrapper');
  for (var i=0;i<menuHeaderWrappers.length;i++) {
    new DropDownMenu(menuHeaderWrappers[i]);
  }
}

//  DropDownMenu is a class that requires the header, the content
//  table and a div wrapper around the content table.  The wrapper
//  div was added because the scriptaculous slide code seems to
//  work better with a div.  It should be noted that the header and
//  content elements should be positioned so the are "touching".
//  There are also required elements that are used when the menu slides up.
var DropDownMenu = Class.create();
DropDownMenu.prototype = {

  //  Make sure that required menu elements are present and bind
  //  an event listener to show the drop down.
  initialize : function(menuHeaderWrapper) {
  
    //  Assume we'll never have double digit menus
    var menuIndex = menuHeaderWrapper.id.charAt(menuHeaderWrapper.id.length-1);

    this.menuHeaderWrapper = menuHeaderWrapper;
    this.menuHeader = $('menuHeader'+menuIndex);
    this.menuContentWrapper = $('menuContentWrapper'+menuIndex);
    this.menuContent = $('menuContent'+menuIndex);
    this.menuHeaderLeftBorder = $('menuHeaderLeftBorder'+menuIndex);
    this.menuHeaderText =  $('menuHeaderText'+menuIndex);
    this.showing = false;    
    
    //  Set the size of the menu header wrapper so we mouseout correctly
    var menuHeaderWrapperDimensions = Element.getDimensions(this.menuHeader);
    this.menuHeaderWrapper.setStyle({width:menuHeaderWrapperDimensions.width+'px',height:menuHeaderWrapperDimensions.height+'px'});
    
    if (this.menuHeader == null) 
        alert('A div with id menuHeader'+menuIndex+' is required to initialize '+this.menuHeader.id);
    else if  (this.menuContentWrapper == null) 
        alert('A div with id menuContentWrapper'+menuIndex+' is required to initialize '+this.menuHeader.id);
    else if (this.menuContent == null) 
        alert('A table with id menuContent'+menuIndex+' is required to initialize '+this.menuHeader.id);
    else if  (this.menuHeaderLeftBorder == null) 
        alert('A td with id menuHeaderLeftBorder'+menuIndex+' is required to initialize '+this.menuHeader.id);
    else if (this.menuHeaderText == null) 
        alert('A td with id menuHeaderText'+menuIndex+' is required to initialize '+this.menuHeader.id);
        
    Event.observe(menuHeaderWrapper, 'mouseover', this.slideDown.bindAsEventListener(this), true);
  },

  //  Shows the menu when the header is moused over
  slideDown : function() {
    if ( this.showing ) return;
      
    //  In order to get dimensions and position, display can not be "none".  The
    //  scriptaculous slide code requires display so I'll use visibility to hide, 
    //  set display to block, get dimensions, and switch back afterwards.
    this.menuContentWrapper.setStyle({visibility:'hidden', display:'block'});
          
    //  Dimensions are calculated on each show to account for window resizing.
    var menuHeaderWrapperPosition = Position.cumulativeOffset(this.menuHeaderWrapper);
    var menuHeaderWrapperDimensions = Element.getDimensions(this.menuHeaderWrapper);
    var menuContentPosition = Position.cumulativeOffset(this.menuContent);
    var menuContentDimensions = Element.getDimensions(this.menuContent);
    var menuContentWrapperDimensions = Element.getDimensions(this.menuContentWrapper);          
    this.dimensions = new Object();
    this.dimensions.menuHeaderWrapperX1 = menuHeaderWrapperPosition[0];
    this.dimensions.menuHeaderWrapperY1 = menuHeaderWrapperPosition[1];
    this.dimensions.menuHeaderWrapperX2 = menuHeaderWrapperPosition[0] + menuHeaderWrapperDimensions.width;
    this.dimensions.menuHeaderWrapperY2 = menuHeaderWrapperPosition[1] + menuHeaderWrapperDimensions.height;
    this.dimensions.menuContentWrapperX1 = menuContentPosition[0];
    this.dimensions.menuContentWrapperY1 = menuContentPosition[1];
    this.dimensions.menuContentWrapperX2 = menuContentPosition[0] + menuContentDimensions.width;
    this.dimensions.menuContentWrapperY2 = menuContentPosition[1] + menuContentDimensions.height;
          
    //  Switch back
    this.menuContentWrapper.setStyle({display:'none',visibility:'visible'});
          
    //  Firefox was getting confused keeping the height of the wrapper
    //  div set correctly, other browsers don't seem to mind so I'll just
    //  reset the height each show.
    this.menuContentWrapper.setStyle({width:this.dimensions.menuContentWrapperX2-this.dimensions.menuContentWrapperX1+'px',height:this.dimensions.menuContentWrapperY2-this.dimensions.menuContentWrapperY1+'px'});

    new Effect.SlideDown(this.menuContentWrapper, {duration:0.3});
    this.showing = true;
    Event.observe(document, 'mousemove', this.slideUp.bindAsEventListener(this), true);
  },

  //  Hide the drop down when the mouse position is moved 
  //  ouside the menu header or content.
  slideUp : function(e) {
    if ( ! this.showing ) return;

    var x = Event.pointerX(e);
    var y = Event.pointerY(e);

    var outsidemenuHeaderWrapper = x < this.dimensions.menuHeaderWrapperX1 || x > this.dimensions.menuHeaderWrapperX2 || y < this.dimensions.menuHeaderWrapperY1 || y > this.dimensions.menuHeaderWrapperY2;
    var outsideMenuContent = x < this.dimensions.menuContentWrapperX1 || x > this.dimensions.menuContentWrapperX2 || y < this.dimensions.menuContentWrapperY1 || y > this.dimensions.menuContentWrapperY2;

    if ( outsidemenuHeaderWrapper && outsideMenuContent ) {
      new Effect.SlideUp(this.menuContentWrapper, {duration:0.3});
      this.menuHeaderLeftBorder.className='menuHeaderLeftBorder';
      this.menuHeaderText.className='menuHeaderText';
      this.showing = false;
    }
  }
};

//  Javascript doesn't have a trim??!!
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}

 //  I couldn't find a good prototype way to do this, so 
 //  I'll just write some code to handle the browsers we
 //  are supporting.  This should handle all standards
 //  compliant browsers (Firefox/IE7/Safari), the nasty
 //  hack, IE6 and older 
 getViewportDimensions = function () {
    var viewportwidth;
    var viewportheight; 
    if (typeof window.innerWidth != 'undefined') { //  Standards compliant
         viewportwidth = window.innerWidth;
         viewportheight = window.innerHeight;
    } else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0) {  //  Nasty IE 6
          viewportwidth = document.documentElement.clientWidth;
          viewportheight = document.documentElement.clientHeight;
    } else {
       // Anything else, just make it big to cover everything.  It will cause scrolling
       // but this should only happen in unsupported browsers.  i.e. IE5
       viewportwidth = 3000;
       viewportheight = 3000;
    }
    return {width: viewportwidth, height: viewportheight};
}

//  Gets the dimensions of the lightbox based on the viewport and
//  scroll position. 
getLightboxDimensions = function () {
    var pageWrapperTop = $('pageWrapper').cumulativeScrollOffset().top;
    var pageWrapperLeft = $('pageWrapper').cumulativeScrollOffset().left;
    var pageWrapperDimensions = $('pageWrapper').getDimensions();
    var pageWrapperWidth = pageWrapperDimensions.width;
    var pageWrapperHeight = pageWrapperDimensions.height;
    var viewportDimensions = getViewportDimensions();
    var viewportWidth = viewportDimensions.width;
    var viewportHeight = viewportDimensions.height;
    var top = pageWrapperTop > 0 ? pageWrapperTop : 0;
    var left = pageWrapperLeft > 0 ? pageWrapperLeft : 0;
    var width = viewportWidth > pageWrapperWidth ? pageWrapperWidth : viewportWidth;
    var height = viewportHeight > pageWrapperHeight ? pageWrapperHeight : viewportHeight;
    return {top: top, left: left,width: width, height: viewportHeight};
}

//  Sets the initial size of the lightbox with the given ID and shows it.
showLightbox = function (id, showProgress) {
    $(id).show();
    var dims = getLightboxDimensions();
    $(id).setStyle({top:dims.top+'px',left:dims.left+'px',width:dims.width+'px',height:dims.height+'px',display:'block'});
    if (showProgress) {
        $('ajaxLoader').setStyle({top:dims.top+'px',left:dims.left+'px',width:dims.width+'px',height:dims.height+'px',display:'block'});
    }
}

//  Hides the lightbox with the given ID.
hideLightbox = function (id) { $(id).hide();$('ajaxLoader').hide(); }

//  Common popup function
popupWindow = function(url, isPopUp) {
    if (isPopUp) {
        var newWindow = window.open(url,'','status=yes,left=100,top=100,location=yes,scrollbars=yes,toolbar=yes,menubar=yes,resizable=yes,width=1016,height=711');
	    if (window.focus) {newWindow.focus()}
    } else { window.location=url; }
}

//  Popup the legal texts
popupLegalWindow = function(url, isPopUp) {
    if (isPopUp) {
        var newWindow = window.open(url,'','status=yes,left=300,top=200,location=yes,scrollbars=no,toolbar=yes,menubar=yes,resizable=yes,width=620,height=400');
	    if (window.focus) {newWindow.focus()}
    } else { window.location=url; }
}

//  Popup the chat window
popupChatWindow = function(url, isPopUp) {
    if (isPopUp) {
        var newWindow = window.open(url,'','status=yes,left=300,top=150,location=no,scrollbars=no,toolbar=no,menubar=no,resizable=no,width=700,height=625');
	    if (window.focus) {newWindow.focus()}
    } else { window.location=url; }
}

//  Limits a textarea size
limitTextArea = function (field, max) {
    if (field.value.length > max) field.value = field.value.substring(0, max);
}

//  Checks to see if the year month combination is in the future
isFutureDate = function(year, month) {
    var futureDate = true;
    var today = new Date();
    var enteredDate = new Date();
    enteredDate.setFullYear(year, month);
    //  Check the year
    if (today.getFullYear() > enteredDate.getFullYear()) {
        futureDate = false;
    } else if (today.getFullYear() == enteredDate.getFullYear()) {
        //  Check the month
        if (today.getMonth() > enteredDate.getMonth()) {
            futureDate = false;
        }    
    }
    return futureDate;
}

function hideselects(activeregion) {
    if (isIE6()) {
        taglist = document.body.getElementsByTagName("SELECT");
        for (i=0;i<taglist.length;i++) {
            taglist[i].style.visibility="hidden";
        }
        showtaglist = document.getElementById(activeregion).getElementsByTagName("SELECT");
        for (i=0;i<showtaglist.length;i++){
            showtaglist[i].style.visibility="visible";
        }
    }
   objectlist = document.body.getElementsByTagName("EMBED"); 
for (j=0;j<objectlist.length;j++) {
if ($('ProductSearch')!=null && objectlist[j].id != $('ProductSearch').id) {
objectlist[j].style.visibility="hidden";
}}


}
function showselects() {
    if (isIE6()) {
    taglist = document.body.getElementsByTagName("SELECT");
    for (i=0;i<taglist.length;i++) {
        taglist[i].style.visibility="visible";
        } 
    }
    objectlist = document.body.getElementsByTagName("EMBED");
    for (j=0;j<objectlist.length;j++) {
            objectlist[j].style.visibility="visible";
        }
}

//  This function shows a html tooltip.
function showTooltip(triggerId, html) {
    $('tooltipContent').innerHTML = html;    
    var tt = new Tooltip(triggerId, 'tooltip');
    $('tooltip').show(); 
}

//  Checks if the users browser is IE6 so we can deal
//  with Ithe fact that IE 6 sux.
function isIE6() {
    var agt=navigator.userAgent.toLowerCase();
	return (agt.indexOf('msie 6.')!=-1);
}