﻿function ShowVideoPlayer() {
    // Do nothing - there is a hard coded onclick in markup somewhere that keeps trying to fire this event - hunt and remove it.

    var videoWidth = 420;
    var videoHeight = 400;

    var videos = [
         [269957, "/2/2010_2_25/disc-lriveramdb_472x237_high.jpg", "Sony 1"],
         [269958, "/2/2010_2_25/disc-makebeats_472x237_high.jpg", "Sony 2"],
         [269959, "/2/2010_2_25/disc-js_sony_finalcc_472x237_high.jpg", "Sony 3"],
         [269960, "/2/2010_2_25/disc-01_bt_472x237_high.jpg", "Sony 4"],
         [269963, "/2/2010_2_25/disc-sony004_743x418_vid4_high.jpg", "Sony 5"],
         [269964, "/2/2010_2_25/disc-mihai_472x237_high.jpg", "Sony 6"],
      ];

    var theme = "http://watch.discoverychannel.ca/themes/Discovery/player/theme.aspx";
    showVideoPlayer(videos, videoWidth, videoHeight, theme);
    jQuery("#HomepagePromoModuleVideo").hide();
    //Stop the homepage video player
    Player.GetInstance().Wait();

    // Bind the modal closing code to the close button and modal background clicks. Use live to allow automatic rebinding later
    jQuery("#myModal, .videoCloseButton, .centreHorizontal").live("click", function() {
        jQuery(".centreHorizontal").remove();
        jQuery("#myModal").fadeTo("slow", 0, function() {
            jQuery("#myModal").remove();
            jQuery("#HomepagePromoModuleVideo").show();
            //Restart the homepage video player
            Player.GetInstance().Play(Playlist.GetInstance().Current);
        });
    });
}

/*
jQuery("document").ready(function () {
   /// <summary>jQuery ready() event fires once the DOM and all resources are loaded</summary>

   // Bind a click event to the RotatorAd; preventDefault() so any hard coded click handlers are not executed
   jQuery("#RotatorAd").click(function (e) {
      e.preventDefault();

      var videoWidth = 420;
      var videoHeight = 400;

      var videos = [
         [269957, "/2/2010_2_25/disc-lriveramdb_472x237_high.jpg", "Sony 1"],
         [269958, "/2/2010_2_25/disc-makebeats_472x237_high.jpg", "Sony 2"],
         [269959, "/2/2010_2_25/disc-js_sony_finalcc_472x237_high.jpg", "Sony 3"],
         [269960, "/2/2010_2_25/disc-01_bt_472x237_high.jpg", "Sony 4"],
         [269963, "/2/2010_2_25/disc-sony004_743x418_vid4_high.jpg", "Sony 5"],
         [269964, "/2/2010_2_25/disc-mihai_472x237_high.jpg", "Sony 6"],
      ];

      var theme = "http://watch.discoverychannel.ca/themes/Discovery/player/theme.aspx";
      showVideoPlayer(videos, videoWidth, videoHeight, theme);
      jQuery("#HomepagePromoModuleVideo").hide();
      return false;
   });

   // Bind the modal closing code to the close button and modal background clicks. Use live to allow automatic rebinding later
   jQuery("#myModal, .videoCloseButton, .centreHorizontal").live("click", function () {
      jQuery(".centreHorizontal").remove();
      jQuery("#myModal").fadeTo("slow", 0, function () {
         jQuery("#myModal").remove();
         jQuery("#HomepagePromoModuleVideo").show();
      });
   });
});
*/

function showVideoPlayer(clipArray, videoWidth, videoHeight, theme) {
   /// <summary>Renders a modal layer and iframe into the current document</summary>
   var clipNumber = parseInt(Math.floor(Math.random() * 6));

   // Append markup to render the modal layer plus our player container and iframe
   jQuery("body").append("<div id=\"myModal\"></div><div class=\"centreHorizontal\"><div id=\"myVideoContainer\"><div id=\"CloseBtnVideo\" class=\"videoCloseButton\">Close</div><iframe id=\"popupOneClip\" name=\"popupOneClip\" style=\"width:100%;height:600px;\" frameBorder=\"0\" src=\"Default_sony.aspx\"></iframe></div></div>");

   /* Style the modal, container and the parts of the iframe that the parent (that's us here) have access to.
   * The actual iframe contents are styled from within the iframe by passing variables in.
   * Note: The styles here should be moved to an external style sheet asap (with the exception of the 
   * calculated values) */
   jQuery("#myModal").css({
      width: jQuery(document).width(),
      height: jQuery(document).height(),
      left: 0,
      top: 0,
      position: "absolute",
      display: "block",
      backgroundColor: "#000",
      zIndex: 6000,
      opacity: 0.0
   }).fadeTo("medium", 0.85, function () {

      jQuery(".centreHorizontal").css({
         position: "absolute",
         top: "0px",
         left: "0px",
         width: "100%",
         height: jQuery(window).height() + "px",
         zIndex: 6005
      });

      jQuery("#myVideoContainer").css({
         minWidth: "100px",
         minHeight: "100px",
         backgroundColor: "#000",
         margin: "auto",
         marginTop: 100,
         zIndex: 6006,
         padding: "20px",
         width: videoWidth  // Set the width of the div interior, will be same as iframe width, etc
      });

      // iframe
      jQuery("#popupOneClip").css({
         zIndex: 7000,
         width: videoWidth,
         height: videoHeight,
         border: "0 none #000",
         backgroundColor: "#000",
         overflow: "hidden"
      });

      // Set the iframe's onload event to call it's built-in ShowVideoPlayer() method with the following parameters
      
      // NOTE: setting the load event here causes IE to fail 90% of the time because it can't find the event. Commenting it out works for both
      //       ie and ff, although ff shows a number of debug statements in fb

      //jQuery("#popupOneClip").load(function () {
         jQuery("#popupOneClip")[0].contentWindow.ShowVideoPlayer(
            clipArray[clipNumber][0],
            clipArray[clipNumber][1],
            clipArray[clipNumber][2],
            theme
            );
      //});
   });


}
