/*--------------------------------------
    Font Changer
---------------------------------------*/

var FontChanger = new Class({
    fontSizes: {
        small: null,
        medium: null,
        large: null
    },
    relFontSizes: [
        'xx-small',
        'x-small',
        'small',
        'medium',
        'large',
        'x-large',
        'xx-large'
    ],
    options: {
        idName: 'font-changer',
        cookieName: 'document-font-size'
    },
    cookie: null,
    
    initialize: function(options){
        this.setOptions(options);
        var defFontSize = $$('body')[0].getStyle('font-size');
        
        if (defFontSize.match(/\d+?(px|em)/i)) {
            this.fontSizes = {
                small: (defFontSize.toInt() * 0.95).toInt() + RegExp.$1,
                medium: defFontSize,
                large: (defFontSize.toInt() * 1.3).toInt() + RegExp.$1
            };
        } else {
            var i = this.relFontSizes.indexOf(defFontSize);
            this.fontSizes = {
                small: this.relFontSizes[i - 1] || 'xx-small',
                medium: this.relFontSizes[i],
                large: this.relFontSizes[i + 1] || 'xx-large'
            };
        }
    },
    
    show: function() {
        var id = this.options.idName;
    
        document.writeln([
            '<div id="' + id + '">',
            '<div id="' + id + '-label">Change font size:</div>',
            '<ul>',
            '<li style="cursor: pointer; font-size: ' + this.fontSizes.small + ';" id="' + id + '-small">small</li>',
            '<li style="cursor: pointer; font-size: ' + this.fontSizes.medium + ';" id="' + id + '-medium">medium</li>',
            '<li style="cursor: pointer; font-size: ' + this.fontSizes.large + ';" id="' + id + '-large" >large</li>',
            '</ul>',
            '</div>'
        ].join("\n"));
    
        $(id + '-small').addEvent('click', function(e) { this.change('small') }.bind(this));
        $(id + '-medium').addEvent('click', function(e) { this.change('medium') }.bind(this));
        $(id + '-large').addEvent('click', function(e) { this.change('large') }.bind(this));
        
        this.cookie = new Hash.Cookie(this.options.cookieName, {duration: 30, path: '/'});
        this.change(this.cookie.get('font-size') || 'medium');
    },


    change: function(fontSize) {
        var id = this.options.idName;
        var onClassNames = [];
        
        //new Fx.Style($$('body')[0], 'font-size').start(this.fontSizes[fontSize]);
        $$('body')[0].setStyle('font-size', this.fontSizes[fontSize]);
        this.cookie.set('font-size', fontSize).save();

        switch (fontSize) {
            case 'small':
                onClassNames[0] = id + '-on';
                break;
            case 'medium':
                onClassNames[1] = id + '-on';
                break;
            case 'large':
                onClassNames[2] = id + '-on';
                break;
            default:
                onClassNames[1] = id + '-on';
                break;
        }
        $(id + '-small').setProperty('class', onClassNames[0]);
        $(id + '-medium').setProperty('class', onClassNames[1]);
        $(id + '-large').setProperty('class', onClassNames[2]);
    }

});
FontChanger.implement(new Options);
FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.show();
};

/*--------------------------------------
    Blind Menu
---------------------------------------*/

var BlindMenu = new Class({

    initialize: function(options){
		this.options = $extend({
            duration: 500,
            transition: Fx.Transitions.Cubic.easeOut,
            menuClassName: 'blind-menu',
            togglerOpenedClassName: 'blind-toggler-opened',
            togglerClosedClassName: 'blind-toggler-closed',
            elementClassName: 'blind-element',
            idPrefix: 'blind-element-',
            cookieName: 'cookie-blind'
		}, options || {});
        
        var blindMenus = $$('.' + this.options.menuClassName);
        
        var sequence = 0;
        var cookie = new Hash.Cookie(this.options.cookieName, {path: '/'});
        var openedIds = $A(cookie.get('opened'));

        blindMenus.each(function(blindMenu) {
            /*
            var anchors = blindMenu.getElements('a');
            anchors.each(function(anchor) {
                var defColor = anchor.getStyle('color');
                var fx = new Fx.Style(anchor, 'color', { duration: 300, wait:false });
                anchor.addEvent('mouseenter', function() { fx.start('#f00'); });
                anchor.addEvent('mouseleave', function() { fx.start(defColor); });
            });
            */
            
            var hideNodes = blindMenu.getElements('ul');

            hideNodes.each(function(hideNode) {
                var toggler = hideNode.getParent().getElements('a')[0];
                toggler.addClass(this.options.togglerClosedClassName);
                toggler.addEvent('click', this.toggle.bindWithEvent(this, hideNode));

                hideNode.id = this.options.idPrefix + sequence;
                hideNode.addClass(this.options.elementClassName);
                if (openedIds.contains(hideNode.id)) {
                    hideNode.setStyles({
                        overflow: 'hidden'
                    });
                } else {
                    hideNode.setStyles({
                        visibility: 'hidden',
                        position: 'absolute',
                        overflow: 'hidden'
                    });
                }
                
                sequence++;
            
            }, this);
        }, this);
    },
    
    toggle: function(evt, node) {
        var cookie = new Hash.Cookie(this.options.cookieName, {duration: 30,  path: '/'});
        
        if (node.getStyle('visibility') == 'hidden') {
            node.setStyle('display', '');
            var curHeight = node.getStyle('height');
            node.setStyles({
                height: 0,
                visibility: 'visible',
                position: 'static'
            });
            new Fx.Style(
                node,
                'height',
                {
                    duration: this.options.duration,
                    transition: this.options.transition,
                    'onComplete': function() {
                        node.setStyle('height', '');
                    }
                }
            ).start(0, curHeight);

            node.getParent().getElements('a')[0].setProperty('class', this.options.togglerOpenedClassName);
            var array = $A(cookie.get('opened')).include(node.id);
            cookie.set('opened', array).save();
        } else {
            new Fx.Style(
                node,
                'height',
                { 
                    duration: this.options.duration,
                    transition: this.options.transition,
                    'onComplete' : function() {
                        node.setStyles({
                            height: '',
                            visibility: 'hidden',
                            display: 'none',
                            position: 'absolute'
                        });
                    }
                }
            ).start(node.getStyle('height'), 0);
            
            node.getParent().getElements('a')[0].setProperty('class', this.options.togglerClosedClassName);
            var array = $A(cookie.get('opened')).remove(node.id);
            cookie.set('opened', array).save();
        }
        evt.stop();
    }
    
});

window.addEvent('domready', function() { new BlindMenu(); });

/*--------------------------------------
    Cross Fader
---------------------------------------*/

var CrossFader = new Class({

    initialize: function(options){
		this.options = $extend({
            className: 'cross-fader',
            togglerClassName: 'cross-fader-toggler',
            idPrefix: 'cf-',
            fadeTime: 4000,
            delayTime: 500
		}, options || {});
        
        var crossFaders = $$('.' + this.options.className);
        var crossFaderTogglers = $$('.' + this.options.togglerClassName);
        
        crossFaders.each(function(crossFader, index) {
            var fadeNodes = crossFader.getChildren();
            var togglerNodes = crossFaderTogglers[index].getChildren();
            
            fadeNodes = fadeNodes.filter(this.getElementNode.bind());
            togglerNodes = togglerNodes.filter(this.getElementNode.bind());
            
            fadeNodes.each(function(fadeNode, index) {
                fadeNode.setStyle('position', 'absolute');
                fadeNode.setStyle('z-index', fadeNodes.length - index);
                fadeNode.setProperty('id', this.options.idPrefix + index);
                
                var fx = new Fx.Style(fadeNode, 'opacity');
                if (index) {
                    fx.set(0);
                } else {
                    fx.set(1);
                    crossFader.setStyle('height', fadeNode.getStyle('height'));
                }
            }, this);
            
            new SwitchFadeNode(fadeNodes, togglerNodes, this.options.fadeTime, this.options.delayTime);
        }, this);
    },
    
    getElementNode: function(node) {
        return node.nodeType == 1 /* document.ELEMENT_NODE */ ? true : false;
    }
});

var SwitchFadeNode = new Class({
    nodes: null,
    togglerNodes: null,
    visibleIndex: 0,
    fadeTime: null,
    delayTime: null,
    timerId: null,

    initialize: function(fadeNodes, togglerNodes, fadeTime, delayTime) {
        this.nodes = fadeNodes;
        this.togglerNodes = togglerNodes;
        this.fadeTime = fadeTime;
        this.delayTime = delayTime;
        
        
        for (var i = 0; i < togglerNodes.length; i++) {
            togglerNodes[i].addEvent('mouseover', this.focus.bind(this, i));
            togglerNodes[i].addEvent('mouseout', this.start.bind(this));
        }
        
        this.start();        
    },

    start: function() {
        if (this.nodes.length != 1) {
            this.timerId = setInterval(this.toggle.bind(this), this.fadeTime);
        }
    },
    
    toggle: function() {
        var curIndex = this.visibleIndex;
        if (this.visibleIndex >= this.nodes.length - 1) {
            this.visibleIndex = 0;
        } else {
            this.visibleIndex++;
        }
        var nextIndex = this.visibleIndex;
    
        var curFx = new Fx.Style(this.nodes[curIndex], 'opacity', { duration:this.delayTime });
        var nextFx = new Fx.Style(this.nodes[nextIndex], 'opacity', { duration:this.delayTime });
        
        curFx.start(0);
        nextFx.start(1);
    },
    
    focus: function(index) {
        clearInterval(this.timerId);
        if (index != this.visibleIndex) {
            var curFx = new Fx.Style(this.nodes[this.visibleIndex], 'opacity', { duration:this.delayTime/2 });
            curFx.start(1, 0);
            
            var focusFx = new Fx.Style(this.nodes[index], 'opacity', { duration:this.delayTime/2 });
            focusFx.start(0, 1);
                        
            this.visibleIndex = index;
        }
    }
});

window.addEvent('domready', function() { new CrossFader() });



/*--------------------------------------
    Tab Menu
---------------------------------------*/

var TabMenu = new Class({

    initialize: function(options){
		this.options = $extend({
            animation: false,
            duration: 300,
            tabMenuClassName: 'tab-menu',
            tabMenuFocusedClassName: 'tab-menu-focus',
            defaultTab: location.hash.split('#')[1]
		}, options || {});
        
        var tabMenus = $$('.' + this.options.tabMenuClassName);
        
        tabMenus.each(function(node, i) {
            var tabContents = new Array();
            var isFocued = false;
            this.i = i;
            var anchors = node.getElements('a');
            
            anchors.each(function(anchor, j) {
                var idName = anchor.hash.split('#')[1];
                tabContents.push($(idName));
                if (this.options.defaultTab && this.options.defaultTab == idName) {
                    node.getElements('li')[j].addClass(this.options.tabMenuFocusedClassName);
                    isFocued = true;
                } else {
                    $(idName).setStyle('display', 'none');
                    if (this.options.animation) 
                        $(idName).setStyle('opacity', '0');
                }
                anchor.addEvent('click', this.toggle.bindWithEvent(this, [idName, i]));
            }, this);
            
            if (!isFocued) {
                tabContents[0].setStyle('display', '');
                if (this.options.animation)
                    tabContents[0].setStyle('opacity', '1');
                node.getElements('li')[0].addClass(this.options.tabMenuFocusedClassName);
            }
        
        }, this);
        
    },

    toggle: function(evt, id, index) {
        var tabMenu = $$('.' + this.options.tabMenuClassName)[index];
        var anchors = tabMenu.getElements('a');
        var curIdName = id;
        
        anchors.each(function(anchor) {
            var idName = anchor.hash.split('#')[1];
            if ($(idName).getStyle('display') != 'none' && curIdName != idName) {
                window.location.hash = curIdName;        

                if (this.options.animation) {
                    var show = function() {
                        $(curIdName).effect(
                            'opacity',
                            { 
                                duration: this.options.duration,
                                onStart: function() { $(curIdName).setStyle('display', ''); }
                            }
                        ).start(1);
                    }.bind(this);
                    
                    $(idName).effect(
                        'opacity',
                        { 
                            duration: this.options.duration,
                            onComplete: function() { $(idName).setStyle('display', 'none'); show(); }
                        }
                    ).start(0);
                    
                } else {
                    $(curIdName).setStyle('display', '');
                    $(idName).setStyle('display', 'none');
                }

                anchor.parentNode.removeClass(this.options.tabMenuFocusedClassName);
            } else if (curIdName == idName) {
                anchor.parentNode.addClass(this.options.tabMenuFocusedClassName);
            }
        
        }, this);
		
        evt.stop();

    }
});

window.addEvent('domready', function() { new TabMenu({ animation: true }) });