/*
  You can add/edit your JavaScript below.
  To utilize this script in your store, add the following
  line to your store's templates where necessary: 

  <script type="text/javascript" src="/mk_navigation.js"></script>
*/


// JavaScript Document
/*  MetroKitchen 02/02/09  */
 
/*  Site/Nav Sections
    ------------------------ */
    function navSection(args){
        this.dropTrigger = document.getElementById(args.dropTrigger);
        this.triggerArea = this.dropTrigger.parentNode; 
        this.snavTriggerRegion = getElements('trigger_region', 'DIV', this.triggerArea)[0];
        this.snavTrigger = this.snavTriggerRegion.getElementsByTagName('A')[0];
        this.dropList = document.getElementById(args.dropList);
        this.snavListId = args.snavList;
        this.init();
    }
    navSection.prototype.openList = function(){
        this.dropTrigger.className = 'active';
        this.dropList.style.visibility = 'visible';
    }
    navSection.prototype.closeList = function(){
        this.dropList.style.visibility = 'hidden';
        this.dropTrigger.className = '';
    }
    navSection.prototype.init = function(){
        var end_cap = document.createElement("span");
        end_cap.className = "end_cap";
        end_cap.style.position = "absolute";
        end_cap.style.display = "block";
        this.dropList.appendChild(end_cap.cloneNode(false));
        var list_items = this.dropList.getElementsByTagName("LI");
        list_items[list_items.length - 1].className = "last";
    }
/*  Nav Controllers
    --------------------- */
	/* In the HTML code you MUST have all the var in order for the dropdowns to show. (ie. if you have 6, the html code needs 6 ul*/
    function mkNav(){
        this.dropdownContainer = document.getElementById('primary_navigation_dropdowns');
        var cookware = new navSection({dropTrigger: 'cW', dropList: 'cW_dropdown', snavList: 'cW_secondary_navigation'});
        var cutlery = new navSection({dropTrigger: 'cUT', dropList: 'cUT_dropdown', snavList: 'cUT_secondary_navigation'});
        var bakeware = new navSection({dropTrigger: 'bW', dropList: 'bW_dropdown', snavList: 'bW_secondary_navigation'});
		var accessories = new navSection({dropTrigger: 'aCC', dropList: 'aCC_dropdown', snavList: 'aCC_secondary_navigation'});
		var appliances = new navSection({dropTrigger: 'aPP', dropList: 'aPP_dropdown', snavList: 'aPP_secondary_navigation'});
		/*var barware = new navSection({dropTrigger: 'bAR', dropList: 'bAR_dropdown', snavList: 'bAR_secondary_navigation'});*/
		var giftideas = new navSection({dropTrigger: 'giftIDEAS', dropList: 'giftIDEAS_dropdown', snavList: 'giftIDEAS_secondary_navigation'});
        /*this.sections = [cookware, cutlery, bakeware, accessories, appliances, barware];*/
		this.sections = [cookware, cutlery, bakeware, accessories, appliances, giftideas];
        this.registerHandlers();
        searchInit();
    }
    mkNav.prototype.registerHandlers = function(){
        var controller = this;
        var openMethod = function(event){controller.openDropdown(event)};
        var closeMethod = function(event){controller.closeDropdown(event)};
        for(var i=0; i<this.sections.length; i++){
            if(window.addEventListener){
                this.sections[i].dropTrigger.addEventListener('mouseover', openMethod, false);
                this.sections[i].dropTrigger.addEventListener('mouseout', closeMethod, false);
                this.sections[i].dropList.addEventListener('mouseout', closeMethod, false);
            }
            if(window.attachEvent){
                this.sections[i].dropTrigger.attachEvent('onmouseover', openMethod);
                this.sections[i].dropTrigger.attachEvent('onmouseout', closeMethod);
                this.sections[i].dropList.attachEvent('onmouseout', closeMethod);
            }
        }
        if(window.addEventListener){
            window.addEventListener('unload', function(){
                for(var i=0; i<controller.sections.length; i++){
					controller.sections[i].dropTrigger.removeEventListener('mouseover', openMethod, false);
					controller.sections[i].dropTrigger.removeEventListener('mouseout', closeMethod, false);
					controller.sections[i].dropList.removeEventListener('mouseout', closeMethod, false);
                }
            }, false);
        }
    }
    mkNav.prototype.openDropdown = function(event){
        if(this.snavOpen) return;
        this.dropdownContainer.style.display = 'block';
        var activeTrigger = event.srcElement || event.currentTarget;
        for(var i=0; i<this.sections.length; i++)
            this.sections[i].dropTrigger == activeTrigger ? this.activeSection = this.sections[i] : this.sections[i].closeList();
        this.activeSection.openList();
    }
    mkNav.prototype.closeDropdown = function(event){
        if(this.snavOpen) return;
        var destinationElement = event.relatedTarget || event.toElement;
        if( isDescendant(this.dropdownContainer, destinationElement) ){
            this.activeSection.dropTrigger.className = 'open_inactive';
            return;
        }
        this.dropdownContainer.style.display = 'none';
        for(var i=0; i<this.sections.length; i++)
            this.sections[i].closeList();
        delete this.activeSection;
    }
    
    /*  Secondary Navigation: 'second nav'
        --------------------------------- */
    mkNav.prototype.setupSecondnav = function(){
        var controller = this; 
        this.snavIframeEl = document.getElementById('secondarynav_content');
        this.snavIframeDoc = this.snavIframeEl.contentWindow.document || this.snavIframeEl.contentDocument;
        this.snavContainer = this.snavIframeDoc.getElementById('secondary_clickdown_navigation');
        this.snavCloseButton = this.snavIframeDoc.getElementById('close_secondnav');
        this.snavCloseButton.onclick = function(){ controller.closeAllSecondnavLists(); controller.closeSecondnav()};
        for(var i=0; i<this.sections.length; i++){
            if(window.addEventListener) this.sections[i].snavTrigger.addEventListener('click', function(event){controller.switchSecondnav(event)},false);
            if(window.attachEvent) this.sections[i].snavTrigger.attachEvent('onclick', function(event){controller.switchSecondnav(event)});
            this.sections[i].snavTrigger.style.display = 'block';
        }
        this.snavIframeDoc.body.className = document.body.className;
        var snav_lists = this.snavContainer.getElementsByTagName('UL');
        for(var i=0; i<snav_lists.length; i++)
            if(snav_lists[i].className != "continuation")
                /*snav_lists[i].getElementsByTagName("li")[0].className = "category";*/
        this.secnavStart = document.createElement("SPAN");
        this.secnavEnd = this.snavIframeDoc.createElement("SPAN");
        this.secnavStart.id = "secnav_start";
        this.secnavEnd.id = "secnav_end";
        document.getElementById('navigation_area').insertBefore(this.secnavStart,this.snavIframeEl);
        this.snavIframeDoc.body.appendChild(this.secnavEnd);
    }
    mkNav.prototype.switchSecondnav = function(event){
        this.closeAllSecondnavLists();
        if(!this.snavOpen) this.openSecondnav();
        var activeTrigger = event.srcElement || event.currentTarget;
        var previousSection = this.activeSection;
        var openingSection;
        for(var i=0; i<this.sections.length; i++)
            if(this.sections[i].snavTrigger == activeTrigger)
                openingSection= this.sections[i];
        if(previousSection == openingSection){
            this.closeSecondnav();
            return;
        }
        this.snavIframeDoc.getElementById(openingSection.snavListId).style.display = 'block';
        openingSection.snavTriggerRegion.className += ' active';
        this.activeSection = openingSection;
    }
    mkNav.prototype.openSecondnav = function(){
        var maxHeight = 139;
        this.snavIframeEl.style.height = maxHeight + 'px';
        this.snavContainer.style.display = 'block';
        /*this.secnavStart.style.display = 'block';*/
        this.snavOpen = true;
    }
    mkNav.prototype.closeSecondnav = function(event){
        this.snavIframeEl.style.height = '0';
        this.snavContainer.style.display = 'none';
        this.secnavStart.style.display = 'none';
        this.snavOpen = false;
        delete this.activeSection;
    }
    mkNav.prototype.closeAllSecondnavLists = function(){
        for(var i=0; i<this.sections.length; i++){
            this.snavIframeDoc.getElementById(this.sections[i].snavListId).style.display = 'none';
            this.sections[i].snavTriggerRegion.className = this.sections[i].snavTriggerRegion.className.replace('active', '');
        }
    }

	
    /* search */
    function searchInit(){
        var searchBox = document.getElementById("global_search_box");
        searchBox.onfocus = function(){
            if(this.value == this.defaultValue) this.value = ""; 
        }
    }
    
/*  Instantiation
    ------------- */
   setTimeout( function(){
            if(snavLoaded){
                nav.setupSecondnav();
            }else{
                if(window.addEventListener) window.addEventListener('load', function(){nav.setupSecondnav()}, false);
                if(window.attachEvent) window.attachEvent('onload', function(){nav.setupSecondnav()});
            }
    }, 1000);
	
    var nav = new mkNav();