//
//  Configuration
//
ProcessOptions = Object.extend({
    fileProgressImage: '../objects/images/loading3.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay
	processOverlayOpacity: 0.05, // controls transparency of shadow overlay in process mode
	processDelayTimer: null,
	processDelay: 500,

    animate: true         // toggles resizing animations

}, window.ProcessOptions || {});


//
//  getScroll()
//
function getScroll() {
	        
	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;
	}

	return [(+xScroll), (+yScroll)];
}
		


//
//  getPageSize()
//
function getPageSize() {
	        
	var arrayScroll = getScroll();
	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
	pageHeight = (arrayScroll[1] < windowHeight) ? windowHeight : arrayScroll[1];
	
	// for small pages with total width less then width of the viewport
	pageWidth = (arrayScroll[0] < windowWidth) ? arrayScroll[0] : windowWidth;

	return [(+pageWidth), (+pageHeight)];
}



function getViewportSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight

	return [(+w), (+h)];
}



// -----------------------------------------------------------------------------------

var Process = Class.create();

Process.prototype = {
    
    // initialize()
    // Constructor runs on completion of the DOM loading. 
    // The function inserts html at the bottom of the page which is used to display the shadow 
    // overlay and the image container.
    //
    initialize: function() {    
        
	    this.overlayDuration = ProcessOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
		this.processDelay = ProcessOptions.processDelay;		

        // Code inserts html at the bottom of the page that looks similar to this:
        //
		//  <<iframe id='overlayIframe'></iframe>
        //  <div id="overlay"></div>
        //  <div id="lightbox">
        //      <div id="loading">
        //      </div>
		//  </div>


        var objBody = $$('body')[0];

		//Draw an iframe behind the calendar -- ugly hack to make IE 6 happy
		if (true || Prototype.Browser.IE) {
			this.overlayIframe = new Element('iframe', { 'id': 'overlayIframe', 'style': 'display: none' });
			objBody.insert(this.overlayIframe, { position: top });
		}

		//Create a close icon that can be used to dismiss the Calendar
		this.overlay = new Element('div', { 'id': 'overlay', 'style': 'display: none' });
		objBody.insert(this.overlay, { position: top });

		this.lightbox = new Element('div', { 'id': 'lightbox', 'style': 'display: none' });
		this.loading = new Element('img', { 'src': ProcessOptions.fileProgressImage });
		this.lightbox.insert(this.loading, { position: top });
		objBody.insert(this.lightbox, { position: top });

		/*
        var th = this;
        (function(){
            var ids = 
                'overlayIframe overlay lightbox';   
            $w(ids).each(function(id){ th[id] = $(id); });
        }).defer();
        */
		
		imgPreloader = new Image();
		imgPreloader.src = ProcessOptions.fileProgressImage;		
    },

    //
    //  start()
    //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    //
    start: function(imageLink) {    

        // $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        // stretch overlay to fill page and fade in
        var arrayPageSize = getPageSize();
        this.overlayIframe && this.overlayIframe.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }).show();
        $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px', backgroundColor: '#000' });

        new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

        this.imageArray = [];
        var imageNum = 0;       

        if ((imageLink.rel == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
            
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
        }

        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var lightboxLeft = arrayPageScroll[0];
        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
        
        this.changeImage(imageNum);
    },

	//
	// process()
	// 
	process: function(start) {
		this.processing = start;
		// alert('Process.process(' + (start ? 'true' : 'false') + '), processing = ' + (this.processing ? 'true' : 'false') + ', backgroundColor = ' + $('overlay').getStyle('backgroundColor')) ;

		if ((this.processing) && (!this.processDelayTimer)) {
	        var arrayPageSize = getPageSize();
	        this.overlayIframe && this.overlayIframe.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }).show();
	        this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px', backgroundColor: '#fff', opacity: 0 }).show();
			this.processDelayTimer = window.setTimeout('myProcess.process(true)', this.processDelay);
			return;
		}

		if (this.processing) {
	        // $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
	
	        // stretch overlay to fill page and fade in
	        var arrayPageSize = getPageSize();
	        // this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px', backgroundColor: '#113557', opacity: ProcessOptions.processOverlayOpacity }).show();

			// Effect.Queues.get('overlay').each(function(effect) { effect.cancel() });
	        // new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: ProcessOptions.processOverlayOpacity, queue: { scope: 'overlay' } });
			// Element.clonePosition($('lightbox'), $('content'), { offsetTop: '200px', setHeight: false }).show();
			
	        // calculate top and left offset for the lightbox
	        var arrayPageScroll = document.viewport.getScrollOffsets();
    	    var lightboxTop = arrayPageScroll[1] + Math.floor((getViewportSize()[1] - 100) / 2);
        	var lightboxLeft = arrayPageScroll[0];
    		// alert('scrollOffsets = ' + arrayPageScroll[0] + ', ' + arrayPageScroll[1] +  ' lightboxTop = ' + lightboxTop);
	        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

		} else {
			if (this.processDelayTimer) {
				window.clearTimeout(this.processDelayTimer);
				this.processDelayTimer = null;
			}

			this.end();
		}		
	},

    //
    //  end()
    //
    end: function() {
        // this.disableKeyboardNav();
        this.lightbox.hide();
		// Effect.Queues.get('overlay').each(function(effect) { effect.cancel() });		
        // new Effect.Fade(this.overlay, { duration: this.overlayDuration, queue: { scope: 'overlay' } });
		this.overlay.hide();
		this.overlayIframe && this.overlayIframe.hide();
        // $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
    }
}

document.observe('dom:loaded', function () { myProcess = new Process(); });