/* Usage:

*/

function Tabs(element){
    this.element = $(element);
    this.element.tab = this;
    this.element.setStyle("float:left;overflow:hidden");
    this.ul = $$("#" + this.element.id +" .tabs_ul")[0];
    this.ul.setStyle("padding:0px;margin:0px;");
    this.tabs = $$("#" + this.element.id +" .tabs_tab");
    
    this.tabs.each(function(elem, index){
       // elem.setStyle("left:-"+(index*20)+"px");
        elem.setStyle("display:inline;position:relative");
//        elem.setStyle("border:1px solid white");
        elem.index = index;
        elem.observe("click", function(ev){
            var index = ev.target.index;
            if (index == undefined)
                index = ev.target.parentNode.index;
            FindMyTab(ev.target).tabClicked(index);
        });
    });
    this.pages = $$("#"+this.element.id + " .tabs_pages")[0];
    this.pages.setStyle("clear:left");
    this.pages.setStyle("height:" + (this.element.getHeight()-38) + "px;");
    
    this.page = $$("#"+this.element.id + " .tabs_page");
    this.page.each(function(elem, index){
        elem.setStyle("position:relative");
        elem.setStyle("width:" +elem.parentNode.getWidth()+ "px");
        elem.setStyle("height:"+elem.parentNode.getHeight()+"px");
        //elem.setStyle("position:absolute;left:0px");
        elem.setStyle("top:0px");
        //elem.setStyle("top:-"+(index*elem.getHeight())+"px;");
        //elem.setStyle("left:-" + (index*elem.getWidth()) + "px;");
    });
    this.element.setOpacity(1);
    this.tabClicked = function(index){
        this.tabs.each(function(elem, idx){
            elem.setStyle("z-index:0");
            elem.setStyle("font-weight:normal;");
        });
         this.page.each(function(elem, idx){
            elem.hide();
        });
        this.tabs[index].setStyle("z-index:1");
        this.tabs[index].setStyle("font-weight:bold;");
        this.page[index].show();
        
    }
//    this.tabStarts = $$("#" + this.element.id +" .tabs_tab_start");
//    this.tabStarts.each(function(elem, index){
//        elem.setStyle("background: transparent url(/tabs/grad-green-start.png) no-repeat center center ;");
//        elem.setStyle("width: 18px;");
//        elem.setStyle("height: 38px;");
//        elem.setStyle("float:left;");
//        elem.setStyle("cursor:pointer");
//    });
//    this.tabMids = $$("#" + this.element.id +" .tabs_tab_mid");
//    this.tabMids.each(function(elem, index){
//        elem.setStyle("background: transparent url(/tabs/grad-green-mid.png) repeat-x center center;");
//        elem.setStyle("float:left;");
//    	elem.setStyle("height: 38px;");
//    	elem.setStyle("cursor:pointer;");
//    	elem.setStyle("padding-left:3px;");
//    	elem.setStyle("padding-right:3px;");
//    	
//    });
//    this.tabEnds = $$("#" + this.element.id +" .tabs_tab_end");
//    this.tabEnds.each(function(elem, index){
//        elem.setStyle("background: transparent url(/tabs/grad-green-end.png) no-repeat center center ;");
//        elem.setStyle("width: 18px;");
//        elem.setStyle("height: 38px;");
//        elem.setStyle("float:left;");
//        elem.setStyle("cursor:pointer");
//    });
    this.tabClicked(0);
}
function FindMyTab(tabElement){
    tabElement = $(tabElement);
    var node = tabElement;
    while (node != undefined && node.tab == undefined){
        node = node.parentNode;
    }    
    return node.tab;
}