/*
 * jQuery ArtBox Plugin v. 0.5.0
 *
 * Copyright (c) 2009 Victor Aponte (http://www.victoraponte.org/plugins)
 * Licensed under MIT and GPL licenses.
 *
 * for more information and samples, visit http://www.victoraponte.org/plugins/artbox
 * Changelog: http://www.victoraponte.org/plugins/artbos/changelog.txt 
 *
 * This plugin requires jQuery 1.3.2 or later.
 */


/*
 * GA code additions and play-pause/#jump fixes by Jay Turley [jayturley.com]
 */

// Using the following construct ensures that the following code uses only a single namespace and does not create any unnecessary global variables.
// passing the jQuery object to the function ensures that we don't collide with any other libraries that use the  function.
; (function($) {
    $.fn.artbox = function(options) {
        var $this = $(this);

        var defaults = {
            animation: "fade",
            // mask: "", //Panel Mask is unavailable at this time.
            duration: 7000,
            transtime: 2000,
            controls: "no",
            captions: "yes",
            capheight: "100px",
            capanimate: "yes",
            autoPlay: true
        };

        var settings = $.fn.extend({},
        defaults, options);
        var $currPanel;
        var $nextPanel;
        var $prevPanel;
        var transtime;
        var transitionIn;
        // points to the proper transition in function based on animation choice.
        var transitionOut;
        // points to the corresponding transition out function.
        var autoPlay = settings.autoPlay;

        init = function() {
            //initialize the transition time.
            transtime = (settings.transtime == 0) ? Math.ceil(settings.duration / 6) : settings.transtime;

            //if there's a masking image, let's insert it at the top of the container.
            /* Panel mask is unavailable at this time.
   
 if (settings.mask!="") {
$this.prepend('<p><img src="' + settings.mask +'" class="panel-mask" alt="panel mask image" /></p>');
}

*/

            // Now let's see if we the controls are set to 'yes'
            if (settings.controls.toUpperCase() == 'YES') {
                // So let's add the next/previous and pause-play anchors.
                $this.prepend('<a href="javascript:void(0);" class="next">next&nbsp;&raquo;</a><a href="javascript:void(0);" class="prev">&#171;&nbsp;previous</a><a href="javascript:void(0);" class="play-button pause">Pause</a>');

                if (!autoPlay) {
                    // if we are paused by default, show the play button to start.
                    $this.find("a.pause").removeClass("pause").addClass("play");
                }

                //Now, it's time to bind the events to their particular buttons.
                $this.find("a.play-button").bind("click",
                function() {
                    //check to see if we're pausing or playing
                    if ($(this).hasClass("pause")) {
                        timer = clearInterval(timer);
                        $(this).removeClass("pause").addClass("play");
                        // track event in GA
                        _gaq.push(['_trackPageview', '/artbox/pause']);
                    }
                    else {
                        timer = setInterval(function() {
                            transitionOut($currPanel, $nextPanel);
                        },
                        settings.duration);
                        $(this).removeClass("play").addClass("pause");
                        // track event in GA
                        _gaq.push(['_trackPageview', '/artbox/play']);
                    }
                });

                // Bind to the previous button the action to go to the previous panel
                $this.find("a.prev").bind("click",
                function() {

                    if (autoPlay) {
                        timer = clearInterval(timer);
                    }
                    transitionOut($currPanel, $prevPanel, true);
                    if (autoPlay) {
                        timer = setInterval(function() {
                            transitionOut($currPanel, $nextPanel, true);
                        },
                        settings.duration);
                    }
                    // track event in GA
                    _gaq.push(['_trackPageview', '/artbox/previous']);

                    // fix play button status if necessary
                    $playbutton = $("a.play-button");
                    if ($playbutton.hasClass('play')) {
                        $playbutton.removeClass("play").addClass("pause");
                    }

                });

                // Bind to the next button the action to go to the next panel
                $this.find("a.next").bind("click",
                function() {

                    if (autoPlay) {
                        timer = clearInterval(timer);
                    }
                    transitionOut($currPanel, $nextPanel);
                    if (autoPlay) {
                        timer = setInterval(function() {
                            transitionOut($currPanel, $nextPanel);
                        },
                        settings.duration);
                    }
                    // track event in GA
                    _gaq.push(['_trackPageview', '/artbox/next']);

                    // fix play button status if necessary
                    $playbutton = $("a.play-button");
                    if ($playbutton.hasClass('play')) {
                        $playbutton.removeClass("play").addClass("pause");
                    }
                });
            }

            //initialize the visuals of the panels inside the container.
            $this.find("div.panel")
            .hide();

            //next the captions
            if (settings.capanimate.toUpperCase() == "yes") {
                $this.find("div.panel div.caption")
                .css("height", "0");
            }

            //choose which panel is the current, next and previous ones.
            $this.find("div.panel:first")
            .addClass("currPanel")
            .next("div.panel")
            .addClass("nextPanel");

            $this.find("div.panel:last")
            .addClass("prevPanel");

            // Let's look at the settings and see if what kind of animation we're using.
            switch (settings.animation) {
            case "fade":
                transitionIn = crossFadeIn;
                transitionOut = crossFadeOut;
                break;

            case "slideLeft":
                transitionIn = crossSlideLeftIn;
                transitionOut = crossSlideLeftOut;
                break;

            case "slideRight":
            default:
                transitionIn = crossSlideRightIn;
                transitionOut = crossSlideRightOut;
            }
            //the transition time is 1/6th of the overall duration
            cachePanels();
        };

        cachePanels = function() {
            //let's cache up the different panels
            $currPanel = $("div.currPanel");
            $nextPanel = $("div.nextPanel");
            $prevPanel = $("div.prevPanel");
        };

        switchClasses = function(reverse) {
            // If reverse is true, then go backwards in the queue.
            if (reverse) {
                $nextPanel.removeClass("nextPanel");
                $currPanel.removeClass("currPanel").addClass("nextPanel");
                $prevPanel.removeClass("prevPanel").addClass("currPanel");
                if ($prevPanel.get(0) != $this.find("div.panel:first").get(0)) {
                    $prevPanel.prev("div.panel").addClass("prevPanel");
                }
                else {
                    $this.find("div.panel:last").addClass("prevPanel");
                }
            }
            else {
                $prevPanel.removeClass("prevPanel");
                $currPanel.removeClass("currPanel").addClass("prevPanel");
                $nextPanel.removeClass("nextPanel").addClass("currPanel");
                if ($nextPanel.get(0) != $this.find("div.panel:last").get(0)) {
                    $nextPanel.next("div.panel").addClass("nextPanel");
                }
                else {
                    $this.find("div.panel:first").addClass("nextPanel");
                }
            }

            cachePanels();
        };

        crossFadeIn = function($thisPanel) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.fadeIn(transtime);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");
                $thisPanel.fadeIn(transtime,
                function() {
                    if (settings.capanimate.toUpperCase() == "YES") {
                        $thisCaption.animate({
                            height: settings.capheight + "px"
                        },
                        transtime);
                    }

                });
            }
            // track event in GA
    var panelId = $thisPanel.attr("id");
            _gaq.push(['_trackPageview', '/artbox/'+panelId]);
        };

        crossFadeOut = function($thisPanel, $nextPanel, reverse) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.fadeOut(transtime);
                crossFadeIn($nextPanel);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");

                if (settings.capanimate.toUpperCase() == "YES") {
                    $thisCaption.animate({
                        height: "0"
                    },
                    transtime,
                    function() {
                        $thisPanel.fadeOut(transtime);
                        crossFadeIn($nextPanel);
                    });
                } else {
                    $thisPanel.fadeOut(transtime);
                    crossFadeIn($nextPanel);
                }

            }

            var backwards = (typeof(reverse) == "undefined") ? false: reverse;
            switchClasses(backwards);
        };

        crossSlideLeftIn = function($thisPanel) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.css("left", $thisPanel.width() + "px").show();
                $thisPanel.animate({
                    left: 0
                },
                transtime);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");
                $thisPanel.css("left", $thisPanel.width() + "px").show();
                $thisPanel.animate({
                    left: 0
                },
                transtime,
                function() {

                    if (settings.capanimate.toUpperCase() == "YES") {
                        $thisCaption.animate({
                            height: settings.capheight + "px"
                        },
                        transtime);
                    }

                });
            }
            // track event in GA
    var panelId = $thisPanel.attr("id");
            _gaq.push(['_trackPageview', '/artbox/'+panelId]);
        };

        crossSlideLeftOut = function($thisPanel, $nextPanel, reverse) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.animate({
                    left: "-" + $thisPanel.width() + "px"
                },
                transtime);
                crossSlideLeftIn($nextPanel);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");
                $thisCaption.animate({
                    height: "0"
                },
                transtime,
                function() {
                    $thisPanel.animate({
                        left: "-" + $thisPanel.width() + "px"
                    },
                    transtime);
                    crossSlideLeftIn($nextPanel);
                });
            }
            var backwards = (typeof(reverse) == "undefined") ? false: reverse;
            switchClasses(backwards);
        };

        crossSlideRightIn = function($thisPanel) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.css("left", "-" + $thisPanel.width() + "px").show();
                $thisPanel.animate({
                    left: 0
                },
                transtime);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");
                $thisPanel.css("left", "-" + $thisPanel.width() + "px").show();
                $thisPanel.animate({
                    left: 0
                },
                transtime,
                function() {
                    $thisCaption.animate({
                        height: settings.capheight + "px"
                    },
                    transtime);
                });
            }
            // track event in GA
    var panelId = $thisPanel.attr("id");
            _gaq.push(['_trackPageview', '/artbox/'+panelId]);
        };

        crossSlideRightOut = function($thisPanel, $nextPanel, reverse) {
            if (settings.captions.toUpperCase() == "NO") {
                $thisPanel.animate({
                    left: $thisPanel.width() + "px"
                },
                transtime);
                crossSlideRightIn($nextPanel);
            }
            else {
                $thisCaption = $thisPanel.children("div.caption");
                $thisCaption.animate({
                    height: "0"
                },
                transtime,
                function() {
                    $thisPanel.animate({
                        left: $thisPanel.width() + "px"
                    },
                    transtime);
                    crossSlideRightIn($nextPanel);
                });
            }
            var backwards = (typeof(reverse) == "undefined") ? false: reverse;
            switchClasses(backwards);
        };

        init();
        transitionIn($currPanel);
        if (autoPlay) {
            var timer = setInterval(function() {
                transitionOut($currPanel, $nextPanel);
            },
            settings.duration);
        }

    };
})(jQuery);