var imgList = Array();
var ImagePreload = Class.create({
 initialize:function(ImageArray, fn,  x, y) {
    this.ImageArray = ImageArray;
	this.fn = fn;
    this.iLength = this.ImageArray.length;
	if ( this.iLength < 1 ) { return false; }
	this.Loaded = 0;
	var showLoading = document.createElement('div');
	this.pId = 'progressID';//+x+''+y;
	this.barId =  this.pId+'_Bar'
	showLoading.id = 'progressID';//+x+''+y;
	document.body.appendChild(showLoading);
    $(this.pId).setStyle({position:'absolute',zIndex:123232,top: y+'px', left: x+'px',margin:'20px auto',width:'200px', height:'15px',padding:'2px', border:'2px solid #dfdfdf'});
	$(this.pId).update('<div style="width:200px;text-align: center;font-size: 10px;height: 15px;background: #2a2a2f;color: #fff;font-weight: bold;" id="'+this.barId+'">Loading Images Please Wait....</div>');
    for( var i = 0; i < this.iLength; i++ ) {
       this.preLoadImage(ImageArray[i]);
    }
 },
 preLoadImage: function(src) {
	var oImage = new Image();
	oImage.onload = (function(src){
		   this.Loaded++;
		   if ( this.Loaded == this.iLength ) {
				$(this.pId).remove();
				loading = false;
				eval(this.fn); // call the function after loaded all the listed images
			}
			else {
				var percent = Math.round(( this.Loaded * 200) / this.iLength);
				$(this.barId).setStyle({width:percent+'px'}).update(this.Loaded + ' / ' + this.iLength);
			}
	}).bind(this);
	oImage.src = src;        // Image Object Source Path
 }
});

function loadAndPlayImages(imgList,posX,posY){

  new ImagePreload(imgList,'playNow()',posX+140,posY-8);	
  //alert(imgList)
}
var AHotel, timeOutH;
function playNow(){
  AHotel = new imagePlay('imgCont', 'img', 'nxt', 'play', 1.0, 'left', 500, 'autoPlayF()', 'fSBHotel', 'timeOutH');
  if (timeOutH) clearInterval(timeOutH);
  timeOutH = setInterval("AHotel.playNext()",3000);
}


function playImages(event) {
  stopPlaying();
  var elm = Event.element(event);
  var posX = Event.pointerX(event);
  var posY = Event.pointerY(event);
  popUp  = document.createElement('div');
  document.body.appendChild(popUp);
  popUp.id = 'leaveComPop';
  popUp.setStyle({position:'absolute',background:'#ffffff',border:'4px solid #cccccc',width:'500px',height:'380px',top:posY+10+'px',left:posX+5+'px',zIndex:1200});
  popUp.innerHTML = '<div style="width:500px; height:380px;position:relative;overflow:hidden;"><div style="background:#f1f1f1;width:500px;text-align:right;height:20px;"><a href="javascript:void(0);" onclick="javascript:stopPlaying();">Close (X)</a></div><div style="width:500px; height:360px;position:relative;overflow:hidden;"><div id="imgCont">Loading Images...Wait...</div></div></div>';

  
  var imgL = $(elm).name;
  imgs = 'secured/hotelImages/'+imgL+'/';
  var parms = 'imgL='+imgs;
  new Ajax.Request('./loadImages.php',{method:'get', parameters: parms,posX:posX,posY:posY, onComplete: function(R){ 
													imgList = R.responseText.split(','); 
													var width = (500 * imgList.size())+'px';
													var imgHtml = '';
													for (i = 0; i < imgList.size(); i++) {
													    imgHtml += '<img src="'+imgList[i]+'" border="0" alt="" style="float:left;display:inline;" />';
												    }
													$('imgCont').setStyle({position:'absolute',top:'0px',width:width}).update(imgHtml);
													 loadAndPlayImages(imgList,posX,posY);
													}
									   });
  
}
function stopPlaying(){
  if (timeOutH) clearInterval(timeOutH);
  if ( $('leaveComPop')) $('leaveComPop').remove();
  if ( $('progressID')) $('progressID').remove();
  // cancel all ajax call;
}
function showMSG(event) {
   elm = document.createElement('div');
   document.body.appendChild(elm);
   $(elm).id = 'pop';
  // Element.writeAttribute($(elm),{class:'popUp',id:'popUps'});
   // find position where to show i.e find the source element and then find source element position
   posX = Event.pointerX(event);
   posY = Event.pointerY(event);
   //alert(posX);
   $(elm).setStyle({left:posX+'px',top:posY-55+'px',zIndex:0,position:'absolute',overflow:'hidden'});
   $(elm).innerHTML = '<div style="width:200px; height:40px;border:3px solid #C80A00;color:#666; background:#ffffff;">Click to see the image on the fly!!! Image will load first then it will start to autoplay all the images automatically!!</div>';
   $(elm).show(); 
	 
}
function rmvMSG() {
  if ($('pop')) { $('pop').remove(); }
}



function iDoc(){
  var elms = $$('img.playImages');
  //alert(elms.size())
  for (i = 0; i < elms.size(); i++) {
	  Event.observe(elms[i],'click', playImages);
	  Event.observe(elms[i],'mouseover', showMSG);
	  Event.observe(elms[i],'mouseout', rmvMSG);
  } 
}
document.observe('dom:loaded', iDoc);