var header = null;

var EventType = {TopItemRollover:'HRollover',ItemRollout:'HRollout'};

function ThirdLevelList(divNode, topListNode, secondLevel) {
    this.divNode = divNode;
    this.topListNode = topListNode;
    this.thirdLevelList = this.divNode.find('ul');
    this.anchors = this.divNode.find('a');
    this.showID = null;
    this.hideID = null;
    this.secondLevel = secondLevel;

    if (this.divNode == null || this.divNode.length <= 0 ||
        this.topListNode == null || this.topListNode.length <= 0)
        return;
    
    var that = this;
    
    this.anchors.hover(
        function() {
            $(this).addClass('HeaderMenuItemHover');
            $(this).addClass('WhiteColor');
        },
        function() {
            $(this).removeClass('HeaderMenuItemHover');
            $(this).removeClass('WhiteColor');
        }
    );
    
    this.Show = function(anchorWidth) {
        var delay = 0;
        if (that.secondLevel.showingThirdLevel)
            return;
            delay = 150;
        
        if (that.showID != null)
            return;

        that.showID = setTimeout(function() {
            if (!that.secondLevel.hovering)
            {
                that.showID = null;
                return;
            }
            
            that.showID = null;
            that.secondLevel.showingThirdLevel = true;
            var left = 0 + anchorWidth;
            var top = 0 + 'px';
            that.divNode.css({ position:'absolute', left:left, top:top, 'z-index':12});
            that.divNode.show();
            var height = that.thirdLevelList.height();
            if (height < topListNode.height())
                that.thirdLevelList.height(topListNode.height());
        }, delay);
    }
    this.Hide = function() {
        if (that.hideID != null)
            return;

        that.divNode.css('z-index', '');
        that.hideID = setTimeout(function() {  
            if (that.secondLevel.hovering)
            {
                that.hideID = null;
                return;
            }
            that.hideID = null;
            that.divNode.fadeOut(100, function() {
                    that.secondLevel.showingThirdLevel = false;
                that.divNode.hide();
                that.divNode.removeAttr('style');
            });
        }, 150);
    }
    
    this.Overflows = function(anchorWidth) {
        var left = 0 + anchorWidth;
        var top = 0 + 'px';
        that.divNode.css({ position:'absolute', left:left, top:top, 'z-index':12});
        that.divNode.show();
        
        var offset = that.divNode.offset();        
        
        that.divNode.hide();
        that.divNode.removeAttr('style');
        
        return offset.left > 975;
    }
}

function SecondLevelItem(divNode, secondLevelList, bottomItem) {
    this.divNode = divNode;
    this.anchor = divNode.find('a.secondLevelLink');
    this.thirdLevelNode = this.divNode.find(".HB_ThirdLevelList");
    this.thirdLevelList = null;
    this.secondLevelList = secondLevelList;
    this.hovering = false;
    this.showingThirdLevel = false;
    this.bottomItem = bottomItem;
    
    this.hasThirdLevel = function() {
        return this.thirdLevelNode != null && this.thirdLevelNode.length > 0;
    }
    if (this.hasThirdLevel()) {
        this.thirdLevelList = new ThirdLevelList(this.thirdLevelNode, this.secondLevelList, this);
    }
    
    var that = this;    
    this.divNode.hover(
        function() {
            that.hovering = true;
            $(this).addClass('HeaderMenuItemHover');
            that.anchor.addClass('WhiteColor');
            if (that.hasThirdLevel()) {
                var left = that.anchor.outerWidth();
                if (bottomItem.overflows)
                    left = -1 * $(that.thirdLevelNode).outerWidth();
                that.thirdLevelList.Show(left);
            }
        },
        function() {
            that.hovering = false;
            $(this).removeClass('HeaderMenuItemHover');
            that.anchor.removeClass('WhiteColor');    
            if (that.hasThirdLevel())
                that.thirdLevelList.Hide();
        }
    );
    
    this.Overflows = function() {
        if (!that.hasThirdLevel())
            return false;
        
        return that.thirdLevelList.Overflows(that.anchor.outerWidth());
    }
}

function BottomItem(divNode, index, header) {
    this.div = divNode;
    this.index = index;
    this.parent = header;
    this.linkNode = this.div.find("a.HeaderBottomTitle");
    this.listNode = this.div.find("ul.SecondLevelUL");
    this.menuNodes = new Array();
    this.normalWidth = $(this.linkNode).outerWidth() + 0.3;
    this.overflows = false;
    
    var that = this;
    this.div.hover(
        function() {
            $(that.linkNode).addClass("HeaderTopTitleHover");
            $(that.linkNode).addClass('HeaderBottomTitleHover');
            $(that.listNode).addClass("displayed");
            var listWidth = $(that.listNode).width() + 0;
            $(that.listNode).css({'z-index':10, position:'relative'});
            $(this).width(that.normalWidth);
            that.listNode.width(Math.max(that.normalWidth-2, listWidth));
            //$(that.listNode).width(Math.max($(this).width()-1, listWidth));

            if (that.overflows) {
                $(that.listNode).css({'margin-left': -1 * listWidth + that.normalWidth -2 + 'px',
                                      'text-align':'right'});
            }            
        },
        function() {
            $(that.linkNode).removeClass("HeaderTopTitleHover");
            $(that.linkNode).removeClass('HeaderBottomTitleHover');
            $(that.listNode).removeClass("displayed");
            $(this).removeAttr('style');
            $(that.listNode).removeAttr('style');
        }
    );

    var maxWidth = 0;
    this.div.find("li").each(function(i) {
            var secondLevelItem = new SecondLevelItem($(this).find('div.HB_SecondItem'), that.listNode, that);
            that.menuNodes[that.menuNodes.length] = secondLevelItem;
            if ($(this).outerWidth() > maxWidth)
                maxWidth = $(this).outerWidt();
        });

    if (this.menuNodes.length > 0) {
        var thirdLevelOverflows = false;
        
        $(that.linkNode).addClass("HeaderTopTitleHover");
        $(that.linkNode).addClass('HeaderBottomTitleHover');
        $(that.listNode).addClass("displayed");
        var listWidth = $(that.listNode).width() + 0;
        $(that.listNode).css({'z-index':10, position:'relative'});
        $(that.div).width(that.normalWidth);
        //alert(listWidth);
        that.listNode.width(Math.max(that.normalWidth-2, listWidth));
        
        thirdLevelOverflows = false;
        var i;
        for (i = 0; i < that.menuNodes.length; i++) {
            if (that.menuNodes[i].hasThirdLevel())
                thirdLevelOverflows = that.menuNodes[i].Overflows();
            
            if (thirdLevelOverflows)
                break;
        }
        
        $(that.linkNode).removeClass("HeaderTopTitleHover");
        $(that.linkNode).removeClass('HeaderBottomTitleHover');
        $(that.listNode).removeClass("displayed");
        $(that.div).removeAttr('style');
        $(that.listNode).removeAttr('style');
        
        if (thirdLevelOverflows) {
            this.overflows = true;
        }
    }    
}


function CarDetail(divNode, anchor, topItem, vehicleLink) {
    this.divNode = divNode;
    this.anchor = anchor;
    this.carPhoto = this.divNode.find('div .HeaderCarDetailPhoto');
    this.colourChips = this.divNode.find('div.HCD_ColourChip a');
    this.showID = null;
    this.hideID = null;
    this.topItem = topItem;
    this.vehicleLink = vehicleLink;
    
    var that = this;
    this.colourChips.each(function(i) {
            $(this).hover(
                function() {
                    var name = $(this).find('div.chipname').text();
                    var thumb = $(this).find('div.thumbnail').text();
                    that.carPhoto.attr('alt', name);
                    that.carPhoto.attr('title', name);
                    that.carPhoto.attr('src', thumb);
                },
                function() {
                }
            );
    });
    
    this.Reset = function() {
        this.colourChips.each(function(i) {
                if (i == 0)
                {
                    var name = $(this).find('div.chipname').text();
                    var thumb = $(this).find('div.thumbnail').text();
                    that.carPhoto.attr('alt', name);
                    that.carPhoto.attr('title', name);
                    that.carPhoto.attr('src', thumb);
                }
        });
    };
    
    this.Show = function(x, y) {
        var delay = 0;
        if (that.topItem.showingCarDetail)
            delay = 150;
        
        if (that.showID != null)
            return;
        
        that.showID = setTimeout(function() {
                if (!that.vehicleLink.hovering)
                {
                    that.showID = null;
                    return;
                }
            that.topItem.showingCarDetail = true;
            that.showID = null;
            
            that.divNode.css({ position:'absolute', left:x, top:y, 'z-index':11});
            that.Reset();
            that.divNode.fadeIn(0);
        }, delay);
    };
    this.Hide = function() {
        if (that.hideID != null)
            return;
        
        that.divNode.css('z-index', '');
        that.hideID = setTimeout(function() {
                if (that.vehicleLink.hovering)
                {
                    that.hideID = null;
                    return;
                }
                that.topItem.showingCarDetail = false;
                that.hideID = null;
                that.divNode.fadeOut(250, function() {that.showID = null; that.divNode.removeAttr('style');});
        }, 150);
    };
    
    this.Overflows = function(x) {
        that.divNode.css({ position:'absolute', left:x});
        that.divNode.show();
        var offset = that.divNode.offset();

        that.divNode.removeAttr('style');
        
        return offset.left > 975;
    }
}

function VehicleLink(listItemNode, topLink, topItem) {
    this.listItemNode = listItemNode;
    this.anchor = this.listItemNode.find("div.HeaderMenuItem");
    this.carDetailNode = this.listItemNode.find("div.HeaderCarDetail");
    
    this.listNode = this.anchor.find(":parent:parent:parent");
    this.topLink = topLink;
    this.topItem = topItem;
    this.hovering = false;
    
    this.carDetail = new CarDetail(this.carDetailNode, this.anchor, this.topItem, this);
    
    var that = this;
    this.listItemNode.hover(
        function() {
            that.hovering = true;
            var left = that.anchor.outerWidth();
            if (topItem.overflows)
                left = -1 * $(that.carDetailNode).outerWidth();
            var top = that.topLink.outerHeight();
            that.carDetail.Show(left, top);
            
            that.anchor.addClass('WhiteColor');

            $(this).find('div.HT_Div').addClass('HeaderMenuItemHover');
        },
        function() {
            that.hovering = false;
            that.carDetail.Hide();
            
            that.anchor.removeClass('WhiteColor');

            $(this).find('div.HT_Div').removeClass('HeaderMenuItemHover');            
        }
    );
    
    this.Reset = function() {
        that.carDetail.Hide();
    };
    
    this.Overflows = function() {
        var left = that.anchor.outerWidth();
        return this.carDetail.Overflows(left);
    }
}

function TopItem(divNode, index, header) {
    this.div = divNode;
    this.index = index;
    this.parent = header;
    this.linkNode = this.div.find("a.HeaderTopTitle");
    this.listNode = this.div.find("ul");
    this.vehicleNodes = new Array();
    this.normalWidth = $(this.linkNode).outerWidth() + 0.5;
    this.showingCarDetail = false;
    this.overflows = false;
    
    var that = this;
    this.div.hover(
        function() {
            $.each(that.vehicleNodes, function() {$(this)[0].Reset();});
            
            $(that.linkNode).addClass("HeaderTopTitleHover");
            $(that.listNode).addClass("displayed");
            var listWidth = $(that.listNode).width() + 1;
            $(that.listNode).css({'z-index':10, position:'relative'});
            if (that.overflows) {
                $(that.listNode).css({'margin-left': -1 * listWidth + that.normalWidth -2 + 'px',
                                      'text-align':'right'});
            }
            $(this).width(that.normalWidth);
            $(that.listNode).width(listWidth);
        },
        function() {
            $(that.linkNode).removeClass("HeaderTopTitleHover");
            $(that.listNode).removeClass("displayed");
            $(this).removeAttr('style');
            $(that.listNode).removeAttr('style');
        }
    );
    

    var maxWidth = 0;
    this.div.find("li").each(function(i) {
            var vehicleLink = new VehicleLink($(this), $(this).find("div"), that);
	        that.vehicleNodes[that.vehicleNodes.length] = vehicleLink;
            if ($(this).outerWidth() > maxWidth)
                maxWidth = $(this).outerWidt();
    });
    
    if (this.vehicleNodes.length > 0) {
        $(that.linkNode).addClass("HeaderTopTitleHover");
        $(that.listNode).addClass("displayed");
        var listWidth = $(that.listNode).width() + 1;
        $(that.listNode).css({'z-index':10, position:'relative'});
        $(that.div).width(that.normalWidth);
        $(that.listNode).width(listWidth);
        
        var detailOverflows = this.vehicleNodes[0].Overflows();
        $(that.linkNode).removeClass("HeaderTopTitleHover");
        $(that.listNode).removeClass("displayed");
        $(that.div).removeAttr('style');
        $(that.listNode).removeAttr('style');
        
        if (detailOverflows) {
            this.overflows = true;
        }
    }
}

function Header() {
	this.top = $('#HeaderTop');
	this.topItems = new Array();
	this.bottom = $('#HeaderBottom');
	this.bottomItems = new Array();

	header = this;
	var that = this;
	this.top.find("div.HeaderTopItem").each(function(i){
	        var topItem = new TopItem($(this), i, that);
	        that.topItems[that.topItems.length] = topItem;	        
	    });
	this.bottom.find("div.HeaderBottomItem").each(function(i) {
	        var bottomItem = new BottomItem($(this), i, that);
	        that.bottomItems[that.bottomItems.length] = bottomItem;
	    });
}

$(function() {
   // do something on document ready
   header = new Header();
 });