var currentDropdown = null;
var gNavId = null;
var gNavList = null;
var activePage = null;
var setActiveClass = null;
var setInactiveClass = null;
var containerHeight = null;
var isTabInitalLoad = true;

$(window).resize(function() {
    setFooterHeight();
    
});

$(document).ready(function() {
    // PNG fix
    $('#header').supersleight({ shim: '/images/transparent.gif' });
    $('#header > .wrapper').supersleight({ shim: '/images/transparent.gif' });
    $('#footer > .wrapper > #order-dvd').supersleight({ shim: '/images/transparent.gif' });

    // sets the height of the footer based on the size of the browser
    setFooterHeight();

    // sets the height of the button background image in the navigation
    setSubNavigationButtonHeight();

    // sets the height of the button background image in the navigation
    setSubNavigationHover();
    
    //setWTB();
    
    //Fast Finder on Category landing
   /* if($('#suggest-a-project-container').length)
    {
     $("#content accessory-side-content").css('display', 'none');
    
	 }*/

    $('#global-nav > ul > li').hover(function(e) {
        gNavList = $(this);
        gNavId = $(this).attr('id');
        navMouseOver(e);
    }, function(e) {
        navMouseOut(e);
    });

    // Checks for a button link on the page and sets the hover
    if ($('.link-button').length) {
        $('.link-button > a').hover(function() {
            $(this).parent().children('div').css('background-position', '0 -22px');
            $(this).css('background-position', '0 -22px');
        }, function() {
            $(this).parent().children('div').css('background-position', '0 0');
            $(this).css('background-position', '0 0');
        });
    }

    // sets the accordian thumbnails
    if ($('#fast-finder-one').length)
        setThumbnails();

    // sets accordian vertical align
    if ($('#project-videos-container').length) {
        verticalAlignCopy('#project-videos-container');
    }

    // sets accordian vertical align
    if ($('#customer-creations-video-container').length) {
        verticalAlignCopy('#customer-creations-video-container');
    }

    // sets accordian vertical align
    if ($('#secondary-right-container > .content-container > .thumbnail-container').length) {
        $('#secondary-right-container > .content-container > .thumbnail-container > .copy').vAlign();
    }

    // sets tab states
    if ($('#tabs-container').length)
        setTabStates();
        
        

      
 // set global nav top position dynamically
    setGlobalNavTopPosition();   
        
});



function navMouseOver(event) {
    setActiveClass = "nav-" + $(gNavId).selector + "-hover";
    setInactiveClass = "nav-" + $(gNavId).selector;

    // checks to see if you are on an active page to set a variable so
    // when the user rolls off the navigation...it will not remove the active state
    if ($(gNavList).hasClass("active")) {
        activePage = $(gNavId).selector;
        $(gNavList).removeClass('active').addClass("hover");
    }
    else {
        // sets active class
        $(gNavList).addClass("hover");
    }
    
    

    if (gNavId != null) {
        var dropdown = gNavId + "-menu";
        if(dropdown == "customer-service-menu")
        {
        $("#" + dropdown).css('left','550px');
        }
       // $("#" + dropdown).center();
       // $("#" + dropdown).css('left','500px');
       
        $("#" + dropdown).delay(200).hoverFlow(event.type, {
            'height': 'show',
            'marginTop': 'show',
            'marginBottom': 'show',
            'paddingTop': 'show',
            'paddingBottom': 'show'
        }, 'fast');

        currentDropdown = $("#" + dropdown);
    }
}

function navMouseOut(event) {
    if (gNavId == activePage)
        $(gNavList).removeClass("hover").addClass("active");
    else
        $(gNavList).removeClass("hover");

    // Resets the navigation background glow to a hidden state
    if (currentDropdown != null) {
        $(currentDropdown).delay(100).hoverFlow(event.type, {
            'height': 'hide',
            'marginTop': 'hide',
            'marginBottom': 'hide',
            'paddingTop': 'hide',
            'paddingBottom': 'hide'
        }, 'fast');

        currentDropdown = null;
    }
}

function setSubNavigationButtonHeight() {
    $('.section-container > .button').each(function(index) {
        if ($(this).children('span').length) {            
            if ($(this).text().length <= 21)
                $(this).addClass('single-image');
            else
            	
                $(this).addClass('double-image');
               // $(this).css('height','25px'); 
        }
        else {
       
            if ($(this).text().length <= 27)
                             $(this).addClass('single');                
            else
            {
                $(this).addClass('double');
              //   $(this).css('height','25px');
                 }
                
        }
    });
}
function setSubNavigationHover() {
    $('.section-container > .button').hover(function() {
        if (($(this).hasClass('single-image')) || ($(this).hasClass('single')))
            $(this).stop(true, true).css({ 'background-position': '0 -25px', 'color': '#fff' });
        else
            $(this).stop(true, true).css({ 'background-position': '0 -37px', 'color': '#fff' });

        if ($(this).children('span').length)
            $(this).children('span').children('img').stop(true, true).css('margin-top', '-18px');

    }, function() {
        $(this).stop(true, true).css({ 'background-position': '0 0', 'color': '#5c5c5c' });

        if ($(this).children('span').length)
            $(this).children('span').children('img').stop(true, true).css('margin-top', '0px');
    });

}

function setGlobalNavTopPosition() {
	var navTop = $('#header').offset().top + $('#header').height() - 11;
	$('div#tools-menu, div#accessories-menu,div#attachments-menu,div#videos-howto-menu,div#customer-service-menu').css('top', navTop);
}

function setFooterHeight() {
    var footerHeight = $('#footer').height() + 15;
    var headerHeight = $('#header').height();
    var browserHeight = $(window).height();
    var contentHeight = $('#content').height();

    var documentHeight = headerHeight + contentHeight + footerHeight;

    if (browserHeight > documentHeight) {
        marginTop = browserHeight - documentHeight;
        $('#footer').css('margin-top', marginTop + 'px');
    }
    else {
        $('#footer').css('margin-top', 'auto');
    }
}

function setWTB()
{
    var browserHeight = $(window).width();
   
     alert(browserHeight);
   
 
   var wtbTop = $('#button').position().left;
   var wtbnTop = $('#wheretobuy').position().top;

   var wtbHeight = $('#wheretobuy').height();
     alert(wtbHeight);
     alert(wtbnTop);
}

function setThumbnails() {
    var childrenCount = $('#fast-finder-one').children('#select-thumbnails').children().length;
    var activeClass = null;

    // sets the css depending on how many thumbnails are displayed
    if (childrenCount <= 3) {
        $('#fast-finder-one').addClass('three-across').parent()
            .children('#form-container').css('padding-top', '0px')
             .children('.headline').css('margin-bottom', '18px')
            .parent().children('.link-button').css('padding-top', '15px');
    } else if (childrenCount <= 4) {
        $('#fast-finder-one').addClass('two-across');
    } else {
        $('#fast-finder-one').addClass('two-rows');
    }

    // sets the hover/click state of the thumbnails
    $('#select-thumbnails > .thumbnails').each(function(index) {
        $(this).css('cursor', 'pointer');

        $(this).hover(function() {
            if (!$(this).children('input').hasClass('active')) {
                $(this).children('input').css('background-position', '0 -41px');
            }
        }, function() {
            if (!$(this).children('input').hasClass('active')) {
                $(this).children('input').css('background-position', '0 0');
            }
        });

       $(this).click(function() {
      
            $(this).stop(true, true).children('input').addClass('active');
            activeClass = $(this).children('input');
        });
    }); 
}

/*function thumbnailclick()
{
 $('#select-thumbnails > .thumbnails').each(function(index) {
       
            if (!$(this).children('input').hasClass('active')) {
                $(this).children('input').removeClass('active').css('background-position', '0 0');

            }
        });


             $(this).addClass('active');
           	 $(this).css('background-position', '0 -41px');

}*/

function verticalAlignCopy(target) {
    $(target).children('.thumbnail-container').each(function(index) {
        // hack to get the height off of 'display:none' containers
        $(target).parent().css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });
        $(this).children('.copy').vAlign();
        $(target).parent().css({ 'position': 'static', 'visibility': 'visible', 'display': 'none' });
    });
}

function setFlexiblePromoArea(mapPath) {
    var now = new Date();
    var cacheDate = now.setDate(now.getDate() + 30);
    var xmlURL = mapPath + "/Style Library/DREMEL/xml/flexible-promo-area.xml?cache=" + cacheDate;
    var navInnerHTML = "";
    var scrollInnerHTML = "";

    $.ajax({
        type: "GET",
        url: xmlURL,
        dataType: "xml",
        success: function(xml) {
        	scrollInnerHTML += "<ul>";
            $(xml).find('promo-group').find('img').each(function(index) {
                var navNum = index + 1;
                // sets navigation
                
                 navInnerHTML += '<a class=' + parseInt(index+1) + ' href="#"></a>';
                
                // sets scrolling content
               
                var href = $(this).attr('href');
                var imgSrc = mapPath + $(this).attr('src');
                var alternateText = $(this).attr('alt');
                scrollInnerHTML += '<li current="' + parseInt(index+1) + '"><a href="' + href + '"><img alt="" src="' + imgSrc + '" alt="' + alternateText + '"/></a></li>'   
            });
			scrollInnerHTML += "</ul>";
            if ($(xml).find('promo-group').find('img').length != 1) {
                $('div.externalcarousel div.carouselnavigationcontrols').html(navInnerHTML);
            } else {
                $('div.externalcarousel div.carouselnavigationcontrols').css('display', 'none');
                $('div.externalcarousel div.prev').css('display', 'none');
                $('div.externalcarousel div.next').css('display', 'none');
            }

            $('div.externalcarousel div.jCarouselLite').html(scrollInnerHTML);
        },
        complete: function() {
 			var queryArr = [];
	        var imagesCnt = parseInt($('div.externalcarousel div.jCarouselLite ul li').length);
	        if(imagesCnt > 0)
	        {
	       		 for (var i = 1; i <= imagesCnt; i++) {
	            	queryArr.push("." + i);
	        	 }
	        	 $('div.carouselnavigationcontrols a.1').addClass("active");
	       		 $(".jCarouselLite").jCarouselLite({
	            	visible: 3,
	            	start: 0,
	            	btnNext: ".next",
	            	btnPrev: ".prev",
	            	btnGo: queryArr,
	            	auto: 10000,
	            	speed: 500,
	            	afterEnd: function (val) {
	                	$('div.carouselnavigationcontrols a').each(function () {
	                   		$(this).removeClass("active");
	                	});
	                		var activeElement;
	                		if (val[0].attributes[0].name == "current")
	                		{
	                			activeElement = val[0].attributes[0].value;
	                		}
	                		else if (val[0].attributes[1].name == "current")
	                		{ 
	                			activeElement = val[0].attributes[1].value;
	                		}
	                		
	                		var currentAtiveElement = "a." + activeElement;
	                		$(currentAtiveElement).addClass("active");
	            		}
	        	});
	        }
        }
    });               //close $.ajax(

    $('.browse').css('cursor', 'pointer');
    $('.browse').hover(function() {
        $(this).css('background-position', '0 -38px');
    }, function() {
        $(this).css('background-position', '0 0');
    });
}
function setTabStates() {
    var activeClass = $('#tabs-container > ul li:first');
    if($('#features-tab-container').children('div').length > 0)
    {
        var activeDiv = $('#features-tab-container').css('display', 'block');
    }
    else if($('#specifications-tab-container').children('div').length > 0)
    {
    var activeDiv = $('#specifications-tab-container').css('display', 'block');
    }
    else if($('#support-tab-container').children('div').length > 0)
    {
     var activeDiv = $('#support-tab-container').css('display', 'block');
    }
    else if($('#accessories-tab-container').children('div').length > 0)
    {
    var activeDiv = $('#accessories-tab-container').css('display', 'block');
    }
    else
    {
    var activeDiv = $('#attachments-tab-container').css('display', 'block');
    }

    $(activeClass).addClass('active').children('div').css('background-position', '0 -56px').children('h2').css('color', '#0061aa');
    $('#active-tab-arrow').css('margin-left', $(activeClass).setTabArrow());
    
    // sets the hover/click state of the thumbnails
    $('#tabs-container > ul li').each(function(index) {
        $(this).css('cursor', 'pointer');

        $(this).hover(function() {
            if (!$(this).hasClass('active')) {
                $(this).children('div').css('background-position', '0 -28px');
            }
        }, function() {
            if (!$(this).hasClass('active')) {
                $(this).children('div').css('background-position', '0 0');
            }
        });

        $(this).click(function() {
            if (activeClass != null) {
                $(activeClass).removeClass('active').children('div').css('background-position', '0 0').children('h2').css('color', '#fff');
            }

            $(this).stop(true, true).addClass('active').children('div').css('background-position', '0 -56px').children('h2').css('color', '#0061aa');
            $('#active-tab-arrow').css('margin-left', $(this).setTabArrow());
            activeClass = $(this);

            // shows active content area. The names are based on ids. If you name the tab and content id the same...
            //just add '-container' to the end of the content id. It will show the correct container onclick
            $(activeDiv).css('display', 'none');
            activeDiv = "#" + $(this).attr('id') + "-container";
            $(activeDiv).css('display', 'block');

        });
    });
}
// centers the dropdown navigation on the page
jQuery.fn.center = function() {
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}

// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
    return this.each(function(i) {
        var ah = $(this).height();
        var ph = $(this).parent().height();
        var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
    });
};

// VERTICALLY ALIGN FUNCTION
$.fn.setTabArrow = function() {
    var wrapper = $('#tabs-wrapper').position().left;
    var position = $(this).position().left;
    var width = $(this).width();
    var activetabposition = $('div#active-tab-arrow').position().left;
   
    if(activetabposition > (wrapper + 5))
    {
    var tabmargin = (position - wrapper -width);
     var shift = (position - wrapper - 58) + ((width ) / 2);
          
    }
    else
    {
    var shift = (position - wrapper) + ((width - 23) / 2);
    }
        
  
    return shift + "px";
};


  function Displaywtb() {
     
        $(".widget_where-to-buy").css('display', 'block');
    }
    function Hidewtb() {

        $(".widget_where-to-buy").css('display', 'none');
    }
    
    
    
    
    
  function SetVideoOverlay()
        {
        // var id = "#" + divId;
          $(".video-click").colorbox({inline: true,scrolling: false, href: '#video-overlay', innerWidth: 529, innerHeight: 329 });
         // $(".video-click").colorbox({inline: true,scrolling: false, href:id, innerWidth: 529, innerHeight: 329 });
          }
          
          function CloseVideoOverlay()
          {
          alert('in here');
          	$("#cboxOverlay").css('display', 'none');
          	$("#Colorbox").css('display', 'none');


          }