/**
* @author pop webdev [kh]
* @version: 0.1
* @classDescription: Custom class to slide panel
* @dependencies: Prototype v1.6.1, Effect.js (Scriptaculous 1.8.3)
*/
var SlidePanel = Class.create({

    initialize: function (target, options) {

        this.options = Object.extend({
            animationDuration: 0.25, // time in seconds it takes for animation to complete
            animationTransition: Effect.Transitions.sinoidal, // what type of effect to use for animation
            childTargets: '', // css selector of children to targets
            childWrapper: '', // css selector to child (to apply styles to)
            closeMsg: 'Show Less', // Message to show when panel is open
            cssClass: 'sp', // base css class of new elements
            cssSeparator: '-', // css separator [-_]
            openCss: 'open', // css class added to toggle when panel is open
            openMsg: 'Show More' // message to show when panel is closed
        }, options || {});

        // make sure target exists
        if ($(target)) {

            this.target = $(target);

            // check if childTargets and childWrapper exists
            if (this.target.select(this.options.childWrapper).length > 0 && this.target.select(this.options.childTargets).length > 0) {

                this.wrapper = this.target.down(this.options.childWrapper);
                // get height of wrapper
                this.origHeight = this.wrapper.getHeight() + 'px';

                // hide wrapper by setting height to zero
                this.wrapper.setStyle({ 'height': '0px', 'overflow': 'hidden' });

                // create links
                this.createNav();

            }

        }

    },

    // create show / hide links
    createNav: function () {

        var div = new Element('div', { 'class': this.options.cssClass + this.options.cssSeparator + 'nav' });
        var wrapper = new Element('div', { 'class': this.options.cssClass + this.options.cssSeparator + 'nav' + this.options.cssSeparator + 'wrapper' });
        var anchor = new Element('a', { 'href': '#' }).update(this.options.openMsg);
        this.anchor = anchor;
        // insert anchor into div
        div.insert(wrapper);
        wrapper.insert(anchor);
        this.target.insert(div);

        anchor.observe('click', function (e) {
            e.stop(); // cancel default event
            var el = e.findElement('a');
            if (el.hasClassName(this.options.openCss)) {
                // slide up
                this.animate('0px', '');

            } else {
                // slide down
                this.animate(this.origHeight, this.options.openCss);
            }

        } .bind(this));


    },

    animate: function (to, css) {

        this.fx = new Effect.Morph(this.wrapper, {
            style: { 'height': to },
            duration: this.options.animationDuration,
            transition: this.options.animationTransition,
            afterFinish: function (e) {
                this.anchor.className = css
                if (css == '') {
                    this.anchor.update(this.options.openMsg);
                } else {
                    this.anchor.update(this.options.closeMsg);
                }
            } .bind(this)
        });


    }

});