if (window.control == undefined) control = {};

control.tabPanel = Class.create();
control.tabPanel.prototype = {
    options: undefined,
    divTabPanel: undefined,
    divTabsContainer: undefined,
    divPanelsContainer: undefined,
    divTabs: [],
    divPanels: [],
    activeTabIndex: undefined,
    imgCorners: {
        imgLeftCorner: new Image(), imgLeftCornerHover: new Image(), imgLeftCornerActive: new Image(),
        imgRightCorner: new Image(), imgRightCornerHover: new Image(), imgRightCornerActive: new Image()
    },
    effectDown: undefined,
    effectUp: undefined,

    initialize: function(divTabPanel, options)
    {
        this.options = Object.extend({
            leftCornerImgURL: 'images/tabPanel/tabPanelLeft.gif',
            rightCornerImgURL: 'images/tabPanel/tabPanelRight.gif',
            leftCornerImgURLHover: 'images/tabPanel/tabPanelLeftHover.gif',
            rightCornerImgURLHover: 'images/tabPanel/tabPanelRightHover.gif',
            leftCornerImgURLActive: 'images/tabPanel/tabPanelLeftActive.gif',
            rightCornerImgURLActive: 'images/tabPanel/tabPanelRightActive.gif',
            tabSpace: 2,
            tabClassName: 'divTab',
            tabClassNameHover: 'divTabHover',
            tabClassNameActive: 'divTabActive',
            activeTabIndex: 0
        }, options || {});

        this.divTabPanel = $(divTabPanel);
        this.activeTabIndex = this.options.activeTabIndex;

        if (this.divTabPanel.childElements().length == 2) //Control divTabPanel is valid or not
        {
            this.divTabsContainer = $(this.divTabPanel.childElements()[0]);
            this.divPanelsContainer = $(this.divTabPanel.childElements()[1]);

            if (this.divTabsContainer.childElements().length == this.divPanelsContainer.childElements().length) //Control the number of tabs and panel is equal or not
            {
                this.preloadImgCorners();
                this.prepareTabs();
                this.preparePanels();
                this.setDefaultTab();
            }
            else
            {
                alert(
                        'Belirtmiş olduğunuz (' + divTabPanel + ') ID\' li panelin Tab ve Panel sayısı eşleşmiyor! (Tab Sayısı: ' +
                        this.divTabsContainer.childElements().length + ', Panel Sayısı: ' + 
                        this.divPanelsContainer.childElements().length + ')'
                    );
            }
        }
        else
        {
            alert(
                    'Belirtmiş olduğunuz (' + divTabPanel + ') ID\' li panelin altında direkt olarak tab ' +
                    've panel divlerinden başka birşey olmamalıdır!'
                 );
        }
    },

    preloadImgCorners: function()
    {
        this.imgCorners.imgLeftCorner.src = this.options.leftCornerImgURL;
        this.imgCorners.imgRightCorner.src = this.options.rightCornerImgURL;
        this.imgCorners.imgLeftCornerHover.src = this.options.leftCornerImgURLHover;
        this.imgCorners.imgRightCornerHover.src = this.options.rightCornerImgURLHover;
        this.imgCorners.imgLeftCornerActive.src = this.options.leftCornerImgURLActive;
        this.imgCorners.imgRightCornerActive.src = this.options.rightCornerImgURLActive;
    },

    prepareTabs: function()
    {
        this.divTabsContainer.childElements().each(function(item)
        {
            this.divTabs.push(new control.tabPanel.ovalTab(this, item));
        } .bind(this));

        this.divTabs.each(function(item)
        {
            this.divTabsContainer.insert(item.divTab);
            item.divTab.observe('click', this.divTabClick.bindAsEventListener(this, item));
        } .bind(this));
    },

    preparePanels: function()
    {
        this.divPanelsContainer.childElements().each(function(item)
        {
            item.hide();
            this.divPanels.push(new control.tabPanel.panel(this, item));
        } .bind(this));
    },

    setDefaultTab: function()
    {
        var divNewActiveTab = this.divTabs[this.activeTabIndex];
        var divNewActivePanel = this.divPanels[this.activeTabIndex];

        divNewActiveTab.divTab.stopObserving('mouseover');
        divNewActiveTab.divTab.stopObserving('mouseout');
        divNewActiveTab.divTab.stopObserving('click');
        divNewActiveTab.setTabToActive();

        divNewActivePanel.show();
        this.divPanelsContainer.setStyle({ height: divNewActivePanel.divPanel.getHeight() + 'px' });
    },

    divTabClick: function(event, newActiveTab)
    {
        var newTabIndex = newActiveTab.getTabIndex();
        var newActivePanel = this.divPanels[newTabIndex];
        var currentActiveTab = this.divTabs[this.activeTabIndex];
        var currentActivePanel = this.divPanels[this.activeTabIndex];
        this.activeTabIndex = newTabIndex

        currentActiveTab.setTabToNormal();
        currentActiveTab.bindEvents();
        newActiveTab.stopEvents();
        newActiveTab.setTabToActive();

        if (this.effectDown)
        {
            if (this.effectDown.state != 'finished')
            {
                this.effectDown.cancel();
                this.divPanels.find(function(item) { return item.divPanel == this.effectDown.element } .bindAsEventListener(this)).hide();
            }
        }

        if (this.effectUp)
            this.effectUp.cancel();

        this.effectDown = new Effect.Opacity(
            currentActivePanel.divPanel,
            {
                to: 0,
                duration: 0.1,
                afterFinish: function()
                {
                    currentActivePanel.hide();
                    
                    this.effectUp = new Effect.Parallel([
                        new Effect.Opacity(
                                            newActivePanel.divPanel,
                                            {
                                                to: 1,
                                                sync: true,
                                                beforeStart: function()
                                                {
                                                    this.divPanelsContainer.setStyle({ overflow: 'hidden' });
                                                } .bindAsEventListener(this),
                                                afterFinish: function()
                                                {
                                                    this.divPanelsContainer.setStyle({ overflow: 'auto' });
                                                } .bindAsEventListener(this)
                                            }
                                           ),
                        new Effect.Morph(
                                            this.divPanelsContainer,
                                            {
                                                style: 'height: ' + newActivePanel.divPanel.getHeight() + 'px',
                                                sync: true,
                                                beforeStart: function()
                                                {
                                                    newActivePanel.divPanel.setOpacity(0);
                                                    newActivePanel.show();
                                                    this.divPanelsContainer.setStyle({ overflow: 'hidden' });
                                                } .bindAsEventListener(this),
                                                afterFinish: function()
                                                {
                                                    this.divPanelsContainer.setStyle({ overflow: 'auto' });
                                                } .bindAsEventListener(this)
                                            }
                                        )],
                                        {
                                            duration: 2,
                                            transition: Effect.Transitions.spring
                                        });
                } .bindAsEventListener(this)
            }
        );
    },

    switchTab: function(htmlElement)
    {
        for (var i = 0; i < this.divTabs.length; i++)
        {
            if (this.divTabs[i].divTabText == htmlElement)
            {
                this.switchTabByIndex(i);
                break;
            }
        }
    },
    switchTabByTab: function(divTab)
    {
        this.switchTabByIndex(divTab.getTabIndex());
    },
    switchTabByIndex: function(index)
    {
        this.divTabClick(this, this.divTabs[index]);
    }
}

control.tabPanel.ovalTab = Class.create();
control.tabPanel.ovalTab.prototype = {
    tabPanelRef: undefined,
    divTab: undefined,
    imgLeftCorner: undefined,
    imgRightCorner: undefined,
    divTabText: undefined,

    initialize: function(tabPanelRef, divTabText)
    {
        this.tabPanelRef = tabPanelRef;
        this.createOvalTab(divTabText);
        this.setTabStyle();
        this.distributeNodes();
        this.bindEvents();
    },

    createOvalTab: function(divTabText)
    {
        divTabText.addClassName(this.tabPanelRef.options.tabClassName);
        divTabText.setStyle({ cssFloat: 'left' });
        this.divTab = Builder.node('div', { style: 'float: left;' }, [
                            Builder.node('div', { style: 'float: left;' }, [Builder.node('img', { src: this.tabPanelRef.imgCorners.imgLeftCorner.src })]),
                            divTabText,
                            Builder.node('div', { style: 'float: left;' }, [Builder.node('img', { src: this.tabPanelRef.imgCorners.imgRightCorner.src })])]);
    },
    getTabIndex: function()
    {
        return this.tabPanelRef.divTabsContainer.childElements().indexOf(this.divTab);
    },
    setTabStyle: function()
    {
        Element.setStyle(this.divTab, { marginRight: this.tabPanelRef.options.tabSpace + 'px', cursor: 'pointer' });
    },
    distributeNodes: function()
    {
        this.imgLeftCorner = this.divTab.childElements()[0].down('img');
        this.imgRightCorner = this.divTab.childElements()[2].down('img');
        this.divTabText = this.divTab.childElements()[1];
    },
    bindEvents: function()
    {
        this.divTab.observe('mouseover', this.divTabMouseOver.bindAsEventListener(this));
        this.divTab.observe('mouseout', this.divTabMouseOut.bindAsEventListener(this));
        this.divTab.observe('click', this.tabPanelRef.divTabClick.bindAsEventListener(this.tabPanelRef, this));
    },
    stopEvents: function()
    {
        this.divTab.stopObserving('mouseover');
        this.divTab.stopObserving('mouseout');
        this.divTab.stopObserving('click');
    },

    setTabToActive: function()
    {
        this.imgLeftCorner.src = this.tabPanelRef.imgCorners.imgLeftCornerActive.src;
        this.imgRightCorner.src = this.tabPanelRef.imgCorners.imgRightCornerActive.src;
        this.changeClassName(this.tabPanelRef.options.tabClassNameActive);
        
        var borderTopWidth = this.tabPanelRef.divPanelsContainer.getStyle('border-top-width').include('px') ? this.tabPanelRef.divPanelsContainer.getStyle('border-top-width') : '0px';
        this.divTab.setStyle({ position: 'relative', top: borderTopWidth, cursor: 'default' });
    },
    setTabToHover: function()
    {
        this.imgLeftCorner.src = this.tabPanelRef.imgCorners.imgLeftCornerHover.src;
        this.imgRightCorner.src = this.tabPanelRef.imgCorners.imgRightCornerHover.src;
        this.changeClassName(this.tabPanelRef.options.tabClassNameHover);
    },
    setTabToNormal: function()
    {
        this.imgLeftCorner.src = this.tabPanelRef.imgCorners.imgLeftCorner.src;
        this.imgRightCorner.src = this.tabPanelRef.imgCorners.imgRightCorner.src;
        this.changeClassName(this.tabPanelRef.options.tabClassName);
        this.divTab.setStyle({ position: 'static', top: '0px', cursor: 'pointer' });
    },
    changeClassName: function(className)
    {
        this.divTabText.removeClassName(this.tabPanelRef.options.tabClassNameActive);
        this.divTabText.removeClassName(this.tabPanelRef.options.tabClassNameHover);
        this.divTabText.removeClassName(this.tabPanelRef.options.tabClassName);
        this.divTabText.addClassName(className);
    },

    divTabMouseOver: function(event)
    {
        this.setTabToHover();
    },
    divTabMouseOut: function(event)
    {
        this.setTabToNormal();
    }
}

control.tabPanel.panel = Class.create();
control.tabPanel.panel.prototype = {
    tabPanelRef: undefined,
    divPanel: undefined,

    initialize: function(tabPanelRef, divPanel)
    {
        this.tabPanelRef = tabPanelRef;
        this.divPanel = divPanel;
    },

    hide: function()
    {
        Element.hide(this.divPanel);
    },

    show: function()
    {
        Element.show(this.divPanel);
    },

    getPanelIndex: function()
    {
        return this.tabPanelRef.divPanelsContainer.childElements().indexOf(this.divPanel);
    }
}