var ImagePlayerClassName="ImagePlayer";

var defaultimageplayer='\
                        <div class="IPView">\
                          <div class="IPTransition"><img class="IPImage" src="App_Themes/TheStar/images/defaultPhot.jpg"></div>\
                        </div>\
                        <div class="IPControlsDiv">\
                            <div class="IPControlsEnd">\
                                <span class="On"><img src="/App_Themes/TheStar/images/icons/endGallery.gif"/></span>\
                                <span class="Off"><img src="/App_Themes/TheStar/images/icons/endGallery.gif" /></span>\
                            </div>\
                            <div class="IPControlsForward">\
                                <span class="On"><img src="/App_Themes/TheStar/images/icons/nextImage.gif" /></span>\
                                <span class="Off"><img src="/App_Themes/TheStar/images/icons/nextImage.gif" /></span>\
                            </div>\
                            <div class="IPControlsPlay">\
                                <span class="On" style="cursor:pointer;"><img src="/App_Themes/TheStar/images/icons/pauseSlideshow.gif" /></span>\
                                <span class="Off" style="cursor:pointer;"><img src="/App_Themes/TheStar/images/icons/playGalllery.gif" /></span>\
                            </div>\
                            <div class="IPControlsReverse">\
                                <span class="On"><img src="/App_Themes/TheStar/images/icons/previousImage.gif" /></span>\
                                <span class="Off"><img src="/App_Themes/TheStar/images/icons/previousImage.gif" /></span>\
                            </div>\
                            <div class="IPControlsBegin">\
                                <span class="On"><img src="/App_Themes/TheStar/images/icons/beginGallery.gif" /></span>\
                                <span class="Off"><img src="/App_Themes/TheStar/images/icons/beginGallery.gif" /></span>\
                            </div>\
                            <div style="clear:both;"></div>\
                        </div>\
                        <div class="IPCaption" style="height:48px;"></div>\
';


//find all divs with ImagePlayerClassName and create a new
//imagePlayerObj from that div
function initImagePlayers() {
  var players= new Array();
  var divs = document.getElementsByTagName('div');
  var curplayer;

  for (var i=0;i<divs.length;i++) {
    if (divs[i].className.indexOf(ImagePlayerClassName) != -1) {
      curplayer = players.length;
      players[curplayer] = new imagePlayerObj(divs[i]);
      players[curplayer].init();
    }
  }
}

imagePlayerObj = function(ipdiv)
{
  this.div = ipdiv;
  this.imageurl = "http://multimedia.thestar.com";

  this.images = new Array();
  this.badimage = "2273_4.JPG";
  this.direction = 0; // -1 reverse 0 stop 1 forward 
  this.state = 0; //0 stopped 1 playing
  this.timer = 0;
  this.index = 0; //current position in list of images
  this.delay = 4000;
  this.viewer = null;
  this.caption = null;
  this.error = 0;

  this.fadeeffects = new Array();
  this.effect = 0;
  this.effectpercent = 0;
  this.effectstate = 0;

  this.fadeeffects[this.fadeeffects.length] = createMethodReference(this,'fader2');
  this.fadeeffects[this.fadeeffects.length] = createMethodReference(this,'shrink');
  this.fadeeffects[this.fadeeffects.length] = createMethodReference(this,'expand');
  this.fadeeffects[this.fadeeffects.length] = createMethodReference(this,'rollup');
  this.fadeeffects[this.fadeeffects.length] = createMethodReference(this,'rollleft');

  //load parameters from pre tag
  var args = ipdiv.getElementsByTagName("pre");
  for (var i=0;i<args.length;i++) {
    if (args[i].className.indexOf("IPArgs") != -1) {
      this.params = args[i].innerHTML.split("\n");
      args[i].parentNode.removeChild(args[i]); 
      break;
    }
  }
}

imagePlayerObj.prototype.forwardDown=function() {
  this.forwardOn.style.display = "none";
  this.forwardOff.style.display = "inline";
  this.direction = 1;
  this.startTransition();
}

imagePlayerObj.prototype.forwardUp=function() {
  this.forwardOn.style.display = "inline";
  this.forwardOff.style.display = "none";
}

imagePlayerObj.prototype.reverseDown=function() {
  this.reverseOn.style.display = "none";
  this.reverseOff.style.display = "inline";
  this.direction = -1;
  this.startTransition();
}

imagePlayerObj.prototype.reverseUp=function() {
  this.reverseOn.style.display = "inline";
  this.reverseOff.style.display = "none";
}

imagePlayerObj.prototype.beginDown=function() {
  this.beginOn.style.display = "none";
  this.beginOff.style.display = "inline";
  this.index = 0;
  this.direction = 0;
  this.startTransition();
}

imagePlayerObj.prototype.beginUp=function() {
  this.beginOn.style.display = "inline";
  this.beginOff.style.display = "none";
}

imagePlayerObj.prototype.endDown=function() {
  this.endOn.style.display = "none";
  this.endOff.style.display = "inline";
  this.index = this.images.length - 1;
  this.direction = 0;
  this.startTransition();
}

imagePlayerObj.prototype.endUp=function() {
  this.endOn.style.display = "inline";
  this.endOff.style.display = "none";
}

imagePlayerObj.prototype.playPause=function() {
  if (this.state) {
    this.stop();
  } else {
    this.play();
  }
}

imagePlayerObj.prototype.play=function() {
  this.playOn.style.display = "none";
  this.playOff.style.display = "inline";
  this.state=1;
  this.direction = 1;
  this.timer = setTimeout(createMethodReference(this,'run'), this.delay);
}

imagePlayerObj.prototype.stop=function() {
  this.playOff.style.display = "none";
  this.playOn.style.display = "inline";
  this.state=0;
  clearTimeout(this.timer);
}

imagePlayerObj.prototype.run=function() {
  this.startTransition();
}

imagePlayerObj.prototype.startTransition=function() {
 //pick random effect
//  this.effect = Math.round(Math.random() * this.fadeeffects.length-1);
  this.index += this.direction;
  if (this.index < 0) {
    this.index = this.images.length-1;
  } else if (this.index >= this.images.length) {
    this.index = 0;
  }

  this.fade(0);
}

imagePlayerObj.prototype.endTransition=function() {
  this.fade(1);
}

//call fade effect with state (to fadein/out)
imagePlayerObj.prototype.fade = function(state)
{
  if (this.effect > this.fadeeffects.length || this.effect < 0) {
    this.effect = 0;
  }
  this.effectpercent = (state) ? 0:100;
  this.effectstate = state;
  this.fadeeffects[this.effect](); 
}

imagePlayerObj.prototype.fadeOutComplete=function() {
  this.error = 0;
  this.image.src = this.imageurl + this.images[this.index].image;
  //imageload will trigger end transition
}

imagePlayerObj.prototype.fadeInComplete=function() {
  if (this.state) {
    this.timer = setTimeout(createMethodReference(this,'run'), this.delay);
  }
}

imagePlayerObj.prototype.imgAbortHandler = function()
{
  this.endTransition();
}

imagePlayerObj.prototype.imgErrorHandler = function()
{
  this.endTransition();
}

imagePlayerObj.prototype.imgLoadHandler = function()
{
  if (!this.images || this.images.length < 1) {
    return;
  }
  
  if (this.images[this.index].width > this.width) {
    this.image.width = this.width;
  } else {
    this.image.removeAttribute('width');
  }
  if (this.images[this.index].height > this.height) {
    this.image.height = this.height;
  } else {
    this.image.removeAttribute('height');
  }

  if (this.caption) {
    if (this.error) {
      this.caption.innerHTML = this.images[this.index].image + " cannot be loaded";
    } else {
      this.caption.innerHTML = this.images[this.index].caption;
    }
  }

  this.endTransition();
}

imagePlayerObj.prototype.init = function()
{
  var param;
  var field;
  var value;
  var imagedata = new Object();

  //pull params out of this div and fill the image player object
  for (var i = 0; i < this.params.length; i++) {
    param = this.params[i].split(":",2);
    if (param.length > 1) {
      field = param[0].replace( /^\s+/g, "" ).replace( /\s+$/g, "" ); 
      value = this.params[i].substring(param[0].length + 1).replace( /^\s+/g, "" ).replace( /\s+$/g, "" );
      if (field == "end" && value == "end") {
        this.addImage(imagedata);
	imagedata = new Object();
      } else {
//debuglog('Field: ' + field + ' value: ' + value);
        imagedata[field] = value;
      }
    }
  }

  this.drawPlayer();
  
  //set first image 
  this.image.src = this.imageurl + this.images[this.index].image;

  if (this.images && this.images.length > 1) {
    //start it running
//    this.play();
  }
}

imagePlayerObj.prototype.drawPlayer= function()
{
  this.maxWidth=0;
  this.maxHeight=0;
  for (var i=0;i<this.images.length;i++) {
    if (this.images[i] && (this.maxWidth * 1)< (this.images[i].width * 1)) {
      this.maxWidth = this.images[i].width;
    }
    if (this.images[i] && (this.maxHeight * 1) < (this.images[i].height * 1)) {
      this.maxHeight = this.images[i].height;
    }
  }

  //check if the viewer is supplied
  var onoff;  
  var divs = this.div.getElementsByTagName('div');
  for (var i=0;i<divs.length;i++) {
    if (divs[i].className.indexOf("IPView") != -1) {
       this.viewer = divs[i];
       //set width of player to width
       this.div.style.width = this.maxWidth + "px";
       //set height of viewer to height
       this.viewer.style.width = this.maxWidth + "px";
       this.viewer.style.height = this.maxHeight + "px";

       var imgs = this.viewer.getElementsByTagName('img');
       this.image = imgs[0];
       this.image.onload = createMethodReference(this, 'imgLoadHandler');
       this.image.onerror = createMethodReference(this, 'imgErrorHandler');
       this.image.onabort = createMethodReference(this, 'imgAbortHandler');
    } else if (divs[i].className.indexOf("IPCaption") != -1) {
       this.caption = divs[i];
    } else if (divs[i].className.indexOf("IPTransition") != -1) {
       this.transition = divs[i];
       this.transition.style.width = this.maxWidth + "px";;
       this.transition.style.height = this.maxHeight + "px";;
    } else if (divs[i].className.indexOf("IPControlsDiv") != -1) {
      this.controls = divs[i];
    } else if (divs[i].className.indexOf("IPControlsReverse") != -1) {
       divs[i].onmousedown=createMethodReference(this,'reverseDown');
       divs[i].onmouseup=createMethodReference(this,'reverseUp');
       onoff = divs[i].getElementsByTagName('span');
       for (var j=0;j<onoff.length;j++) {
         if (onoff[j].className.indexOf("On")) {
            this.reverseOn = onoff[j];
         } else if (onoff[j].className.indexOf("Off")) {
            this.reverseOff = onoff[j];
         }
       }
    } else if (divs[i].className.indexOf("IPControlsForward") != -1) {
       divs[i].onmousedown=createMethodReference(this,'forwardDown');
       divs[i].onmouseup=createMethodReference(this,'forwardUp');
       onoff = divs[i].getElementsByTagName('span');
       for (var j=0;j<onoff.length;j++) {
         if (onoff[j].className.indexOf("On")) {
            this.forwardOn = onoff[j];
         } else if (onoff[j].className.indexOf("Off")) {
            this.forwardOff = onoff[j];
         }
       }
    } else if (divs[i].className.indexOf("IPControlsBegin") != -1) {
       divs[i].onmousedown=createMethodReference(this,'beginDown');
       divs[i].onmouseup=createMethodReference(this,'beginUp');
       onoff = divs[i].getElementsByTagName('span');
       for (var j=0;j<onoff.length;j++) {
         if (onoff[j].className.indexOf("On")) {
            this.beginOn = onoff[j];
         } else if (onoff[j].className.indexOf("Off")) {
            this.beginOff = onoff[j];
         }
       }
     } else if (divs[i].className.indexOf("IPControlsEnd") != -1) {
       divs[i].onmousedown=createMethodReference(this,'endDown');
       divs[i].onmouseup=createMethodReference(this,'endUp');
       onoff = divs[i].getElementsByTagName('span');
       for (var j=0;j<onoff.length;j++) {
         if (onoff[j].className.indexOf("On")) {
            this.endOn = onoff[j];
         } else if (onoff[j].className.indexOf("Off")) {
            this.endOff = onoff[j];
         }
       }   
    } else if (divs[i].className.indexOf("IPControlsPlay") != -1) {
       divs[i].onclick=createMethodReference(this,'playPause');
       onoff = divs[i].getElementsByTagName('span');
       for (var j=0;j<onoff.length;j++) {
         if (onoff[j].className.indexOf("On")) {
            this.playOn = onoff[j];
         } else if (onoff[j].className.indexOf("Off")) {
            this.playOff = onoff[j];
         }
       }
    } 
  } 

  //if no viewer was supplied the add the default in and reprocess
  if (!this.viewer) {
    this.div.innerHTML = defaultimageplayer;
    this.drawPlayer();
    return;
  }

  //check if there is atleast one caption if not then hide captions div
  var hidecaption = 1;
  for (var i=0;i<this.images.length;i++) {
    if (this.images[i].caption && this.images[i].caption.length > 1) {
      hidecaption = 0;
      break;
    }
  }
  if (hidecaption) {
    this.caption.style.display = "none";
  }

  if (this.images.length < 2) {
    this.controls.style.display = "none";
  }
  this.div.style.display = "block";
}

imagePlayerObj.prototype.addImage = function(data)
{
  this.images[this.images.length] = data;
}

function createMethodReference(obj, methodName){
        return function(){obj[methodName]();}
};

//transition functions defined here
imagePlayerObj.prototype.fader=function() {
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   this.image.style.opacity = this.effectpercent/100;
   this.image.style.MozOpacity = this.effectpercent/100;
   this.image.style.filter = "alpha(opacity=" + this.effectpercent + ")";

   setTimeout(this.fadeeffects[this.effect], 100);
}
//transition functions defined here
imagePlayerObj.prototype.fader2=function() {
if (this.effectpercent >= 100 || this.effectpercent <= 0) {
  /*this.transition.style.background = "url(" + this.imageurl + this.images[this.index].image + ")";
  this.transition.style.backgroundRepeat="no-repeat";
  this.transition.style.backgroundPosition="top center";*/
}
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   this.image.style.opacity = this.effectpercent/100;
   this.image.style.MozOpacity = this.effectpercent/100;
   this.image.style.filter = "alpha(opacity=" + this.effectpercent + ")";
   setTimeout(this.fadeeffects[this.effect], 100);
}
imagePlayerObj.prototype.shrink=function() {
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   this.image.width = this.images[this.index].width * this.effectpercent / 100;
   this.image.height = this.images[this.index].height * this.effectpercent / 100;  
   this.image.style.top = 100 - this.effectpercent + "px";
   this.image.style.left = 100 - this.effectpercent + "px";

   setTimeout(this.fadeeffects[this.effect], 100);
}
imagePlayerObj.prototype.expand=function() {
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   var percent = Math.abs(this.effectpercent - 100) * 2;
   this.image.width = 
     (this.images[this.index].width * 1) + 
     (this.images[this.index].width * percent / 100);
   this.image.height = 
     (this.images[this.index].height * 1) + 
     (this.images[this.index].height * percent / 100);

   this.image.style.top = -percent + "px";
   this.image.style.left = -percent + "px";

   setTimeout(this.fadeeffects[this.effect], 100);
}


imagePlayerObj.prototype.rollup=function() {
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   this.image.width =  this.images[this.index].width;
   this.image.height = this.images[this.index].height * this.effectpercent / 100;  
   setTimeout(this.fadeeffects[this.effect], 100);
}
imagePlayerObj.prototype.rollleft=function() {
    if (this.effectstate) {
      if (this.effectpercent >= 100 || !this.image) {
        this.fadeInComplete();
	return;
      } else {
        this.effectpercent += 10;
      }
    } else {
      if (this.effectpercent <= 0 || !this.image) {
        this.fadeOutComplete();
	return;
      } else {
        this.effectpercent -= 10;
      }
    }
   this.image.height =  this.images[this.index].height;
   this.image.width = this.images[this.index].width * this.effectpercent / 100;  
   setTimeout(this.fadeeffects[this.effect], 100);
}


function createdebuglog() {
   var debuglogdiv = document.createElement('div')
   var debuglogEl = document.createElement('code')
   debuglogEl.id = "debuglog"
   debuglogdiv.appendChild(document.createElement('hr'))
   debugtoggleEl = document.createElement('input')
   debugtoggleEl.id = 'debuglogtoggle'
   debugtoggleEl.type = 'checkbox'
   if ((typeof debuglogOn != "undefined")&&(debuglogOn)) debugtoggleEl.chec
 true;
   debuglogdiv.appendChild(debugtoggleEl)
   debuglogdiv.appendChild(document.createTextNode('toggle logging  '))
   var debuglogclear = document.createElement('input')
   debuglogclear.type='button'
   debuglogclear.value='clear'
   debuglogclear.onclick=function(){
           debuglogEl.innerHTML=''
           return false
   }
   debuglogdiv.appendChild(debuglogclear)
   debuglogdiv.appendChild(document.createElement('br'))
   debuglogdiv.appendChild(debuglogEl)
   debuglogdiv.appendChild(document.createElement('hr'))
   document.getElementsByTagName('body')[0].appendChild(debuglogdiv)
   return debuglogEl;
}

function debuglog(msg) {
  var debugmsg = document.getElementById("debuglog");
  if (debugmsg == null) {
    debugmsg = createdebuglog();
  }

  debugmsg.innerHTML = msg + "<br>\n" + debugmsg.innerHTML;
}

var oldonload = window.onload;
if (typeof window.onload != 'function') { 
   window.onload = initImagePlayers;
} else { 
   window.onload = function() { 
      oldonload();
      initImagePlayers();
   }
}