//////////////////////////////////////////////////////////////////////////////////////////////////
/*  zxDivFold v1.0 - 4:40 PM 13/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
@author: azim.zakhidov@cyberplex.com
@gives a mouse over preview of the swatch color contained in the target element
var sLswatchOpts = {
swClass:'.SwatchTable', // the swatches class
swColorTag:'background-color', // the tag property that transfers the hex code
swPrevId: 'swPreview', // the id of the preview element
swDuration: 1000 // load in duration
};
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////

window.addEvent('domready', function(){
    var zxDivFoldOpts = {
        headId: '#DisplaySizes label', // the tag property that transfers the hex code
        child: 'Swatchs', // the id of the preview element
        dfDuration: 1000, // load in duration
        height: [0,100],
        openClass: 'open',
        closeClass: 'close',
        defstate: 'close' // open | close
    };
    var DivFold = new zxDivFold(zxDivFoldOpts);
});

//////////////////////////////////////////////////////////////////////////////////////////////////
// class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////
var zxDivFold = new Class({
    initialize:function(options){
        this.setOptions(options);
        if ( $$(this.options.headId) && $(this.options.child) ){
            var height = $(this.options.child).getStyle('height').toInt();
            if (!isNaN(height)){
                this.options.height[1]=height;
            }
            this.bindFolding();
        }
    },
    setOptions:function(options){
        this.options = Object.extend({ }, options || {} );
    },

    bindFolding:function(){
        var el =$$(this.options.headId)[0];
        if (el){
            el.addEvent('click', function(el){
                if (el.hasClass(this.options.closeClass)){
                    el.removeClass(this.options.closeClass);
                    el.addClass(this.options.openClass);

                    new Fx.Styles( $(this.options.child) , {
                        duration: this.options.dfDuration,
                        transition: Fx.Transitions.linear,
                        onComplete: function(){ }.bind(this)
                    }).start({ 'height': [this.options.height[0], this.options.height[1]], 'opacity':[0, 1] });
                }else{
                    el.removeClass(this.options.openClass);
                    el.addClass(this.options.closeClass);

                    new Fx.Styles( $(this.options.child) , {
                        duration: this.options.dfDuration,
                        transition: Fx.Transitions.linear,
                        onComplete: function(){ }.bind(this)
                    }).start({ 'height': [this.options.height[1], this.options.height[0]], 'opacity':[1, 0] });
                }
            }.pass([el], this));
            el.setStyle('cursor','pointer');
            this.setDefault(el, this.options.defstate);
        }
    },

    setDefault:function(el, state){
        $(this.options.child).setStyle('overflow','hidden');

        if (state == this.options.closeClass){
            el.removeClass(this.options.openClass);
            el.addClass(this.options.closeClass);

            $(this.options.child).setStyle('height',0);
            $(this.options.child).setStyle('opacity',0);
        }else{
            el.removeClass(this.options.closeClass);
            el.addClass(this.options.openClass);
        }
    }
});