/* Mootabs */
/* Adapted from www.silverscripting.com and www.quirksmode.org and rewritten by Raymond Ting of AskAladdin Pte Ltd. */
/* http://askaladdin.com.sg */


var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();


var mootabs = new Class({

    options: {
        width:                281,
        height:                255,
        changeTransition:    Fx.Transitions.Bounce.easeOut,
        mouseOverClass:    'active'
    },    

	initialize: function(element, options) {
        this.setOptions(options);
		this.el = $(element);
		this.elid = element;
		
		this.el.setStyles({
			height: this.options.height + 'px',
			width: this.options.width + 'px'
		});
		
		this.titles = $$('#' + this.elid + ' ul li');
		this.titles[0].addClass('active');
		this.activeTitle = this.titles[0];
		
		this.panelHeight = this.options.height - (this.titles[0].getStyle('height').toInt() + 4);
		
		this.panels = $$('#' + this.elid + ' .mootabs_panel');
		this.panels.setStyle('height', this.panelHeight);
		this.panels[0].addClass('active');
        
        if (BrowserDetect.browser == 'Explorer') { 
            this.historyid = new Array(this.panels.length);
            this.historyHTML = new Array(this.panels.length);
            
            for (var i=0; i<this.panels.length; i++) {
                this.historyid[i] = (this.panels[i]).id;
                this.historyHTML[i] = (this.panels[i]).innerHTML;
            }    
            
            this.cur = this.panels[0];
		}
        
		this.titles.each(function(item) {
			item.addEvent('click', function(){
					item.removeClass(this.options.mouseOverClass);
					this.activate(item);
				}.bind(this)
			);
			
			item.addEvent('mouseover', function() {
				if(item != this.activeTitle)
				{
					item.addClass(this.options.mouseOverClass);
				}
			}.bind(this));
			
			item.addEvent('mouseout', function() {
				if(item != this.activeTitle)
				{
					item.removeClass(this.options.mouseOverClass);
				}
			}.bind(this));
		}.bind(this));
		
		

	},
	
	activate: function(tab){
		if($type(tab) == 'string') 
		{
			myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
			tab = myTab;
		}
		
		if($type(tab) == 'element')
		{   
			var newTab = tab.getProperty('title');
            var newHeight = tab.getProperty('h') - (this.titles[0].getStyle('height').toInt() + 4);
            /* IE specific. To stop media playback when switching tab  */
            if (BrowserDetect.browser == 'Explorer') { 
                this.cur.setHTML('PAUSED');
                var i=0;
                
                for (i=0; i<this.panels.length; i++)
                    if (this.historyid[i] == newTab)
                        break;

                this.panels.filterById(newTab).setHTML(this.historyHTML[i]);
                this.cur = this.panels.filterById(newTab);
            }                
            /* end testing */
            
            
			this.panels.removeClass('active');
			this.panels.filterById(newTab).addClass('active');
			if(this.options.changeTransition != 'none')
			{
				this.panels.filterById(newTab).setStyle('height', 0);
				var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: 1000, transition: this.options.changeTransition});
				changeEffect.start({
					'0': {
						'height': [0, newHeight] //this.panelHeight]
					}
				});
                this.el.setStyles({
                    height: newHeight + 'px',
                    width: this.options.width + 'px'
                });
			}
			
			this.titles.removeClass('active');
			
			tab.addClass('active');
			
			this.activeTitle = tab;
		}
	},
	
	addTab: function(title, label, content){
		//the new title
		var newTitle = new Element('li', {
			'title': title
		});
		newTitle.appendText(label);
		this.titles.include(newTitle);
		$$('#' + this.elid + ' ul').adopt(newTitle);
		newTitle.addEvent('click', function() {
			this.activate(newTitle);
		}.bind(this));
		
		newTitle.addEvent('mouseover', function() {
			if(newTitle != this.activeTitle)
			{
				newTitle.addClass(this.options.mouseOverClass);
			}
		}.bind(this));
		newTitle.addEvent('mouseout', function() {
			if(newTitle != this.activeTitle)
			{
				newTitle.removeClass(this.options.mouseOverClass);
			}
		}.bind(this));
		//the new panel
		var newPanel = new Element('div', {
			'style': {'height': this.options.panelHeight},
			'id': title,
			'class': 'mootabs_panel'
		});
		newPanel.setHTML(content);
		this.panels.include(newPanel);
		this.el.adopt(newPanel);
	},
	
	removeTab: function(title){
		if(this.activeTitle.title == title)
		{
			this.activate(this.titles[0]);
		}
		$$('#' + this.elid + ' ul li').filterByAttribute('title', '=', title)[0].remove();
		
		$$('#' + this.elid + ' .mootabs_panel').filterById(title)[0].remove();
	}
	
	
});

mootabs.implement(new Options);