/*
Configuration

bookingLink = "../booking/booking_layer.php";

*/

LightBoxCloneSettings = Object.extend({
	fileLoadingImage:        'images/loading.gif',
	fileBottomNavCloseImage: 'images/closelabel.gif',
	overlayOpacity: 0.8,   // controls transparency of shadow overlay
	animate: true,         // toggles resizing animations
    resizeSpeed: 7        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
}, window.LightBoxCloneSettings || {});

var LightBoxClone = Class.create({
  initialize: function(lightboxName,overlayName) {

  	if (LightBoxCloneSettings.resizeSpeed > 10) LightBoxCloneSettings.resizeSpeed = 10;
    if (LightBoxCloneSettings.resizeSpeed < 1)  LightBoxCloneSettings.resizeSpeed = 1;

	this.resizeDuration = LightBoxCloneSettings.animate ? ((11 - LightBoxCloneSettings.resizeSpeed) * 0.15) : 0;
	this.overlayDuration = LightBoxCloneSettings.animate ? 0.2 : 0;  // shadow fade in/out duration

    // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    // If animations are turned off, it will be hidden as to prevent a flicker of a
    // white 250 by 250 box.
    
    var size = (LightBoxCloneSettings.animate ? 250 : 1) + 'px';
  	
  	var objBody = $$('body')[0];
  	
	// Code inserts html at the bottom of the page that looks similar to this:
    //
    //  <div id="overlayClone"></div>
    //  <div id="lightboxClone">
    //      <div id="contentDataContainer">
    //          <div id="bottomNavClone">
    //              <a href="#" id="bottomNavCloseClone">
    //                 <img src="images/close.gif">
    //              </a>
    //          </div>
    //      </div>
    //      <div id="outerImageContainerClone">
    //          <div id="imageContainerClone">
    //              <div id="lightboxContent">
    //              </div>
    //              <div id="loadingClone">
    //                  <a href="#" id="loadingLinkClone">
    //                      <img src="images/loading.gif">
    //                  </a>
    //              </div>
    //          </div>
    //      </div>
    //  </div>
    if(typeof fromIndex != 'undefined')
    {
    	cale = "";
    }
    else
    {
    	cale = "../"
    }
    objBody.appendChild(Builder.node('div',{id:'overlayClone'}));  
    objBody.appendChild(Builder.node('div',{id:'lightboxClone'}, [
            Builder.node('div',{id:'outerImageContainerClone'}, 
                Builder.node('div',{id:'imageContainerClone'}, [
                    Builder.node('div',{id:'bottomNavClone'},
                        Builder.node('a',{id:'bottomNavCloseClone', href: '#' },
                            Builder.node('img', { src: cale+LightBoxCloneSettings.fileBottomNavCloseImage })
                        )
                ),Builder.node('div',{id:'lightboxContent'}),
                    Builder.node('div',{id:'loadingClone'}, 
                        Builder.node('a',{id:'loadingLinkClone', href: '#' }, 
                            Builder.node('img', {src: cale+LightBoxCloneSettings.fileLoadingImage})
                        )
                    )])    
            )]));
    $('overlayClone').hide().observe('click', (function() { this.end(); }).bind(this));
	$('lightboxClone').hide().observe('click', (function(event) { if (event.element().id == "lightboxClone") this.end(); }).bind(this));
	$('loadingLinkClone').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
	$('bottomNavCloseClone').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
	
	var pageDimensions = this.getPageSize();
	
	this.viewportHeight = pageDimensions[1];
  },
  start: function(bookingLink,hotelId,lang) {    

        // stretch overlay to fill page and fade in
        var arrayPageSize = this.getPageSize();
        $('overlayClone').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
        try
        {
        	new Effect.Appear('overlayClone', { duration: this.overlayDuration, from: 0.0, to: LightBoxCloneSettings.overlayOpacity });
        }catch(e){$("overlayClone").show();}
        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
/*      var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 20);*/
		var lightboxTop = 0;
        var lightboxLeft = arrayPageScroll[0];
        var imageContainerCloneHeight = this.viewportHeight;
        if(imageContainerCloneHeight>650)
        	imageContainerCloneHeight = 650;
        $('imageContainerClone').setStyle({height:imageContainerCloneHeight+"px"});
        
        $("lightboxClone").setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
        $("lightboxContent").setStyle({height:(imageContainerCloneHeight-20)+"px"});
        new Ajax.Updater("lightboxContent",bookingLink,{
        	parameters: { hotelId: hotelId,lang:lang },
	        onSuccess: function(){
	        	$("loadingClone").hide();
	        	},
	       	onComplete:function(){
	       		$("bookingIframe").writeAttribute("height",(imageContainerCloneHeight-80));}
	        });
        var th = this;
        Event.observe(window,"resize",function(){th.resizeOverlay()});
  },
  resizeOverlay: function()
  {
		// stretch overlay to fill page and fade in
		var arrayPageSize = this.getPageSize();
		if($('overlayClone'))$('overlayClone').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
  },
  end: function() {
        $("lightboxClone").hide();
        try{
        new Effect.Fade($("overlayClone"),{duration: this.overlayDuration});}catch(e){$("overlayClone").hide();}
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
        $("overlayClone").remove();
        $("lightboxClone").remove();
  },
  //
  //  getPageSize()
  //
    getPageSize: function() {
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
  
});