// ***** Constants [start]

var AssetPagePlayerConsts = {
  MAX_WIDTH: 500,
  DEFAULT_HEIGHT: 333,
  DEFAULT_VIDEO_HEIGHT: 400,
  DEFAULT_DOC_HEIGHT: 660,
  DEFAULT_TEXT_HEIGHT: 200
}

var AssetPageDefaultImage = new Image(AssetPagePlayerConsts.MAX_WIDTH, AssetPagePlayerConsts.DEFAULT_HEIGHT);
AssetPageDefaultImage.src = "/Images/AssetPage/assetpage_default.jpg";

// ***** Constants [end]

// ***** Asset Page abstract player class [start]

function AssetPagePlayer(playerType, container) {
  this.playerType = playerType;
  this.container = container;
  this.assetWidth = 0;
  this.assetHeight = 0;
}

// -------- Functions that must be implemented in children [start]:

AssetPagePlayer.prototype.init = function() {

}

AssetPagePlayer.prototype.getHtml = function() {

}

// -------- Functions that must be implemented in children [end]:

AssetPagePlayer.prototype.getFrameDiv = function(id, className) {
  var frameDiv = document.createElement("div");
  frameDiv.className = "AssetPage_image_player_frame";
  //frameDiv.onmousedown = function() { return false }; Caused problems with Safari
  frameDiv.onclick = function() { return false };
  frameDiv.style.width = (this.assetWidth + 6) + "px";
  frameDiv.style.height = (this.assetHeight + 6) + "px";
  frameDiv.style.overflow = "hidden";

  var innerFrame = document.createElement("div");
  innerFrame.setAttribute("id", id);
  innerFrame.className = className;
  innerFrame.style.width = (this.assetWidth) + "px";
  innerFrame.style.height = (this.assetHeight) + "px";
  frameDiv.appendChild(innerFrame);
  return { frame: frameDiv, inner: innerFrame };
}

AssetPagePlayer.prototype.idleView = function() {
  AssetPageRemoveChildren($get("AssetPage_player_container"));
  this.assetWidth = AssetPagePlayerConsts.MAX_WIDTH;
  this.assetHeight = AssetPagePlayerConsts.DEFAULT_HEIGHT;
  var frame = this.getFrameDiv("AssetPage_image_player", "AssetPage_image_player_image");
  frame.inner.style.backgroundImage = "url(/Images/AssetPage/assetpage_loading.gif)";
  frame.inner.style.backgroundColor = "#000000";
  $get("AssetPage_player_container").appendChild(frame.frame);
}

AssetPagePlayer.prototype.draw = function() {
  AssetPageRemoveChildren($get("AssetPage_player_container"));
  $get("AssetPage_player_container").appendChild(this.getHtml());
  $get("AssetPage_player_container").style.display = "none";
  $get("AssetPage_player_container").style.display = "block";
}

// ***** Asset Page abstract player class [end]

// ***** Asset Page Image player class [start]
function AssetPageImagePlayer(playerType, container) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
}
AssetPageImagePlayer.prototype = new AssetPagePlayer();
AssetPageImagePlayer.prototype.constructor = AssetPagePlayer;

AssetPageImagePlayer.prototype.init = function() {
  var contentUrl = this.container.assetData.ContentURL;
  this.contentImage = new Image();
  // Famous picasa hack:
  if (contentUrl.indexOf("ggpht.com") > 0)
    contentUrl += "?imgmax=800";
  this.contentImage.src = (contentUrl != "") ? contentUrl : AssetPageDefaultImage.src;
  if (this.contentImage.width == 0) {
    this.loadInterval = setInterval(ContextDelegate(this, this.checkLoaded), 500);
    this.loadTimeoutEnd = setTimeout(ContextDelegate(this, this.loadTimeout), 10000);
  } else {
    this.draw();
    if (this.container.isLoggedIn && this.container.assetData.CanAddMarker)
      this.markerCanvasInterval = setInterval(ContextDelegate(this, this.markerCanvas), 200);
    else
      $get("Marker_canvas").style.cursor = "default";
  }
}

AssetPageImagePlayer.prototype.checkLoaded = function() {
  if (this.contentImage.width > 0) {
    clearInterval(this.loadInterval);
    clearInterval(this.loadTimeoutEnd);
    this.draw();
    if (this.container.isLoggedIn && this.container.assetData.CanAddMarker)
      this.markerCanvasInterval = setInterval(ContextDelegate(this, this.markerCanvas), 200);
    else
      $get("Marker_canvas").style.cursor = "default";
  }
}

AssetPageImagePlayer.prototype.markerCanvas = function() {
  if (this.contentImage.width > 0) {
    if ($get("AssetPage_image_player") != null) {
      if (markerController.setCanvas(this.container.assetData.ID)) {
        clearInterval(this.markerCanvasInterval);
        if (this.contentImage.width < 30 || this.contentImage.height < 30) {
          this.container.disablePersonMarkers();
          return;
        }
        $get("AssetPage_image_player").style.backgroundImage = "url()";
      }
    }
  }
}

AssetPageImagePlayer.prototype.loadTimeout = function() {
  clearInterval(this.loadInterval);
  clearInterval(this.loadTimeoutEnd);
  this.contentImage.src = "/Images/AssetPage/assetpage_default.jpg";
  this.draw();
}

AssetPageImagePlayer.prototype.getHtml = function() {
  var curWidth = Math.min(this.contentImage.width, AssetPagePlayerConsts.MAX_WIDTH);
  var ratio = this.contentImage.width / this.contentImage.height;
  var curHeight = Math.round(curWidth / ratio);
  this.assetWidth = curWidth;
  this.assetHeight = curHeight;
  var canvas = document.createElement("div");
  canvas.setAttribute("id", "Marker_canvas");
  if (!isIE) {
    canvas.style.position = "relative";
  }
  canvas.style.width = this.assetWidth + "px";
  canvas.style.height = this.assetHeight + "px";
  canvas.style.background = "url(/Images/null.gif)";
  canvas.style.cursor = "crosshair";
  var marginTop = 0 - this.assetHeight;
  canvas.style.marginTop = marginTop + "px";

  var image = document.createElement("img");
  image.setAttribute("src", this.contentImage.src);
  image.setAttribute("width", this.assetWidth);
  image.setAttribute("height", this.assetHeight);
  image.onmousedown = function() { return false };
  image.onclick = function() { return false };
  image.ondragstart = function() { return false };
  image.onselectstart = function() { return false };
  image.style.width = this.assetWidth + "px";
  image.style.height = this.assetHeight + "px";


  var frame = this.getFrameDiv("AssetPage_image_player", "AssetPage_image_player_image");
  frame.inner.onmousedown = function() { return false };
  frame.inner.onclick = function() { return false };
  frame.inner.appendChild(image);
  frame.inner.appendChild(canvas);
  return frame.frame;
}

AssetPageImagePlayer.prototype.idleView = function() {
  AssetPageRemoveChildren($get("AssetPage_image_player"));
  $get("AssetPage_image_player").style.backgroundImage = "url(/Images/AssetPage/assetpage_loading.gif)";
}

// ***** Asset Page Image player class [end]

// ***** Asset Page General Embedded player class [start]


function AssetPageEmbeddedPlayer(playerType, container, width, height) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
  this.defaultWidth = width;
  this.defaultHeight = height;
}
AssetPageEmbeddedPlayer.prototype = new AssetPagePlayer();
AssetPageEmbeddedPlayer.prototype.constructor = AssetPagePlayer;

AssetPageEmbeddedPlayer.prototype.init = function() {
  this.contentUrl = this.container.assetData.ContentURL;
  this.embededCode = this.container.assetData.EmbededCode;
  if ((this.embededCode == undefined) ||
      (this.container.assetData.OriginWidth == 0) ||
      (this.container.assetData.OriginHeight == 0)) {
    this.assetWidth = this.defaultWidth;
    this.assetHeight = this.defaultHeight;
    this.defaultWidth += 6;
    this.defaultHeight += 6;
  } else {
    if (this.container.assetData.OriginWidth > (this.defaultWidth + 6)) {
      // resizing to fit:
      this.assetWidth = AssetPagePlayerConsts.MAX_WIDTH;
      this.assetHeight = AssetPagePlayerConsts.DEFAULT_VIDEO_HEIGHT;
      // changing the embed code:
      this.embededCode = ReplaceAll(this.embededCode, this.container.assetData.OriginWidth, this.assetWidth);
      this.embededCode = ReplaceAll(this.embededCode, this.container.assetData.OriginHeight, this.assetHeight);
    } else {
      this.assetWidth = this.container.assetData.OriginWidth;
      this.assetHeight = this.container.assetData.OriginHeight;
    }
    this.defaultWidth = this.assetWidth + 6;
    this.defaultHeight = this.assetHeight + 6;
  }
  this.draw();
}

AssetPageEmbeddedPlayer.prototype.getHtml = function() {
  var frame = this.getFrameDiv("AssetPage_video_player_container", "AssetPage_image_player_image");
  if (this.embededCode == undefined) {
    // creating embedded code out of contentUrl
    curHtml = '\
          <object width="' + this.assetWidth + '" height="' + this.assetHeight + '">\
            <param name="movie" value="' + this.contentUrl + '"></param>\
            <param name="wmode" value="transparent"></param>\
            <embed src="' + this.contentUrl + '"\
              type="application/x-shockwave-flash"\
              wmode="transparent"\
              width="' + this.assetWidth + '" height="' + this.assetHeight + '">\
            </embed>\
          </object>';
  } else {
    curHtml = this.embededCode;
  }
  frame.inner.innerHTML = curHtml;
  return frame.frame;
}

AssetPageEmbeddedPlayer.prototype.idleView = function() {
  $get("AssetPage_video_player_container").style.backgroundImage = "url(/Images/AssetPage/assetpage_loading.gif)";
  AssetPageRemoveChildren($get("AssetPage_video_player_container"));
}

// ***** Asset Page General Embedded player class [end]

// ***** Asset Page AoM Embedded player class [start]


function AssetPageAomEmbeddedPlayer(playerType, container, width, height) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
  this.defaultWidth = width;
  this.defaultHeight = height;
}
AssetPageAomEmbeddedPlayer.prototype = new AssetPagePlayer();
AssetPageAomEmbeddedPlayer.prototype.constructor = AssetPagePlayer;

AssetPageAomEmbeddedPlayer.prototype.init = function() {
  this.contentUrl = this.container.assetData.ContentURL;
  this.assetWidth = this.defaultWidth;
  this.assetHeight = this.defaultHeight;
  this.defaultWidth = this.assetWidth + 6;
  this.defaultHeight = this.assetHeight + 6;
  this.draw();
}

AssetPageAomEmbeddedPlayer.prototype.getHtml = function() {
  var frame = this.getFrameDiv("AssetPage_video_player_container", "AssetPage_image_player_image");
  // creating embedded code out of contentUrl
  curHtml = '\
        <object width="' + this.assetWidth + '" height="' + this.assetHeight + '">\
          <param name="movie" value="/swf/FlvPlayer/DefaultPlayer.swf"></param>\
          <param name="wmode" value="transparent"></param>\
          <param name="FlashVars" value="flv=' + this.contentUrl + '"></param>\
          <embed src="/swf/FlvPlayer/DefaultPlayer.swf"\
            type="application/x-shockwave-flash"\
            wmode="transparent"\
            width="' + this.assetWidth + '" height="' + this.assetHeight + '"\
            flashvars="flv=' + this.contentUrl + '">\
          </embed>\
        </object>';
  frame.inner.innerHTML = curHtml;
  return frame.frame;
}

AssetPageAomEmbeddedPlayer.prototype.idleView = function() {
  $get("AssetPage_video_player_container").style.backgroundImage = "url(/Images/AssetPage/assetpage_loading.gif)";
  AssetPageRemoveChildren($get("AssetPage_video_player_container"));
}

// ***** Asset Page Aom Embedded player class [end]


// ***** Asset Page YouTube player class [start]

function AssetPageYouTubePlayer(playerType, container) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
  this.defaultWidth = 425;
  this.defaultHeight = 344;
  this.defaultContentUrl = "http://www.youtube.com/v/S8Z27TJ0aDM&hl=en";
}
AssetPageYouTubePlayer.prototype = new AssetPagePlayer();
AssetPageYouTubePlayer.prototype.constructor = AssetPagePlayer;

AssetPageYouTubePlayer.prototype.init = function() {
  this.assetWidth = this.defaultWidth;
  this.assetHeight = this.defaultHeight;
  this.contentUrl = (this.container.assetData.ContentURL == "") ? this.defaultContentUrl : this.container.assetData.ContentURL;
  this.draw();
}

AssetPageYouTubePlayer.prototype.getHtml = function() {
  var frame = this.getFrameDiv("AssetPage_video_player_container", "AssetPage_image_player_image");
  frame.inner.innerHTML = '\
        <object width="' + this.assetWidth + '" height="' + this.assetHeight + '">\
          <param name="movie" value="' + this.contentUrl + '"></param>\
          <param name="wmode" value="transparent"></param>\
          <embed src="' + this.contentUrl + '"\
            type="application/x-shockwave-flash"\
            wmode="transparent"\
            width="' + this.assetWidth + '" height="' + this.assetHeight + '">\
          </embed>\
        </object>';
  return frame.frame;
}

AssetPageYouTubePlayer.prototype.idleView = function() {
  $get("AssetPage_video_player_container").style.backgroundImage = "url(/Images/AssetPage/assetpage_loading.gif)";
  AssetPageRemoveChildren($get("AssetPage_video_player_container"));
}

// ***** Asset Page YouTube player class [end]

// ***** Asset Page Twitter update class [start]

function AssetPageTwitterPlayer(playerType, container) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
  this.defaultWidth = AssetPagePlayerConsts.MAX_WIDTH;
  this.defaultHeight = AssetPagePlayerConsts.DEFAULT_TEXT_HEIGHT;
}

AssetPageTwitterPlayer.prototype = new AssetPagePlayer();
AssetPageTwitterPlayer.prototype.constructor = AssetPagePlayer;

AssetPageTwitterPlayer.prototype.init = function() {
  this.assetWidth = this.defaultWidth;
  this.assetHeight = this.defaultHeight;
  this.draw();
}

AssetPageTwitterPlayer.prototype.getHtml = function() {
  var frame = this.getFrameDiv("AssetPage_twitter_update_container", "AssetPage_twitter_text");
  frame.inner.innerHTML = assetPage.assetData.Title;
  return frame.frame;
}

AssetPageTwitterPlayer.prototype.idleView = function() {
  $get("AssetPage_twitter_update_container").innerHTML = "";
}

// ***** Asset Page Twitter update class [end]

// ***** Asset Page Album player class [start]
function AssetPageAlbumPlayer(playerType, container) {
  this.constructor(playerType, container);
  this.thumbSize = 85;
}
AssetPageAlbumPlayer.prototype = new AssetPagePlayer();
AssetPageAlbumPlayer.prototype.constructor = AssetPagePlayer;

AssetPageAlbumPlayer.prototype.init = function() {
  this.assets = new Object();
  var curID, curData;
  for (var i = 0; i < this.container.albumObject.assets.length; i++) {
    curID = this.container.albumObject.assets[i].ID;
    curData = this.container.albumObject.assets[i];
    this.assets[curID] = new AssetPageAlbumAsset(this, curData);
  }
  this.draw();
}

AssetPageAlbumPlayer.prototype.getHtml = function() {
  var curHtml = document.createElement("div");
  curHtml.className = "AssetPage_album_player_frame";
  var i = 1;
  var curThumb, j;
  for (var curID in this.assets) {
    curThumb = this.assets[curID].getHtml(i++);
    for (j = 0; j < curThumb.length; j++) {
      curHtml.appendChild(curThumb[j]);
    }
  }
  return curHtml;
}

AssetPageAlbumAsset = function(container, curData) {
  this.container = container;
  this.data = curData;
}

AssetPageAlbumAsset.prototype.getHtml = function(i) {
  var curWidth = this.data.Width;
  var curHeight = this.data.Height;
  var maxSize = this.container.thumbSize - 7;
  if (Math.max(curWidth, curHeight) >= maxSize) {
    // thumbnail width or height is above standard:
    var ratio = curWidth / curHeight;
    if (ratio <= 1) {
      // portrait:
      curWidth = Math.floor(maxSize * ratio);
      curHeight = maxSize;
    } else {
      // landscape:
      curWidth = maxSize;
      curHeight = Math.floor(maxSize / ratio);
    }
  }
  var paddingLeft = Math.floor((this.container.thumbSize - curWidth - 6) / 2);
  var paddingTop = Math.floor((this.container.thumbSize - curHeight - 6) / 2);
  var containerWidth = this.container.thumbSize - paddingLeft;
  var containerHeight = this.container.thumbSize - paddingTop;
  var thumbWidth = Math.max(curWidth, (this.container.thumbSize - 6));
  var thumbHeight = Math.max(curHeight, (this.container.thumbSize - 7));

  // creating DOM elements:
  var thumbContainer = document.createElement("div");
  thumbContainer.setAttribute("id", "AssetPage_album_container_" + this.data.ID);
  thumbContainer.className = "AssetPage_album_thumb";
  thumbContainer.style.paddingLeft = paddingLeft + "px";
  thumbContainer.style.paddingTop = paddingTop + "px";
  thumbContainer.style.width = containerWidth + "px";
  thumbContainer.style.height = containerHeight + "px";


  var thumb = document.createElement("div");
  thumb.setAttribute("id", "AssetPage_album_thumb_" + this.data.ID);
  thumb.className = "AssetPage_album_thumb_thumb";
  thumb.setAttribute("data_id", this.data.ID);
  //thumb.onmousover = function() { $get("AssetPage_album_arrow_" + this.attributes.data_id.value).style.display = "block" };
  //thumb.onmouseout = function() { $get("AssetPage_album_arrow_" + this.attributes.data_id.value).style.display = "none" };
  thumb.onclick = function() { assetPage.albumObject.assetClicked(this.attributes.data_id.value) };
  thumb.style.width = curWidth + "px";
  thumb.style.height = curHeight + "px";
  thumb.style.backgroundRepeat = "no-repeat";
  if (this.data.Url == "") {
    thumb.style.backgroundImage = "url(/Images/AssetPage/assetpage_default_thumb.jpg)";
  } else {
    thumb.style.backgroundImage = "url(" + this.data.Url + ")";
    thumb.style.backgroundPosition = "0 0";
  }

  /*var arrow = document.createElement("div");
  arrow.setAttribute("id", "AssetPage_album_arrow_" + this.data.ID);
  arrow.setAttribute("title", "Options...");
  arrow.setAttribute("data_id", this.data.ID);
  arrow.className = "AssetPage_album_thumb_arrow";
  arrow.onmousover = function() { $get("AssetPage_album_arrow_" + this.attributes.data_id.value).style.display = "block" };
  arrow.onmouseout = function() { $get("AssetPage_album_arrow_" + this.attributes.data_id.value).style.display = "none" };
  thumb.appendChild(arrow);*/

  var right = document.createElement("div");
  right.className = "AssetPage_album_thumb_right";
  var innerRight = document.createElement("div");
  innerRight.style.height = (curHeight + 1) + "px";
  innerRight.className = "AssetPage_album_thumb_right_right";
  right.appendChild(innerRight);

  var bottom = document.createElement("div");
  bottom.style.width = (curWidth + 7) + "px";
  var bottomLeft = document.createElement("div");
  bottomLeft.className = "AssetPage_album_thumb_bottom_left";
  var bottomRight = document.createElement("div");
  bottomRight.className = "AssetPage_album_thumb_bottom_right";
  bottom.appendChild(bottomLeft);
  bottom.appendChild(bottomRight);

  thumbContainer.appendChild(thumb);
  thumbContainer.appendChild(right);
  thumbContainer.appendChild(bottom);
  bottom.className = "AssetPage_album_thumb_bottom";

  if ((i % 5) == 0) {
    var clearDiv = document.createElement("div");
    clearDiv.style.clear = "left";
    return new Array(thumbContainer, clearDiv);
  } else {
    return new Array(thumbContainer);
  }
}


// ***** Asset Page Album player class [end] AssetPageYouTubePlayer

// ***** Asset Page Default player class [start]

function AssetPageDefaultPlayer(playerType, container) {
  this.constructor(playerType, container);
  this.loadingStatus = 0;
}

AssetPageDefaultPlayer.prototype = new AssetPagePlayer();
AssetPageDefaultPlayer.prototype.constructor = AssetPagePlayer;

AssetPageDefaultPlayer.prototype.init = function() {
  this.defaultWidth = AssetPageDefaultImage.width;
  this.defaultHeight = AssetPageDefaultImage.height;
  this.draw();
}

AssetPageDefaultPlayer.prototype.getHtml = function() {
  var frame = this.getFrameDiv("AssetPage_image_player", "AssetPage_image_player_image");
  frame.inner.style.backgroundImage = "url('" + AssetPageDefaultImage.src + "')";
  return frame.frame;
  return curHtml;
}

AssetPageDefaultPlayer.prototype.idleView = function() {
  $get("AssetPage_image_player").style.backgroundImage = "url('/Images/AssetPage/assetpage_loading.gif')";
  $get("AssetPage_image_player").style.backgroundColor = "#000000";
}

// ***** Asset Page Default player class [end]


// ***** Players Factory [start]

function AssetPagePlayersFactory(playerType, container) {
  switch (playerType) {
    case "AomImagePlayer":
      return new AssetPageImagePlayer(playerType, container);
    case "YouTubeVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 425, 344);
    case "MetacafeVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 400, 345);
    case "VimeoVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 400, 300);
    case "BreakVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 464, 392);
    case "DailyMotionVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 420, 336);
    case "PicasaVideoPlayer":
    case "GoogleVideoPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, 400, 396);
    case "AomFlashPaperPlayer":
      return new AssetPageEmbeddedPlayer(playerType, container, AssetPagePlayerConsts.MAX_WIDTH, AssetPagePlayerConsts.DEFAULT_DOC_HEIGHT);
    case "AomVideoPlayer":
      return new AssetPageAomEmbeddedPlayer(playerType, container, 400, 346);
    case "Album":
      return new AssetPageAlbumPlayer(playerType, container);
    case "TwitterUpdatePlayer":
      return new AssetPageTwitterPlayer(playerType, container);
    default:
      return new AssetPageDefaultPlayer(playerType, container);
  }
}

// ***** Players Factory [end]