var nav = new Class({	
    options: 
	{	
	},  
    initialize:function(options)
    {
        this.setOptions(options);
        this.wrapper = $('wrapper');
        this.topDiv = $('topDiv');
        this.bottomDiv = $('bottomDiv')
        this.contentDiv = $('contentDiv');
        this.tab = $('tab');       
        this.leftDiv = $('leftDiv');        
        this.leftDivImage = $('leftDivImage');  
        this.rightDiv = $('rightDiv');
        this.rightDivImage = $('rightDivImage');              
        this.tabs = $$(this.options.tabs);
        this.content = $$(this.options.content);
        this.currentTab = 0;
        this.contentHeights = [];
        this.fx = 
        {
            left:this.leftDiv.effects({duration: 500,transition: Fx.Transitions.Cubic.easeInOut,wait: false}),
            leftImage:this.leftDivImage.effects({duration: 500,transition: Fx.Transitions.Cubic.easeInOut,wait: false}),
            right:this.rightDiv.effects({duration: 500,transition: Fx.Transitions.Cubic.easeInOut,wait: false}),
            rightImage:this.rightDivImage.effects({duration: 500,transition: Fx.Transitions.Cubic.easeInOut,wait: false}),
            contentDiv:this.contentDiv.effects({duration: 500,transition: Fx.Transitions.Cubic.easeInOut,wait: false})
        };              
        this.tabs.each(
            function(el,index)
            {                
                    el.addEvent('click', 
                    function()
                    {		        
                        this.click(index);
                    }.bind(this));
            },this            
        );  
        this.images = new Asset.images(this.options.images,
        {
            onComplete: function()
            {
                this.build();
            }.bind(this)
        });                              
		if (this.options.initialize) 
		{
		    this.options.initialize.call(this);
		}                
    },
    build:function()
    {                                  
        this.content.each(
            function(page,index)
            {
                var leftHeight = $(page.id + 'Left').getSize().size.y;
                var rightHeight = $(page.id + 'Right').getSize().size.y
                var height = (leftHeight > rightHeight)? leftHeight:rightHeight;
                this.contentHeights[index] = height + 50;            
                page.setStyle('display','none');    
            }.bind(this)
        );        
        
        this.content[0].setStyle('display','block');
        this.wrapper.setStyle('width',this.images[0].width);
        this.contentDiv.setStyles({'width':this.images[0].width - (2 * this.images[7].width),'height':this.contentHeights[0]});
        this.topDiv.setStyles({'width':this.images[0].width,'height':this.images[0].height});        
        this.leftDiv.setStyles({'width':this.images[7].width,'height':this.contentHeights[0]});
        this.leftDivImage.setStyles({'width':this.images[7].width,'height':this.contentHeights[0]});
        this.rightDiv.setStyles({'width':this.images[7].width,'height':this.contentHeights[0]});
        this.rightDivImage.setStyles({'width':this.images[7].width,'height':this.contentHeights[0]});
        this.bottomDiv.setStyles({'width':this.images[8].width,'height':this.images[8].height});
                       
        $('contentWrapper').effect('opacity',{duraton:500}).start(0,1).chain
        (   
            function()
            {
                this.content[0].setStyle('visibility','visible');
            }.bind(this)
        );      
                                
    },
    click:function(tab)
    {
        if($defined(window.mailForm))
        {
            if(window.mailForm.getClientState() == 1)
            {
                return;
            }
        }
        if(tab == this.currentTab)
        {
            return;
        }      
        this.content[tab].setStyle('visibility','hidden');
        //this.content[tab].setStyle('height',this.content[this.currentTab].getSize().size.y);
        this.content[this.currentTab].setStyle('display','none');
                       
        this.tabs[tab].getFirst().src = this.options.images[15 + tab]
        if(this.currentTab > 0)
        {
            this.tabs[this.currentTab].getFirst().src = this.options.images[9 + this.currentTab]; 
                                   
        } 
    
        this.currentTab = tab;
        this.tab.src = this.options.images[tab];        

        this.fx.contentDiv.start({'height':this.contentHeights[tab]}).chain
        (   
            function()
            {
                this.content[tab].setStyle('display','block'); 
                this.content[tab].setStyle('visibility','visible');
            }.bind(this)
        );      
        this.fx.left.start({'height':this.contentHeights[tab]});
        this.fx.leftImage.start({'height':this.contentHeights[tab]});
        this.fx.right.start({'height':this.contentHeights[tab]});
        this.fx.rightImage.start({'height':this.contentHeights[tab]});
    },
    selectTab:function(index)
    {
        this.click(index);
    }
    
});
nav.implement(new Events, new Options);  

function InitNav() 
{        
    var img = [];
    img[0] = 'images/tabDefault.png';
    img[1] = 'images/tabWho.png';
    img[2] = 'images/tabWhat.png';
    img[3] = 'images/tabHow.png';
    img[4] = 'images/tabContact.png';
    img[5] = 'images/tabWork.png';
    img[6] = 'images/tabMisc.png';    
    img[7] = 'images/right.png';
    img[8] = 'images/bottom.png';
    img[9] = 'images/spacer.gif';
    img[10] = 'images/textWho.png';
    img[11] = 'images/textWhat.png';
    img[12] = 'images/textHow.png';
    img[13] = 'images/textContact.png';
    img[14] = 'images/textWork.png';
    img[15] = 'images/textMisc.png';
    img[16] = 'images/_textWho.png';
    img[17] = 'images/_textWhat.png';
    img[18] = 'images/_textHow.png';
    img[19] = 'images/_textContact.png';
    img[20] = 'images/_textWork.png';
    img[21] = 'images/_textMisc.png';
 
    
    window.navigation = new nav({ 
        images:img,        
        tabs:['tabDefault','tabWho','tabWhat','tabHow','tabContact','tabWork','tabMisc'],
        content:['contentDefault','contentWho','contentWhat','contentHow','contentContact','contentWork','contentMisc']
    });       	            
}