/**
 * Tab management.
 *
 * @author Christian Hansen <christian@resource-it.dk>
 * @version 1.0
 * @package Resource it Modules
 * @copyright Resource it ApS
 * @uses lib.resext.js
 **/

    function TabControl (o) {

        //declaration of object variables used throughout the script:
        this.showTabMethod = "simple";
        this.zIndex = 1;
        this.tabs = [];
        this.selected = false;
        this.theme = resExt.theme.widgets.tabcontrol;

        this.tabBox = {
            box:document.createElement("div"),
            header:document.createElement("div"),
            content:document.createElement("div"),
            border:{}
        }//tabBox

        this.tabBox.box.style.position = "relative";
        this.tabBox.header.style.position = "absolute";
        this.tabBox.header.style.top = "0px";
        this.tabBox.header.style.left = this.theme.headerMarginLeft + "px";
        this.tabBox.header.style.height = this.theme.headerHeight + "px";
        this.tabBox.header.style.overflow = "hidden";
        this.tabBox.content.style.position = "absolute";

        if ( this.theme.border.topCenter.height !== undefined ) {
            this.tabBox.content.style.top = ( this.theme.headerHeight - this.theme.border.topCenter.height  + this.theme.contentMarginTop ) + "px";
        } else {
            this.tabBox.content.style.top = ( this.theme.headerHeight + this.theme.contentMarginTop ) + "px";
        }

        this.tabBox.content.style.left = this.theme.contentMarginLeft + "px";

        this.tabBox.box.appendChild(this.tabBox.header);
        this.tabBox.box.appendChild(this.tabBox.content);

        /*
            parametre, der skal kunne sættes:
            1. højde og bredde
            2. position, top og left
            3. overflowkontrol. - skal taben vokse eller afskære.

        */

        if ( o !== undefined ) this.appendTo(o);

    }//TabControl

    /**
     * Set size adjust the box size. This function i
     **/
    TabControl.prototype.setSize = function (width, height) {
        this.tabBox.box.style.width = width + "px";
        this.tabBox.box.style.height = height + "px";
        this.tabBox.header.style.width = ( width - ( this.theme.headerMarginLeft + this.theme.headerMarginRight ) ) + "px";
        this.tabBox.content.style.width = ( width - ( this.theme.contentMarginLeft + this.theme.contentMarginRight ) ) + "px";
        this.tabBox.content.style.height = ( height - ( this.theme.headerHeight + this.theme.contentMarginTop + this.theme.contentMarginBottom ) ) + "px";

        for ( var pos in this.theme.border ) {
            if ( this.tabBox.border[pos] === undefined ) {
                this.tabBox.border[pos] = document.createElement("img");
                this.tabBox.border[pos].style.position = "absolute";
                this.tabBox.box.appendChild(this.tabBox.border[pos]);
            }//if
            
	    if ( /\.png$/i.test(this.theme.border[pos].src) && /MSIE/.test(navigator.userAgent) ) {
		this.tabBox.border[pos].src = '/graphics/1x1_transparent.gif';
		this.tabBox.border[pos].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + resExt.theme.paths.graphics + this.theme.border[pos].src + "', sizingMethod='scale');"
	    } else this.tabBox.border[pos].src = resExt.theme.paths.graphics + this.theme.border[pos].src;

            switch ( pos ) {
                case "topLeft":
                    this.tabBox.border[pos].style.top = ( this.theme.headerHeight - parseInt( this.theme.border.topCenter.height ) ) + "px";
                    this.tabBox.border[pos].style.left = "0px";
                    this.tabBox.border[pos].style.width = this.theme.border[pos].width + "px";
                    this.tabBox.border[pos].style.height = this.theme.border[pos].height + "px";
                    break;
                case "topCenter":
                    this.tabBox.border[pos].style.top = ( this.theme.headerHeight - parseInt( this.theme.border.topCenter.height ) ) + "px";
                    this.tabBox.border[pos].style.left = this.theme.border.topLeft.width + "px";
                    this.tabBox.border[pos].style.width = width - ( this.theme.border.topLeft.width + this.theme.border.topRight.width ) + "px";
                    this.tabBox.border[pos].style.height = this.theme.border[pos].height + "px";
                    break;
                case "topRight":
                    this.tabBox.border[pos].style.top = ( this.theme.headerHeight - parseInt( this.theme.border.topCenter.height ) ) + "px";
                    this.tabBox.border[pos].style.right = "0px";
                    this.tabBox.border[pos].style.width = this.theme.border[pos].width + "px";
                    this.tabBox.border[pos].style.height = this.theme.border[pos].height + "px";
                    break;
            }

        }//for

    }//setSize;


    TabControl.prototype.setShowTabMethod = function ( showmethod ) {
        this.showTabMethod = showmethod;
    }//setShowTabFunction


    TabControl.prototype.add = function ( header, icon ) {
        if ( icon === undefined ) this.tabs[this.tabs.length] = new Tab( this, header, icon );
        else this.tabs[this.tabs.length] = new Tab( this, header );
        return this.tabs[this.tabs.length - 1];
    }//addTab


    TabControl.prototype.select = function () {

        switch ( this.showTabMethod ) {
            case "fade":
                break;
            default:
        }//switch

        /*
            1. sæt nye aktive tab til index 3 og gamle tab til index 0
            2. skift opacity
            3. set gamle tab til display:none;
        */
    }//showTab

    TabControl.prototype.appendTo = function (o) {
        if ( o.style.zIndex !== undefined ) this.zIndex = o.style.zIndex;

        this.tabBox.box.style.zIndex = this.zIndex + 1;
        this.tabBox.content.style.zIndex = this.zIndex + 2;
        this.tabBox.header.style.zIndex = this.zIndex + 3;

        o.appendChild(this.tabBox.box);
    }//appendTo 


    function Tab(tabcontrol, title, icon) {

        this.owner = tabcontrol;
        this.theme = resExt.theme.widgets.tabcontrol;

        this.offsetLeft = 0;
        for ( var c = 0; c < this.owner.tabs.length; c++ ) 
            this.offsetLeft += this.owner.tabs[c].width + this.theme.tabSpacing;

        //get width from tab images:
        var paddingLeft  = this.theme.tab0ImgLeftWidth > this.theme.tab1ImgLeftWidth ? this.theme.tab0ImgLeftWidth : this.theme.tab1ImgLeftWidth;
        var paddingRight = this.theme.tab0ImgRightWidth > this.theme.tab1ImgRightWidth ? this.theme.tab0ImgRightWidth : this.theme.tab1ImgRightWidth;

        this.content = document.createElement("div");
        this.content.style.position = "absolute";

        if ( this.owner.showTabMethod == "simple" ) this.content.style.display = "none"; 
        else { 
            this.content.style.opacity = 0;
            this.content.style.filter = "alpha(opacity=0)";
        }//else
        this.content.style.zIndex = 1;
        this.content.style.width = this.owner.tabBox.content.style.width;
        this.content.style.height = this.owner.tabBox.content.style.height;
        this.owner.tabBox.content.appendChild(this.content);

        for ( var c = 0; c < 2; c++ ) {

            var tab  = this["tab" + c] = document.createElement("div");
            var text = this["tab" + c + "content"] = document.createElement("span");
            
            text.style.position = "absolute";
            text.style.left = ( paddingLeft + this.theme.tabPaddingH ) + "px";
            text.style.top = this.theme["tab" + c + "PaddingTop"] + "px";
            text.style.fontSize = this.theme["tab" + c + "FontSize"];
            text.style.fontFamily = this.theme["tab" + c + "FontFamily"];
            text.style.color = this.theme["tab" + c + "FontColor"];
            text.style.fontWeight = this.theme["tab" + c + "FontWeight"];
            text.innerHTML = title;

            tab.appendChild(text);
            this.owner.tabBox.header.appendChild(tab);

            this.width = text.offsetWidth + paddingLeft + paddingRight + ( 2 * this.theme.tabPaddingH );
            tab.style.width = this.width + "px";
            tab.style.height = this.theme.headerHeight + "px";
            
            tab.style.position = "absolute";
            tab.style.top = "0px";
            tab.style.left = this.offsetLeft + "px";
            if ( this.owner.showTabMethod == "simple" ) tab.style.display = c == 1 ? "none" : "block"; 
            else {
                tab.style.opacity = (1 - c);
                tab.style.filter = "alpha(opacity=" + Math.round(100 * tab.style.opacity) + ")";
            }//else

            tab.style.cursor = "default";
            resExt.addEventHandler(tab,"click",this.select.bind(this));


            text.style.zIndex = 2;

            var tabimages = {
                Left    :{left:(paddingLeft - this.theme["tab" + c + "ImgLeftWidth"]) + "px",width:this.theme["tab" + c + "ImgLeftWidth"] + "px"},
                Right   :{right:(paddingRight - this.theme["tab" + c + "ImgRightWidth"]) + "px",width:this.theme["tab" + c + "ImgRightWidth"] + "px"},
                Center  :{left:paddingLeft,width:(this.width - (paddingLeft + paddingRight) + "px")}
            };

            for ( var image in tabimages) {
                var img = new Image();
		if ( /\.png$/i.test(resExt.theme.paths.graphics + this.theme["tab" + c + "Img" + image]) && /MSIE/.test(navigator.userAgent) ) {
			img.src = '/graphics/1x1_transparent.gif';
			img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + resExt.theme.paths.graphics + this.theme["tab" + c + "Img" + image] + "', sizingMethod='scale');";
		} else {
                    img.src = resExt.theme.paths.graphics + this.theme["tab" + c + "Img" + image];
		}
                    img.style.position = "absolute";
                    img.style.top = "0px";
                    img.style.zIndex = 0;
                    img.style.height = this.theme.headerHeight + "px";
                    for ( var style in tabimages[image] ) {
                        img.style[style] = tabimages[image][style];
                    }//for
                tab.appendChild(img);
            }//for

        }//for

    }//Tab

    Tab.prototype.select = function () {

        if ( this.owner.selected !== this ) {

            if ( this.owner.showTabMethod == "fade" ) {

                setTimeout(function() {

                    var steps = this.owner.showTabMethod == "fade" ? .2 : 1;

                    if ( parseFloat(this.tab1.style.opacity) < 1 ) {
                        if ( this.owner.selected !== false ) {
                            this.owner.selected.tab0.style.opacity = parseFloat(this.owner.selected.tab0.style.opacity) + steps;
                            this.owner.selected.tab0.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.owner.selected.tab0.style.opacity) * 100 ) + ")";
                            this.owner.selected.tab1.style.opacity = parseFloat(this.owner.selected.tab1.style.opacity) - steps;
                            this.owner.selected.tab1.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.owner.selected.tab1.style.opacity) * 100 ) + ")";
                            this.owner.selected.content.style.opacity = parseFloat(this.owner.selected.content.style.opacity) - steps;
                            this.owner.selected.content.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.owner.selected.content.style.opacity) * 100 ) + ")";
                        }//if

                        this.tab0.style.opacity = parseFloat(this.tab0.style.opacity) - steps;
                        this.tab0.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.tab0.style.opacity) * 100 ) + ")";
                        this.tab1.style.opacity = parseFloat(this.tab1.style.opacity) + steps;
                        this.tab1.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.tab1.style.opacity) * 100 ) + ")";
                        this.content.style.opacity = parseFloat(this.content.style.opacity) + steps;
                        this.content.style.filter = "alpha(opacity=" + Math.round( parseFloat(this.content.style.opacity) * 100 ) + ")";
                        setTimeout(arguments.callee.bind(this),40);
                    } else {
                        this.owner.selected = this;
                    }
                }.bind(this),40);

            } else {
                if ( this.owner.selected !== false ) {
                    this.owner.selected.tab0.style.display = "block";
                    this.owner.selected.tab1.style.display = this.owner.selected.content.style.display = "none";
                }//if

                this.tab0.style.display = "none";
                this.tab1.style.display = this.content.style.display = "block";
                this.owner.selected = this;
            }//else
        }//if
    }//select

    Tab.prototype.appendHTML = function(html) {
        this.content.innerHTML = html;
    }//appendHTML