﻿tabimg          = 'url(/images/greyTab.aspx)'
tabselectedimg  = 'url(/images/redTab.aspx)'

var hideFunction = function() {
    this.setStyle('display', 'none');
}
var showFunction = function() {   
    $$('.hidden').setStyle('display', 'none'); 
    this.setStyle('display', 'block');    
}
var setSelected = function() {
    tabOne      = $('infoTabOne');
    tabTwo      = $('infoTabTwo');
    tabThree    = $('infoTabThree')
    tabFour     = $('infoTabFour')
    
    tabOne.setStyle('background-image', tabimg);
    tabTwo.setStyle('background-image', tabimg);
    tabThree.setStyle('background-image', tabimg);
    tabFour.setStyle('background-image', tabimg);  
    
    this.setStyle('background-image', tabselectedimg);
    $('ctl00_hiddenSelectedTab').value = this.id;
}
window.addEvent('domready', function() {
    elOne       = $('contentone');
    elTwo       = $('contenttwo');
    elThree     = $('contentthree');
    elFour      = $('contentfour');
    
    tabOne      = $('infoTabOne');
    tabTwo      = $('infoTabTwo');
    tabThree    = $('infoTabThree');
    tabFour     = $('infoTabFour');
    hiddenField = $('ctl00_hiddenSelectedTab');
 
    tabOne.addEvent('click',   showFunction.bind(elOne));	
    tabTwo.addEvent('click',   showFunction.bind(elTwo));	
    tabThree.addEvent('click', showFunction.bind(elThree));	
    tabFour.addEvent('click',  showFunction.bind(elFour));

    if(hiddenField.value == "")
    {
        tabOne.fireEvent('click');
        tabOne.setStyle('background-image', tabselectedimg);
    }
    else
    {
        $(hiddenField.value).fireEvent('click');
        $(hiddenField.value).setStyle('background-image', tabselectedimg);
    }
    
    tabOne.addEvent('click',   setSelected.bind(tabOne));
    tabTwo.addEvent('click',   setSelected.bind(tabTwo));
    tabThree.addEvent('click', setSelected.bind(tabThree));
    tabFour.addEvent('click',  setSelected.bind(tabFour));    
});
