/**
* Panel v1
* PB October 2008;
*
* Enhanced promotional panel plug-in. Reveals (animates in) hidden content when mouse rolls over trigger element.
*
* Requires:
* jQuery (1.2.6);
* jquery.easing.js;
*
* Supported browsers Firefox 2 & 3(mac & PC), IE6 & 7, Safari 2(Mac).
*
* Example use;
* $('.gr-panel').panel();
*
* Based on a structure something like;
* <div class="gr-panel">
*   <div class="gr-mask">
*       <img src="[src]" />
*   </div>
*   <div class="gr-desc">
*       <p>[pop up text]</p>
*   </div>
*   <div class="gr-trigger">
*       <p>[rollover element]</p>
*   </div>
* </div>
*
* Supported options;
* easing:        String, one the methods in jquery.easing.js, default "elasout";
*
* To do;
* Marked with **HACK** below;
* Improve generic nature of selectors;
*/
(function(jq) {
    jq.fn.panel = function(options) {
        // add class to body to mark as js enabled;
        if (!jq('body').hasClass('gr-js'))
            jq('body').addClass("gr-js");
            
        // show panels when loaded;
        if (jq(this).hasClass("hide"))
            jq(this).removeClass("hide");
        jQuery.extend(jq.fn.panel.defaults, options);
        return this.each(function() {
            var panel = new Panel(this);
        });
    }
    function Panel(elem) {
        this.base = elem;
        this.init();
    }
    Panel.prototype = {
        base: null,
        top: null,
        init: function() {
            jq(".gr-desc", jq(this.base)).css({
                    paddingBottom: '25px',
                    width: '194px' // required for IE7!?!;
                });
            this.bind();
            this.addFrameBG();
            this.setOffset();
            this.adjust();
        },
        bind: function() {
            var self = this;
            this.addTrigger();
            return jq.each(["mouseover", "mouseout"], function(i, val) {
                jq(".gr-trigger", jq(self.base)).bind(val, function(e) {
                    self.animate.call(self, val);
                });
            });
        },
        addTrigger: function() {
            var href = jq('.panelBody li a', this.base).get(0);
            jq('<a href="#" class="gr-trigger"></a>')
                .css({
                    width: 194,
                    height: 127,
                    display: 'block',
                    position: 'absolute',
                    top: jq('h3', jq(this.base)).outerHeight() +
                            parseInt(jq('h3', jq(this.base)).css("marginTop")) +
                            parseInt(jq('h3', jq(this.base)).css("marginBottom")),
                    left: 0,
                    padding: 0,
                    border: 0,
                    zIndex: 100,
                    opacity: 0,
                    background: '#900',
                    border: 'solid 1px #900'
                }).appendTo(jq(this.base))
                .attr("href", href);
        },
        addFrameBG: function() {
            // add semi-transparent background;
            jq('<div class="gr-ft"></div>')
                .appendTo(jq(".gr-desc", jq(this.base)))
                .css({
                    position: "absolute",
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    background: "#fff",
                    opacity: .65
                });
            // **HACK** IE6 tweek, needs review;
            if (jq.browser.msie && jq.browser.version == "6.0") {
                jq('.gr-ft', jq(this.base)).css({
                    width: jq(".gr-desc", jq(this.base)).outerWidth(),
                    height: jq(".gr-desc", jq(this.base)).outerHeight()
                });
            }
            // add z-index to frame content to pull above 
            // .ft div needs refacter to be more genric!!;
            jq.each(["p", "h4"], function(i, val) {
                jq(val, jq(".gr-desc", jq(this.base)))
                    .css({
                        zIndex: 1,
                        position: "relative"
                    });
            });
        },
        getMouseXY: function(event) {
            var x = event.pageX || event.clientX + document.body.scrollLeft;
            var y = event.pageY || event.clientY + document.body.scrollTop;
            return [x, y];
        },
        setOffset: function() {
            jq.fn.panel.defaults.offset = parseInt(jq("h4", jq(this.base)).height());
        },
        adjust: function() {
            this.top = jq(".gr-mask", jq(this.base)).height() - jq.fn.panel.defaults.offset;
            // move description inside frame;
            jq(".gr-desc", jq(this.base))
                .prependTo(jq(".gr-mask", jq(this.base))).css({
                    zIndex: 1,
                    top: this.top,
                    position: "absolute" // **HACK** position absolute required for IE6?!?;
                });
        },
        animate: function(status) {
            if (status == "mouseover") {
                var finalY = jq(".gr-mask", jq(this.base)).height() - jq(".gr-desc", jq(this.base)).height();
            } else if (status == "mouseout") {
                var finalY = this.top;
            };
            jq(".gr-desc", jq(this.base))
                .animate(
                    { "top": finalY }, { "duration": jq.fn.panel.defaults.speed, queue: false, easing: jq.fn.panel.defaults.easing }
                )
        }
    }
    jq.fn.panel.defaults = {
        offset: null,
        easing: "backinout",
        speed: 400
    }
})(jQuery);