function HeaderDisplay(destinationElement)
{
    this.destinationElement = destinationElement;

    this.itemBar = null;
    this.itemBarContent = null;
    this.imageFront = null;
    this.imageBack = null;
    this.pauseIndicator = null;

    this.item = Array();
    this.currentItem = -1;

    this.slideSpeed = 1000;
    this.delay = 4000;
    this.timeoutId = null;

    this.initialize = function(){

        var anchor = this.destinationElement.getElements("a");
        for( var i = 0; i < anchor.length; i++ )
        {
            var image = anchor[i].getElement("img");
            if( image != null )
            {
                var span = new Element("span");
                span.innerHTML = anchor[i].getAttribute("title");

                var titleAnchor = new Element("a");
                titleAnchor.setAttribute("href",anchor[i].getAttribute("href"));
                titleAnchor.setAttribute("title",anchor[i].getAttribute("title"));
                span.inject(titleAnchor);
                titleAnchor.itemIndex = i;
                titleAnchor.instance = this;
                titleAnchor.addEvent("mouseenter",function(){
                    this.instance.show(this.itemIndex);
                });
                titleAnchor.fx = new Fx.Tween(titleAnchor,{
                    wait: false,
                    duration: this.slideSpeed
                });

                var preloader = new Image();
                preloader.src = image.getAttribute("src");

                this.item[this.item.length] = Array(titleAnchor,image.getAttribute("src"),preloader);
            }
        }

        this.destinationElement.empty();
        this.destinationElement.removeClass("hidden");

        this.imageBack = new Element("div");
        this.imageBack.addClass("imageholder");
        this.imageBack.fx = new Fx.Tween(this.imageBack,{
            wait: false,
            duration: this.slideSpeed
        });

        this.imageBack.inject(this.destinationElement);

        this.imageFront = new Element("div");
        this.imageFront.addClass("imageholder");
        this.imageFront.instance = this;
        this.imageFront.fx = new Fx.Tween(this.imageFront,{
            wait: false,
            onComplete: function(el){
                el.instance.imageFront.setStyle("background-image",el.instance.imageBack.getStyle("background-image"));
            },
            duration: this.slideSpeed
        });
        this.imageFront.inject(this.destinationElement);

        this.itemBar = new Element("div");
        this.itemBar.addClass("itembar");
        this.itemBar.setStyle("margin-top",41);
        this.itemBar.instance = this;
        this.itemBar.fx = new Fx.Tween(this.itemBar,{
            wait: false,
            duration: this.slideSpeed/2,
            onComplete: function(el){
                
                //el.instance.updateItemBarWidth();
                el.instance.updateItemBarContent();
            }
        });
        this.itemBar.inject(this.destinationElement);

        this.itemBarContent = new Element("div");
        this.itemBarContent.fx = new Fx.Tween(this.itemBarContent,{wait:false});
        this.itemBarContent.addClass("itembarcontent");
        this.itemBarContent.inject(this.itemBar);

        this.pauseIndicator = new Element("div");
        this.pauseIndicator.addClass("pauseindicator");
        this.pauseIndicator.inject(this.destinationElement);
        this.pauseIndicator.fx = new Fx.Tween(this.pauseIndicator,{
            wait: false,
            onComplete: function(el){
                if( el.isVisible == true )
                {
                    if( el.getStyle("opacity") == 0.3 )
                    {
                        el.fx.start.delay(1000,el.fx,Array("opacity",0.6));
                    }
                    else
                    {
                        el.fx.start("opacity",0.3);
                    }
                }
                else if( el.getStyle("opacity") != 0 )
                {
                    el.fx.start("opacity",0);
                }
            }
        });
        this.pauseIndicator.fx.set("opacity",0);
        this.pauseIndicator.instance = this;
        this.pauseIndicator.isVisible = false;

        this.currentItem = 0;
        this.renderCurrent();

        this.play();

        this.itemBar.instance = this;
        this.itemBar.addEvent("mouseenter",function(){
            this.instance.pause();
        });

        this.itemBar.addEvent("mouseleave",function(){
            this.instance.play();
        });
    }

    this.renderCurrent = function(animate){
        this.imageFront.fx.set("opacity",1);
        this.imageFront.setStyle("background-image",this.imageBack.getStyle("background-image"));    
        this.imageBack.setStyle("background-image","url('" + this.item[this.currentItem][1] + "')");
        this.imageFront.fx.start("opacity",[1,0]);

        if( animate == false )
        {
            this.updateItemBarContent();
        }
        else
        {
            this.itemBar.fx.start("margin-top",41);
        }
        
    }

    this.updateItemBarContent = function(){

        var startItem = this.currentItem;
        var endItem = this.currentItem+3;

        if( endItem >= this.item.length )
        {
            var diff = endItem-this.item.length;
            endItem = this.item.length;
            startItem -= diff;
            if( startItem < 0 )
            {
                startItem = 0;
            }
        }

        for( var i = 0; i < this.item.length; i++ )
        {
            if(( i >= startItem ) && ( i < endItem ))
            {
                if( this.itemBarContent.hasChild(this.item[i][0]) == false )
                {
                    this.item[i][0].inject(this.itemBarContent);
                }
                else
                {
                    this.item[i][0].fx.set("width",this.item[i][0].requiredWidth);
                }
            }
            else
            {
                if( this.itemBarContent.hasChild(this.item[i][0]) == true )
                {
                    if( this.item[i][0].requiredWidth == null )
                    {
                        this.item[i][0].requiredWidth = this.item[i][0].offsetWidth;
                    }
                    this.item[i][0].fx.set("width",0);
                }
            }
            if( i != this.currentItem )
            {
                this.item[i][0].removeClass("active");
            }
        }

        this.updateActiveArrow();
        this.updateItemBarWidth();
    }

    this.updateActiveArrow = function(){
        this.item[this.currentItem][0].addClass("active");

        var left = this.item[this.currentItem][0].offsetLeft;
        left += Math.floor(this.item[this.currentItem][0].offsetWidth/2);
        left -= 6;

        //this.itemBarContent.fx.set("background-position",left + "px 4px");
    }

    this.updateItemBarWidth = function(){
        var anchor = this.itemBar.getElements("a");
        var newWidth = 1;
        for( var i = 0; i < anchor.length; i++ )
        {
            newWidth += anchor[i].offsetWidth;
        }

        if( newWidth != parseInt(this.itemBar.getStyle("width")) )
        {
            this.itemBarContent.fx.start("background-position","901px 4px");
        }

        this.itemBar.fx.set("width",newWidth);
        this.itemBar.fx.start("margin-top",0);
    }

    this.next = function(){
        this.currentItem++;
        if( this.currentItem >= this.item.length )
        {
            this.currentItem = 0;
        }
        this.renderCurrent();
    }

    this.play = function(){
        this.pauseIndicator.isVisible = false;
        if( this.timeoutId == null )
        {
            this.timeoutId = this.next.periodical(this.delay+this.slideSpeed,this);
        }
    }

    this.pause = function(){
        this.pauseIndicator.isVisible = true;
        this.pauseIndicator.fx.start("opacity",0.6);
        if( this.timeoutId != null )
        {
            $clear(this.timeoutId);
            this.timeoutId = null;
        }
    }

    this.show = function(itemIndex){
        this.currentItem = itemIndex;
        this.renderCurrent(false);
    }
}