/*
    RotatingBanners.js
    part of Envision IT Image Rotator Web Part

    Copyright  Envision IT 2011 - All rights reserved
    Not to be used without a licensed copy of the Image Rotator installed
*/
/* Last modified Sept 2 2011 */

var BannerImageIDs = new Array();
var ButtonImageUncheckIDs = new Array();
var ButtonImageCheckIDs = new Array();

var BannerImageIndex = 0; // Which image is the current image
var BannerPaused = 0;
var timeoutID;
var BannerImageCount = 0;

if (typeof (console) == 'undefined') {
  console = {};
  console.log = function () { };
}

function BannerImageOnClick() {
  var $ = jQuery;
  var item, el;

  item = BannerImagesData.items[BannerImageIndex];

  if (item.target != '') {
    if (item.is_video) {
      if (EIT_ImageRotator_PausePlay == 1) {
        window.clearTimeout(timeoutID);
        BannerPaused = 1;
        document.getElementById('ButtonPause').style.display = 'none';
        document.getElementById('ButtonPlay').style.display = 'block';
      }
      LaunchYouTubeVideo(item.target, '640', '385');
    }
    else {
      location.href = item.target;
    }
  }
}

function SetBannerImage() {
  for (ii = 0; ii < BannerImageCount; ii++) {
    if (ii == BannerImageIndex) {
      BannerImageIDs[ii].style.display = 'block';
      if (ButtonImageCheckIDs[ii]) {
        ButtonImageCheckIDs[ii].style.display = 'block';
      }
      if (ButtonImageUncheckIDs[ii]) {
        ButtonImageUncheckIDs[ii].style.display = 'none';
      }
    }
    else {
      BannerImageIDs[ii].style.display = 'none';
      if (ButtonImageCheckIDs[ii]) {
        ButtonImageCheckIDs[ii].style.display = 'none';
      }
      if (ButtonImageUncheckIDs[ii]) {
        ButtonImageUncheckIDs[ii].style.display = 'block';
      }
    }
  }
}

function RotateImages() {
  if (BannerPaused == 0) {
    console.log('rotating images...');
    BannerImageIndex += 1;
    if (BannerImageIndex == BannerImageCount) {
      BannerImageIndex = 0;
    }
    SetBannerImage();
    timeoutID = window.setTimeout(function () {
      RotateImages()
    }, TRANSITION_TIME);
  }
}

function InitializeRotatingBanners() {
  var currentItem;
  var $ = jQuery;

  console.log('InitializeRotatingBanners has been called');

  // if the web part is in designer mode, the variables may not have been rendered
  if (typeof (BannerImagesData) == 'undefined') {
    console.log('no BannerImagesData is defined');
    return;
  }

  // check for image rotation elements
  if (!document.getElementById('RotatingPromoIndex1')) {
    console.log('Image rotation elements are not on the page');
    return;
  }

  // this version uses jQuery for event registration
  if (typeof (jQuery) == 'undefined') {
    console.log('this version of the Image rotator script requires jQuery 1.4+');
    return;
  }

  BannerImageCount = BannerImagesData.count;
  for (ii = 1; ii <= BannerImageCount; ii++) {
    BannerImageIDs[ii - 1] = document.getElementById('RotatingPromoIndex' + ii);
    ButtonImageCheckIDs[ii - 1] = document.getElementById('ButtonImage' + ii);
    ButtonImageUncheckIDs[ii - 1] = document.getElementById('ButtonImage' + ii + "-2");
  }

  // Start the rotation sequence
  timeoutID = window.setTimeout(function () {
    RotateImages()
  }, TRANSITION_TIME);
}

function GoToBannerImage(index) {
  if ((index > 0) && (index <= BannerImageCount)) {
    BannerImageIndex = index - 1;
    if (EIT_ImageRotator_PausePlay == 1) {
      window.clearTimeout(timeoutID);
      BannerPaused = 1;
      document.getElementById('ButtonPause').style.display = 'none';
      document.getElementById('ButtonPlay').style.display = 'block';
    }
    console.log('pausing rotation!');
    SetBannerImage();
  }
}

function LaunchYouTubeVideo(url, w, h) {
  console.log('LaunchYouTubeVideo');
  if (typeof (jQuery) != 'undefined') {
    $ = jQuery;
    var ml = document.getElementById('shadeLayer');
    if (!ml) {
      // still need to create the shadeLayer
      ml = $('<div id="shadeLayer" style="display:none;"></div>')
      // #1019 fix for Firefox and Safari - not just Ipad
      $('body').prepend(ml);
    } else {
      ml = $(ml).css('display', 'none');
    }
    // #1019 fix fast fade first
    ml.fadeTo("fast", 0.8);

    // #1019 and a new Grey Content area
    var content = $("<div></div>").addClass("greyContentArea1");
    $("body").prepend(content);

    content.fadeTo("fast", 1, function () {
      console.log('fading in...');
      // #1019 fade in a new Grey Content area
      $('div.greyContentArea1').html(GetYouTubeObject(url, w, h)).find('.topbar div').click(function () {
        // #1019 2 layers to fade out
        // make sure the video stops playing first !
        //document.getElementById('ytplayer').stopVideo();
        $('div.greyContentArea1').empty().fadeOut();
        $('#shadeLayer').empty().fadeOut();
      });
    });
  }
}
function GetYouTubeObject(url, w, h) {
  var ev = '<div class="vidbox" style="width:' + w + 'px"> \
    <div class="topbar"><div>Close</div></div> \
    <div class="video" style="height:' + h + 'px"> \
        <object width="' + w + '" height="' + h + '"> \
        <param name="movie" value="' + url + '"></param> \
        <param name="allowFullScreen" value="true"></param> \
        <param name="allowscriptaccess" value="always"></param> \
        <embed id="ytplayer" src="' + url + '" \
            type="application/x-shockwave-flash" \
            allowscriptaccess="always" \
            allowfullscreen="true" \
            width="' + w + '" \
            height="' + h + '"> \
        </embed> \
        </object> \
    </div> \
</div>';
  return ev;
}

function BannerImagePausePlay() {
  if (BannerPaused == 0) {
    window.clearTimeout(timeoutID);
    BannerPaused = 1;
    document.getElementById('ButtonPause').style.display = 'none';
    document.getElementById('ButtonPlay').style.display = 'block';
  }
  else {
    BannerPaused = 0;
    document.getElementById('ButtonPause').style.display = 'block';
    document.getElementById('ButtonPlay').style.display = 'none';
    timeoutID = window.setTimeout('RotateImages();', 500);
  }
}