/*

	HomepageCarousel
	VERSION 1.3.3
	AUTHOR G.S.

	DEPENDENCIES:
	- jQuery 1.4.2
	- jQuery Easing 1.3
	- BrightcoveExperiences_all.js

	TODO:
	- Get cloned video panels working properly
	
	NOTES:
	- jQuery is running in no-conflict mode to co-exist with PrototypeJS. ($jq is used instead of $)

*/

function whichBrs() {
    var agt = navigator.userAgent.toLowerCase();
    if (agt.indexOf("opera") != -1) return 'Opera';
    if (agt.indexOf("chrome") != -1) return 'Chrome';
    if (agt.indexOf("safari") != -1) return 'Safari';
    if (agt.indexOf("firefox/3") != -1) return 'Firefox3';
    if (agt.indexOf('\/') != -1) {
        if (agt.substr(0, agt.indexOf('\/')) != 'mozilla') {
            return navigator.userAgent.substr(0, agt.indexOf('\/'));
        }
        else return 'Netscape';
    } else if (agt.indexOf(' ') != -1)
        return navigator.userAgent.substr(0, agt.indexOf(' '));
    else return navigator.userAgent;
}

function isMac() {
    return navigator.userAgent.indexOf("Mac") != -1;
}

function canMoveFlash() {

    // since we are having random IE 8 issues that cannot be researched 
    // (IE crashes on machines in question when the script debugger starts)
    // we're returning false at all times
    return false;

    if (isMac()) {
        return true;
    }
    var currentBrs = whichBrs();

    if (currentBrs == "Opera" || currentBrs == "Safari" || currentBrs == 'Firefox3') {
        return false;
    }
    return true;

}

function flashMoveTimeout() {
    if (isMac())
        return 1250;
    else
        return 500;
}
//var browserName = whichBrs();

var HomepageCarousel = function (target, contents, options) {
    var self = this;

    // ------------------------------------------------------------
    // DEFAULTS
    // ------------------------------------------------------------

    self.options = {
        width: 550,
        height: 450,
        https: false
    };

    if (typeof options == 'object') {
        $jq.extend(self.options, options);
    }

    self.contents = contents;

    // ------------------------------------------------------------
    // ELEMENT REFERENCES
    // ------------------------------------------------------------

    self.elWrapper = target;
    self.elStrip = target.find('ul.slideWrapper');

    self.btnBack = $jq('<li><a href="#" class="btn btn-back"><span class="offscreen">Back</span></a></li>');
    self.btnToggleAutoplay = $jq('<li><a href="#" class="btn btn-play"><span class="offscreen">Play / Pause</span></a></li>');
    self.btnNext = $jq('<li><a href="#" class="btn btn-next"><span class="offscreen">Next</span></a></li>');

    // ------------------------------------------------------------
    // VARS
    // ------------------------------------------------------------

    self.currentPanel = 0;
    self.totalPanels = self.contents.panels.length;
    self.autoRotationOn = true;
    self.rotationTimer = undefined;
    self.isTransitioning = false;
    self.brightcoveAPIs = []; // A collection of APIs to the various players
    self.panelTypes = []; // Descriptions of the type of each panel ("photo" or "video")

    // ------------------------------------------------------------
    // INITIAL SETUP
    // ------------------------------------------------------------

    self.elStrip.empty(); // Remove the downlevel content

    // Build out navigation

    var elNavigation = $jq('<ul class="navButtons"></ul>');

    elNavigation.append(self.btnBack);
    elNavigation.append(self.btnToggleAutoplay);
    elNavigation.append(self.btnNext);

    self.elWrapper.append(elNavigation);

    // Build and insert HTML contents

    function buildPanel(index, isClone) {
        var panelData = self.contents.panels[index];
        var hasSubHeading = panelData.subHeading != null && panelData.subHeading != '';

        var panelHTML = $jq('\
								<li class="panel" data-index="' + index + '"> \
									<div class="media"></div> \
									<div class="info" style="background-color:' + panelData.backgroundColor + '"> \
										<h3>' + panelData.title + '</h3>' +
                                        (hasSubHeading ? '<h4>' + panelData.subHeading + '</h4>' : '') +
										'<div class="description">' + (panelData.longDescription || '') + '</div> \
										<ul class="buttons"></ul> \
										<div class="clear"></div> \
									</div> \
								</li>');

        if (panelData.triangleImage) {
            panelHTML.find('div.media').append('<img src="' + panelData.triangleImage + '" width="112" height="86" alt="" class="badge" />');
        }

        if (panelData.buttons.length) {
            $jq(panelData.buttons).each(function (index) {
                var elButton = $jq('<li><a href="' + this.buttonLink + '">' + this.buttonText + '</a></li>');

                if (this.openInNewWindow) {
                    elButton.find('a').attr('target', '_blank');
                }

                panelHTML.find('ul.buttons').append(elButton);
            });
        }

        var elImage;

        if (panelData.videoURL && brightcove.checkFlashSupport()) {
            // Embed video player
            if (!isClone) {
                self.panelTypes[index] = 'video';

                var params = {
                    "bgcolor": "#000000",
                    "width": "550",
                    "height": "310",
                    "playerID": "738927019001",
                    "playerKey": "AQ~~,AAAAjh5TC7k~,K2aUOQDXqSoshQuy5U8UTpU4wug0ASco",
                    "isVid": "true",
                    "isUI": "true",
                    "dynamicStreaming": "true",
                    "videoId": panelData.videoURL,
                    "wmode": "opaque"
                };

                if (self.options.https) {
                    params.secureConnections = "true";
                }

                var player = brightcove.createElement("object");
                player.id = index;

                var parameter;

                for (var i in params) {
                    parameter = brightcove.createElement("param");
                    parameter.name = i;
                    parameter.value = params[i];
                    player.appendChild(parameter);
                }

                panelHTML.find('div.media').append('<div class="videoPlayer" id="videoPlayer' + index + '"></div>');

                // Push video out of view. Will bring back to view after video player has loaded.
                if (canMoveFlash()) {
                    panelHTML.find('.videoPlayer').css('marginLeft', '-9999em');
                }

                // Prevent race condition with append:
                setTimeout(function () {
                    var playerContainer = document.getElementById("videoPlayer" + index);
                    brightcove.createExperience(player, playerContainer, true);
                }, 100);
            } else {
                panelHTML.find('div.media').css('background', '#000');
            }
        } else if (panelData.imageSource) {
            // Embed static hero image

            self.panelTypes[index] = 'photo';

            if (panelData.imageLink) {
                elImage = $jq('<a href="' + panelData.imageLink + '"><img data-src="' + panelData.imageSource + '" width="550" height="310" alt="' + panelData.title + '" class="hero" /></a>');
                elImage.find('img').fadeTo(0, 0);
            } else {
                elImage = $jq('<img data-src="' + panelData.imageSource + '" width="550" height="310" alt="' + panelData.title + '" class="hero" />');
                elImage.fadeTo(0, 0);
            }

            panelHTML.find('div.media').append(elImage);
        }

        self.elStrip.append(panelHTML);
    }

    // Build all panels, hide all but the first.

    //buildPanel(self.contents.panels.length - 1, true);

    $jq(self.contents.panels).each(function (index) {
        buildPanel(index);
    });

    //buildPanel(0, true);

    $jq('li.panel').hide();
    $jq('li.panel:first-child').addClass('showing').fadeIn();

    self.jumpToPanel(0);

    // ------------------------------------------------------------
    // INTERACTION HANDLERS
    // ------------------------------------------------------------

    self.btnBack.click(function (e) {
        e.preventDefault();

        if (!self.isTransitioning) {
            self.back();
        }
    });

    self.btnNext.click(function (e) {
        e.preventDefault();

        if (!self.isTransitioning) {
            self.next();
        }
    });

    self.btnToggleAutoplay.click(function (e) {
        e.preventDefault();

        if (!self.isTransitioning) {
            self.toggleAutoplay();
        }
    });
};

HomepageCarousel.prototype = {

    // ------------------------------------------------------------
    // EVENT HANDLERS
    // ------------------------------------------------------------

    __onTemplateLoaded: function (experienceID) {
        var self = this;

        var bcExp = brightcove.getExperience(experienceID);

        self.brightcoveAPIs[experienceID] = {
            videoPlayer: bcExp.getModule(APIModules.VIDEO_PLAYER),
            experience: bcExp.getModule(APIModules.EXPERIENCE),
            contentModule: bcExp.getModule(APIModules.CONTENT)
        };

        if (!self.brightcoveAPIs[experienceID].experience) {
            alert('Brightcove experience can not be loaded.');
        }
        if (!self.brightcoveAPIs[experienceID].videoPlayer) {
            alert('Brightcove video can not be loaded.');
        }

        self.brightcoveAPIs[experienceID].experience.addEventListener(BCExperienceEvent.TEMPLATE_READY, function () { self.__onTemplateReady(); });
        self.brightcoveAPIs[experienceID].videoPlayer.addEventListener(BCMediaEvent.PLAY, function () { self.__onPlay(); });

        // Slight delay before bringing video into view (to hide white flash)
        if (canMoveFlash()) {
            setTimeout(function () {
                $jq('.videoPlayer').css('marginLeft', '0');
            }, flashMoveTimeout());
        }

    },
    __onTemplateReady: function (event) {
        var self = this;
    },
    __onPlay: function (event) {
        var self = this;

        if (self.autoRotationOn) {
            self.toggleAutoplay();
        }
    },
    __panelLoaded: function (index) {
        var self = this;

        if (self.autoRotationOn) {
            clearTimeout(self.rotationTimer);

            self.rotationTimer = setTimeout(function () {
                self.next();
            }, self.contents.panels[index].rotationTime * 1000);
        }

        if (self.contents.panels[index].imageSource) {
            self.preloadImage(index);

            // Preload next and previous as well:

            if (typeof self.contents.panels[index + 1] != 'undefined' && self.contents.panels[index + 1].imageSource) {
                self.preloadImage(index + 1);
            }

            if (typeof self.contents.panels[index - 1] != 'undefined' && self.contents.panels[index - 1].imageSource) {
                self.preloadImage(index - 1);
            } else if (self.contents.panels[self.totalPanels - 1].imageSource) {
                self.preloadImage(self.totalPanels - 1);
            }
        }
    },

    // ------------------------------------------------------------
    // METHODS
    // ------------------------------------------------------------

    next: function () {
        var self = this;

        self.swithToPanel(self.currentPanel + 1);
    },
    back: function () {
        var self = this;

        self.swithToPanel(self.currentPanel - 1);
    },
    swithToPanel: function (index) {
        var self = this;

        if (self.panelTypes[self.currentPanel] == 'video') {
            self.pauseVideo(self.currentPanel);
        }

        self.currentPanel = index;
        self.isTransitioning = true;

        var showing = self.elStrip.find('li.showing');
        var firstPan = self.elStrip.find('li.panel:first-child');
        var lastPan = self.elStrip.find('li.panel:last-child');

        var elPanel = self.elStrip.find('li.panel[data-index="' + index + '"]');
        if (self.currentPanel == self.totalPanels) {
            elPanel = firstPan;
        } else if (index == -1) {
            elPanel = lastPan;
        }

        $jq('.navButtons').fadeOut(450).fadeIn(450);

        showing.removeClass('showing').fadeOut(750);

        elPanel.addClass('showing').delay(350).fadeIn(750, function () {
            if (index >= 0 && index < self.totalPanels) {
                self.__panelLoaded(self.currentPanel);
            } else if (index < 0) {
                self.jumpToPanel(self.totalPanels - 1);
            } else if (index >= self.totalPanels) {
                self.jumpToPanel(0);
            }
            self.isTransitioning = false;
        });


    },
    jumpToPanel: function (index) {
        var self = this;

        self.currentPanel = index;
        self.__panelLoaded(self.currentPanel);
    },
    toggleAutoplay: function () {
        var self = this;

        if (self.autoRotationOn) {
            clearTimeout(self.rotationTimer);
            self.autoRotationOn = false;
        } else {
            self.autoRotationOn = true;
            self.next();
        }

        self.updateUI();
    },
    preloadImage: function (index) {
        var self = this;

        var elImage = self.elStrip.find('li.panel[data-index="' + index + '"] img.hero');

        if (elImage.attr('data-src')) {
            elImage.one('load', function (event) {
                $jq(this).fadeTo(800, 1);
                elImage.removeAttr('data-src');
            });

            elImage.attr('src', self.contents.panels[index].imageSource);
        }
    },
    updateUI: function () {
        var self = this;

        if (self.autoRotationOn) {
            self.btnToggleAutoplay.removeClass('disabled');
        } else {
            self.btnToggleAutoplay.addClass('disabled');
        }
    },
    pauseVideo: function (index) {
        var self = this;
        if (self.brightcoveAPIs[index]) {
            self.brightcoveAPIs[index].videoPlayer.pause();
        }
    }
};