/*
 ******************************************************************************
 * scmSlideshow.js           1.0               18/July/2006
 *
 * "COPYRIGHT.  HSBC HOLDINGS PLC 2004.  ALL RIGHTS RESERVED.
 *
 * This software is only to be used for the purpose for which it has been
 * provided.  No part of it is to be reproduced, disassembled, transmitted,
 * stored in a retrieval system nor translated in any human or computer
 * language in any way or for any other purposes whatsoever without the
 * prior written consent of HSBC Holdings plc."
 *
 ******************************************************************************
 */

var domCompliant=(document.getElementById); 
var ie4Browser=document.all; 
var pauseFlag=0;
function adImage(imageURL, targetURL, imageAlt){
  this.imageURL = imageURL;
  this.targetURL = targetURL;
  this.imageAlt = imageAlt;
}
 
function slideShow(adImages, imageWidth, imageHeight, timeInterval, isMouseOverPause, parentCanvasPrefix, childCanvasPrefix){

  this.adImages=adImages;
  this.cachedImages=new Array(); 
  for (p=0;p<adImages.length;p++){
       this.cachedImages[p]=new Image();
       this.cachedImages[p].src=adImages[p].imageURL;
  }
  this.imageborder=0;
  var imageWidth=imageWidth;
  var imageHeight=imageHeight;
  this.timeInterval=timeInterval * 1000;  
  this.isMouseOverPausecheck=isMouseOverPause;
  this.mouseOverCheck=0;
  this.opacityDegree=10; 
  this.currentImageIndex=0;
  this.nextImageIndex= + 1;
  this.slideShowCanvasPrefix = childCanvasPrefix;
  this.currentCanvasId= this.slideShowCanvasPrefix+"_0";
  this.parentCanvasId = parentCanvasPrefix;
  this.timeIntervalHander; 
  this.slideShowBackgroundColor="white";

  if(this.adImages.length == 1){
     this.drawSingleImage();
     return 0;
  }

  if (ie4Browser&&domCompliant||domCompliant){ 
      document.write('<div id="'+this.parentCanvasId+'" style="position:relative;width:'+imageWidth+'px;height:'+imageHeight+'px;overflow:hidden;"><div id="'+this.slideShowCanvasPrefix+'_0" style="position:absolute;width:'+imageWidth+'px;height:'+imageHeight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+this.slideShowBackgroundColor+'"></div><div id="'+this.slideShowCanvasPrefix+'_1" style="position:absolute;width:'+imageWidth+'px;height:'+imageHeight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+this.slideShowBackgroundColor+'"></div></div>');
  }
  else{
      document.write('<div><img name="'+this.parentCanvasId+'" src="'+this.cachedImages[0].src+'"></img></div>');
  }
  
  if (ie4Browser&&domCompliant||domCompliant){ 
      if(this.adImages.length > 1){
         this.startSlideShow();
      }     
  }
  else{
      this.currentImageIndex++;
      var cachedSlideShowObject=this;
      setInterval(function(){cachedSlideShowObject.rotateImage()}, this.timeInterval);
  }
  
}
/* SGH customization */
function fastForward()
{
	if (pauseFlag == 0)
		objSlideShow.internalFastForward();
}

function goToImage(ind)
{
	if (pauseFlag == 0) {
		var buttonPath;
		// Note: at most 4 images

		for (var i=0; i < this.adImages.length; i++) {
		
			if (i==ind) {
				buttonPath = new String(document.getElementById("buttonImage"+parseInt(i+1)).src);
				buttonPath = buttonPath.replace('off','on');
				document.getElementById("buttonImage"+parseInt(i+1)).src = buttonPath;
				
			}
			else 
			{
				buttonPath = new String(document.getElementById("buttonImage"+parseInt(i+1)).src);
				buttonPath = buttonPath.replace('on','off');
				document.getElementById("buttonImage"+parseInt(i+1)).src = buttonPath;

			}
		}		
		objSlideShow.internalGoTo(ind);
		
	}	
}
function pauseSlide()
{

	if (pauseFlag == 1) {
		pauseFlag = 0;
		document.getElementById("btnPause").value = 'Pause';
	}	
	else {
		pauseFlag = 1;
		document.getElementById("btnPause").value = 'Resume';
	}	
	
}
slideShow.prototype.internalFastForward=function(){
    clearInterval(this.timeHander); 
    clearInterval(this.timeIntervalHander); 
 
    var currentCanvas=this.currentCanvasElement=ie4Browser? ie4Browser[this.currentCanvasId] : document.getElementById(this.currentCanvasId);
    // put the current canvas (waiting) to front
    currentCanvas.style.zIndex++;
    this.opacityDegree=90;
	this.fadeInImage();
	// draw the next image and start fade in 
    this.currentImageIndex=(this.currentImageIndex<this.cachedImages.length-1)? this.currentImageIndex+1 : 0;
    this.currentCanvasId=(this.currentCanvasId==this.slideShowCanvasPrefix+"_0")? this.slideShowCanvasPrefix+"_1" : this.slideShowCanvasPrefix+"_0";
	this.fadeInImage();
}
slideShow.prototype.internalGoTo=function(ind){
    clearInterval(this.timeHander);     // rotateImage
    clearInterval(this.timeIntervalHander); // fadeInImage
 
    var currentCanvas=this.currentCanvasElement=ie4Browser? ie4Browser[this.currentCanvasId] : document.getElementById(this.currentCanvasId);
    // draw the image to current Canvas
    this.drawImage(currentCanvas, ind);
    this.nextImageIndex = ind;
    this.nextImageIndex=(this.nextImageIndex<this.cachedImages.length-1)? this.nextImageIndex+1 : 0;
    this.rotateImage();
}
/* SGH customization end */
slideShow.prototype.drawSingleImage=function(){

  var slideHTML="";
  if (this.adImages[0].targetURL!=""){ 
      slideHTML='<a href="'+this.adImages[0].targetURL+'">';
  }
  slideHTML+='<img src="'+this.cachedImages[0].src+'" border="'+this.imageborder+'px"'+' alt="'+this.adImages[0].imageAlt+'"/>';
  slideHTML+='</img>'
  if (this.adImages[0].targetURL!=""){ 
      slideHTML+='</a>';
  }
  document.write('<div id="temp">'+slideHTML+'</div>');   
}

slideShow.prototype.startSlideShow=function(){
  var currentCanvas=ie4Browser? ie4Browser[this.currentCanvasId] : document.getElementById(this.currentCanvasId);
  this.drawImage(currentCanvas, this.currentImageIndex);
  if (this.isMouseOverPausecheck==1){ 
      var slideShowInstance=this;
      var slideShowElement=ie4Browser? ie4Browser[this.parentCanvasId] : document.getElementById(this.parentCanvasId);
      slideShowElement.onmouseover=function(){slideShowInstance.mouseOverCheck=1};
      slideShowElement.onmouseout=function(){slideShowInstance.mouseOverCheck=0};
  }
  this.rotateImage();
}
 
slideShow.prototype.drawImage=function(canvasElement, imageIndex){
  var slideHTML="";

  if (this.adImages[imageIndex].targetURL!=""){             
//SGH23 popup remvoe      slideHTML='<a href="'+this.adImages[imageIndex].targetURL+'">';
//SGH23 popup add start     
		slideHTML=this.adImages[imageIndex].targetURL;
//SGH23 popup add end
  }
  slideHTML+='<img src="'+this.cachedImages[imageIndex].src+'" border="'+this.imageborder+'px"'+' alt="'+ this.adImages[imageIndex].imageAlt+'"/>';
  slideHTML+='</img>'
  if (this.adImages[imageIndex].targetURL!=""){ 
      slideHTML+='</a>';
  }
  canvasElement.innerHTML=slideHTML;
}

slideShow.prototype.rotateImage=function(){

  var cachedSlideShowObject=this;
  if (this.mouseOverCheck==1){
      setTimeout(function(){cachedSlideShowObject.rotateImage()}, 100);
  }
  else if (ie4Browser&&domCompliant||domCompliant){
           this.resetCanvas();
           var currentCanvas=this.currentCanvasElement=ie4Browser? ie4Browser[this.currentCanvasId] : document.getElementById(this.currentCanvasId);
           currentCanvas.style.zIndex++;
           this.currentCanvasId=(this.currentCanvasId==this.slideShowCanvasPrefix+"_0")? this.slideShowCanvasPrefix+"_1" : this.slideShowCanvasPrefix+"_0";
           this.timeIntervalHander=setInterval(function(){cachedSlideShowObject.fadeInImage()},38);

        }else{
             var ns4ImageElement=document.images[this.parentCanvasId];
             ns4ImageElement.src=this.cachedImages[this.currentImageIndex].src;
        }
  this.currentImageIndex=(this.currentImageIndex<this.cachedImages.length-1)? this.currentImageIndex+1 : 0;


}

slideShow.prototype.resetCanvas=function(){
  this.opacityDegree=10;
  var currentCanvas=ie4Browser? ie4Browser[this.currentCanvasId] : document.getElementById(this.currentCanvasId);
  if (currentCanvas.filters&&currentCanvas.filters[0]){
      if (typeof currentCanvas.filters[0].opacity=="number"){ 
          currentCanvas.filters(0).opacity=this.opacityDegree;
      }
      else{ 
          currentCanvas.style.filter="alpha(opacity="+this.opacityDegree+")";
      }
  }
  else if (currentCanvas.style.MozOpacity){
           currentCanvas.style.MozOpacity=this.opacityDegree/101;
       }
  else if (currentCanvas.style.KhtmlOpacity){
           currentCanvas.style.KhtmlOpacity=this.opacityDegree/100;
       }
}

slideShow.prototype.fadeInImage=function(){
  var buttonIndex;
  var oldButtonIndex;
  var buttonPath;
  var oldButtonPath;
  
  if (this.opacityDegree<100){
      if (pauseFlag == 0) 	
		  this.opacityDegree+=10;
      if (this.currentCanvasElement.filters&&this.currentCanvasElement.filters.item("DXImageTransform.Microsoft.Alpha")){
          if (typeof this.currentCanvasElement.filters.item("DXImageTransform.Microsoft.Alpha").opacity=="number") //if IE6+
              this.currentCanvasElement.filters.item("DXImageTransform.Microsoft.Alpha").opacity=this.opacityDegree;
          else 
              this.currentCanvasElement.style.filter="alpha(opacity="+this.opacityDegree+")";
      }
      else if (this.currentCanvasElement.style.MozOpacity){
             this.currentCanvasElement.style.MozOpacity=this.opacityDegree/101;
           }
      else if (this.currentCanvasElement.style.KhtmlOpacity){
             this.currentCanvasElement.style.KhtmlOpacity=this.opacityDegree/100;
           }
    if (this.opacityDegree==90) { 
     
		buttonIndex = (this.nextImageIndex==0)?this.adImages.length:this.nextImageIndex;	
	 	buttonPath = new String(document.getElementById("buttonImage"+ buttonIndex).src);
		buttonPath = buttonPath.replace('off','on');
		document.getElementById("buttonImage"+buttonIndex).src = buttonPath;

		oldButtonIndex = (this.nextImageIndex==0)?this.adImages.length-1:this.nextImageIndex-1;
		if ((this.nextImageIndex==1))
			oldButtonIndex = this.adImages.length;
		
		oldButtonPath = new String(document.getElementById("buttonImage"+ oldButtonIndex).src);
		oldButtonPath = oldButtonPath.replace('on','off');
		document.getElementById("buttonImage"+oldButtonIndex).src = oldButtonPath;
		
	}
	
  }
  else{
    clearInterval(this.timeIntervalHander); 
    this.nextcanvas=(this.currentCanvasId==this.slideShowCanvasPrefix+"_0")? this.slideShowCanvasPrefix+"_0" : this.slideShowCanvasPrefix+"_1";
    this.currentCanvasElement=ie4Browser? ie4Browser[this.nextcanvas] : document.getElementById(this.nextcanvas);
    this.drawImage(this.currentCanvasElement, this.nextImageIndex);
    this.nextImageIndex=(this.nextImageIndex<this.cachedImages.length-1)? this.nextImageIndex+1 : 0;
    var cachedSlideShowObject=this;
    this.timeHander = setTimeout(function(){cachedSlideShowObject.rotateImage()}, this.timeInterval);

  }
  
 }