HeroPanel = function (width, height) {
    this.w = width;
    this.h = height;

    this.hero_player_loaded = false;
    this.current_video_id = 0;
    this.bcExp;
    this.modVP;
    this.modExp;
    this.modCon;

    //    this.__clickable_click = function (evt) {
    //    };

    $("#slide .clickable-area,#slide .title").bind('click', { target: this }, function (evt) {
        var url = $(this).parents(".box").find("input.video-id").val();
        if (url.match(/^http:/i))
        { window.location.href = url; }
        else
        { evt.data.target.__ShowPlayer(url); }
    });


    if ($("#slide .box").length > 1) {
        $("#slide").cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 5000,
            pager: '#nav'
        });
    }
    else {
        $("#slide .box").show();
    }

    this.__ShowPlayer = function (video_id) {

        $("#slide").cycle("pause");

        var playerContainer = $(".slide-box .hero-player");

        current_video_id = video_id;

        if (!this.hero_player_loaded) {
            this.hero_player_loaded = true;

            var params = {};
            params.playerID = "86663850001";
            params.publisherID = "82075139001";
            params.autoStart = "true";
            params.bgcolor = "#111111";
            params.width = this.w;
            params.height = this.h;
            params.isVid = "true";
            params.isUI = "true";
            params.swLiveConnect = "true";
            params.allowScriptAccess = "always";

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

            var b = brightcove.createExperience(player, playerContainer[0], true);
        }
        $(".slide-box #slide").hide();
        $(".slide-box .hero-player").show();

        $(".slide-box .hero-player object")[0].outerHTML = $(".slide-box .hero-player object")[0].outerHTML;

    };


    $(".nav-box a.prev").css("display:none;");

    $("#slide").hover(function () {
        $("#slide").cycle("pause");
    }, function () {
        if ($(".slide-box .hero-player").is(":hidden"))
        { $("#slide").cycle("resume"); }
    });

    /*
    $("#slide span.title").hover(function () {
        //$(this).css("text-decoration", "underline");
        //$("#slide").cycle("pause");
    }, function () {
        //$(this).css("text-decoration", "none");
        //$("#slide").cycle("resume");
    });
    */

    $(".play-video-img").live('mouseover mouseout',
           function (evt) {
               if (evt.type == 'mouseover') {
                   $(this).attr('src', $(this).attr('src').replace('play', 'play-hover'));
               } else {
                   $(this).attr('src', $(this).attr('src').replace('play-hover', 'play'));
               }
           }
    );
}

function HidePlayer() {
    $(".slide-box #slide").show();
    $(".slide-box .hero-player").hide();
    $("#slide").cycle("resume");
};



function  onTemplateLoaded (experienceID) {

    bcExp = brightcove.getExperience(experienceID);

    modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
    modExp = bcExp.getModule(APIModules.EXPERIENCE);
    modCon = bcExp.getModule(APIModules.CONTENT);

    modExp.addEventListener(BCExperienceEvent.CONTENT_LOAD, function (evt) {
        modCon.getMediaAsynch(current_video_id);
    });

    modCon.addEventListener(BCContentEvent.VIDEO_LOAD, function (evt) {
        modVP.loadVideo(evt.video.id);
    });

    modVP.addEventListener(BCMediaEvent.COMPLETE, function (evt) {
        HidePlayer();
    });
    modVP.addEventListener(BCMediaEvent.STOP, function (evt) {
        HidePlayer();
    });

};