var baseHeroImageWidth = 546;
var minWidth = 1000;
var offset = 92;

function InitFooter()
{
    var footContainer = $('div#footContainer');
    
    var toggleContainer = footContainer.find('div.toggleContainer');
    var footToggle = toggleContainer.find('a.footToggle');
    
    var footContent = footContainer.find('div.footSlideContent');
    
    footContent.addClass('collapsed');
    footToggle.click(function() 
    { 
        if (!footContent.is(':animated')) 
        {
            footContent.slideToggle(300);
            footContent.toggleClass('collapsed');
            footContent.toggleClass('expanded');
            
            $(this).toggleClass('expanded');
        }

        return false;
    });
}


function InitResourceList() {
    var resourceCategoryTitles = $('div.resourceList h3');
    
    if (resourceCategoryTitles.length > 1) {
        resourceCategoryTitles.each(function() {
            var title = $(this);
            var resourceCategoryHead = title.parent();
            var resourceCategory = resourceCategoryHead.parent();
            var resources = resourceCategory.find('div.resources');
            if (resources.length > 0) {
                resourceCategory.addClass('collapsed');
                resources.hide();

                //Create the expand/collapse button
                var expandCollapse = $('<a href="#" class="expandCollapse collapsed"></a>');
                //var expandCollapse = resourceCategory.find('a.expandCollapse');
                expandCollapse.click(function() {
                    if (!resources.is(':animated')) {
                        resources.slideToggle(300);
                        resourceCategory.toggleClass('expanded');
                        resourceCategory.toggleClass('collapsed');
                        
                        $(this).toggleClass('expanded');
                        $(this).toggleClass('collapsed');

                        var isExpanded = resourceCategory.hasClass('expanded');
                        var text = isExpanded ? 'Expanded' : 'Collapsed';
                        
                        //Track this as an event
                        trackResourceEvent(text, title.text());
                    }

                    return false;
                });

                resourceCategoryHead.append(expandCollapse);
            }

            InitResources(resourceCategory.find('div.resource h4'), title);
        });
    }
    else {
        InitResources($('div.resourceCategory div.resource h4'), null);
    }
}
function InitResources(resourceTitles, heading) {
    var initTitles = (resourceTitles.length > 1);
    if (initTitles) {
        resourceTitles.each(function() {
            var title = $(this);
            var resourceHead = title.parent();
            var resource = resourceHead.parent();
            var resourceContent = resource.find('div.resourceContent');

            resource.addClass('collapsed');
            resourceContent.hide();

            //Create the expand/collapse button
            var expandCollapse = $('<a href="#" class="expandCollapse collapsed"></a>');
            //var expandCollapse = resource.find('a.expandCollapse');
            expandCollapse.click(function() {
                if (!resourceContent.is(':animated')) {
                    resourceContent.slideToggle(300);
                    resource.toggleClass('expanded');
                    resource.toggleClass('collapsed');

                    $(this).toggleClass('expanded');
                    $(this).toggleClass('collapsed');

                    var isExpanded = resource.hasClass('expanded');

                    var text = isExpanded ? 'Expanded' : 'Collapsed';

                    //Track this as an event
                    trackResourceEvent(text, title.text());
                }
                return false;
            });

            resource.append(expandCollapse);
        });
    }
}


window.onresize = function()
{
    updateHeroImage();
}

//reduces the width of the hero image depending on gap between browser and minimum page dimensions
//FIXME: zooming or maximizing the page doesn't trigger the onresize event
//       might need to hook this into a timer
function updateHeroImage()
{
    var curWidth = document.body.offsetWidth;

    if(curWidth < (minWidth + (offset * 2)))
    {
        var change = 0;
        
        if(curWidth < minWidth) change = -(offset);
        else if(curWidth > minWidth + (offset * 2)) return;
        else change = ((curWidth - minWidth) / 2) - offset;
        
        $('div#heroImage').css("width",(baseHeroImageWidth + change) + "px");
    }
}


function registerHistoryOverlay()
{
	if ($.browser.msie && $.browser.version <= 7)
	{
		$('a.history-overlay').colorbox({
			width: 960,
			height: 598,
			iframe: true
		});
		return;
	}
	
	$('a.history-overlay').colorbox({
		width: 960,
		height: 572,
		iframe: true
	});
}

function InitVideoSideCars()
{
    var features = $('.videoSideCar .videoPreview p a');
    features.each(function(){
        var feature = $(this);
        var url = feature.attr('href');
        var width = GetQueryValue(url, 'w');
        var height = GetQueryValue(url, 'h');
        feature.colorbox({ iframe: true, title: false, scrolling: false, innerWidth: width, innerHeight: height });
    });
}

$(document).ready(function()
{
	updateHeroImage();
	InitResourceList();
	InitFooter();
	registerHistoryOverlay();
	InitVideoSideCars();
	
	$('.sidebarContainer div.sidecarContainer:nth-child(3)').addClass('third');
	$('.sidebarContainer div.sidecarContainer:nth-child(4)').addClass('fourth');
});