function BreadcrumbBar(domElement)
{
    this.init = function(domElement)
    {
        this.items = new Array();
        breadcrumbBar = this;
        jQuery(domElement).children("li").each(function(i)
        {
            breadcrumbBar.items[i] = new BreadcrumbTab(this, breadcrumbBar);
        });
    }

    // need to do this to avoid non-predictable behaviour when hovering in and out of tabs quickly
    this.resetAll = function (element)
    {
        jQuery(this.items).each(function()
        {
            this.reset();
        });
    }

    this.init(domElement);
}

function BreadcrumbTab(domElement, breadcrumbBar)
{
    this.init = function(domElement, breadcrumbBar)
    {
        this.tab = jQuery(domElement);
        this.span = this.tab.children("span");
        this.arrowLink = this.span.children("a.dropDown");
        this.arrow = this.arrowLink.children("img.arrow");
        this.dropDown = this.tab.children("ul");

        this.tab.hover(callback(this, 'over'), callback(breadcrumbBar, 'resetAll'));
        this.dropDown.hover(callback(this, 'dropDownOver'), callback(breadcrumbBar, 'resetAll'));
        this.arrowLink.hover(callback(this, 'arrowOver'), callback(this, 'arrowOut'));
        this.arrowLink.click(callback(this, 'toggleDropDown'));
    }

    // these functions control behaviour
    this.over = function()
    {
        this.highlight(this.tab);
    }

    this.dropDownOver = function()
    {
        this.highlight(this.tab);
        this.showDropDown();
    }

    this.toggleDropDown = function()
    {
        if (this.isDropDownVisible())
        {
            this.hideDropDown();
        }
        else
        {
            this.showDropDown();
        }
    }

    this.arrowOver = function()
    {
        this.highlight(this.arrow);
    }

    this.arrowOut = function()
    {
        this.removeHighlight(this.arrow);
    }

    this.reset = function()
    {
        this.removeHighlight(this.tab);
        this.hideDropDown();
    }

    // these functions just apply styles

    this.highlight = function(element)
    {
        element.addClass("over");
    }

    this.removeHighlight = function(element)
    {
        element.removeClass("over");
    }

    this.isDropDownVisible = function()
    {
        return this.dropDown.hasClass("onScreen");
    }

    this.showDropDown = function()
    {
        this.dropDown.addClass("onScreen");
        this.span.addClass("shadow");
    }


    this.hideDropDown = function()
    {
        this.dropDown.removeClass("onScreen");
        this.span.removeClass("shadow");
    }

    this.init(domElement, breadcrumbBar);
}

function callback(object, methodName)
{
    var context = object;
    return function(param1, param2)
    {
        context[methodName](param1, param2);
        return false;
    }
}

function BreadcrumbResizer()
{
    var theBreadcrumbHeight = jQuery('#breadcrumbWrap').height();
    var theBreadcrumbLink = jQuery('#breadcrumb li a');
    var subBreadcrumbLinks = jQuery('#breadcrumb li ul li a');

    if (theBreadcrumbHeight > 40 && theBreadcrumbHeight < 75){
        theBreadcrumbLink.css("font-size", ".7em").css( "margin-top", "3px");
        subBreadcrumbLinks.css("font-size", "1em");
        return true;
    }
    
    if (theBreadcrumbHeight > 75){
        theBreadcrumbLink.css("font-size", ".55em").css( "padding-right", "2px").css( "padding-left", "2px").css( "margin-top", "3px");
        subBreadcrumbLinks.css("font-size", "1em");
        return true;
    }
}

$(function(){
    // run automatically the first time
    new BreadcrumbResizer();
});