ModalboxOptions = Object.extend({


    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 0.2,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10         //if you adjust the padding in the CSS, you will need to update this variable
	// When grouping images this is used to write: Image # of #.
	// Change it for non-english localization

}, window.ModalboxOptions || {});

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

var Modalbox = Class.create();

Modalbox.prototype = {
   
    initialize: function(titleBox,msgBox,closeBox) {           
	
	this.titleBox=titleBox;
	this.msgBox=msgBox;
	this.closeBox=closeBox;

    
    this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

    this.resizeDuration = ModalboxOptions.animate ? ((11 - ModalboxOptions.resizeSpeed) * 0.15) : 0;
    this.overlayDuration = ModalboxOptions.animate ? 0.2 : 0;  

	this.resizeDuration=0.2;

    var size = (ModalboxOptions.animate ? 250 : 1) + 'px';


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

	objBody.appendChild(Builder.node('div',{id:'overlayModalbox'}));
	document.getElementById('overlayModalbox').style.background='#000';

	objBody.appendChild(Builder.node('div',{id:'Modalbox'},[
	Builder.node('table',{id:'ModalboxPictable'},[
		Builder.node('tbody',[
		Builder.node('tr',[
					
					Builder.node('td',{id:'ModalboxTop'},[
					                Builder.node('div',{id:'ModalboxCloserContainer'},[
					                                     
					                                      Builder.node('div',{id:'ModalboxCloser'})
					                ])                     
					                                      
					])
					
			]),
			Builder.node('tr',[
					
					Builder.node('td',{id:'modalBoxCenter'},[
					    Builder.node('h1',{id:'titleBox'}),
					    Builder.node('div',{id:'msgBox'})
			                ])
			           
					]),
					Builder.node('tr',[
										
										Builder.node('td',{id:'ModalboxBottom'})
					
								])
					
				])
			])
		
	]));
	
	
	
	
	document.getElementById('titleBox').innerHTML = this.titleBox;
    document.getElementById('msgBox').innerHTML = this.msgBox;
    document.getElementById('ModalboxCloser').innerHTML = this.closeBox;
    
	
	
	$('overlayModalbox').hide().observe('click', (function() { this.end(); }).bind(this));
	$('ModalboxCloser').observe('click', (function() { this.end(); }).bind(this));
	
	$('Modalbox').hide().observe('click', (function(event) { if (event.element().id == 'Modalbox') this.end(); }).bind(this));
	
	
    var th = this;
    (function(){
        var ids = 
            'overlayModalbox Modalbox msgBox';   
        $w(ids).each(function(id){ th[id] = $(id); });
    }).defer();
    
    this.start();
      
    },

   
    
    //
    //  start()
    //  Display overlay and Modalbox. If image is part of a set, add siblings to imageArray.
    //

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

        // stretch overlay to fill page and fade in
        var arrayPageSize = getPageSize();
        
        $('overlayModalbox').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
        
        new Effect.Appear($('overlayModalbox'), { duration: this.overlayDuration, from: 0.0, to: ModalboxOptions.overlayOpacity });

        
        // calculate top and left offset for the Modalbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var ModalboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var ModalboxLeft = arrayPageScroll[0];
        this.enableKeyboardNav();

        $('Modalbox').setStyle({ top: ModalboxTop + 'px', left: ModalboxLeft + 'px' }).show();
    },

    //
    //  enableKeyboardNav()
    //
    enableKeyboardNav: function() {
        document.observe('keydown', this.keyboardAction); 
    },

    //
    //  disableKeyboardNav()
    //
    disableKeyboardNav: function() {
        document.stopObserving('keydown', this.keyboardAction); 
    },

    //
    //  keyboardAction()
    //
    keyboardAction: function(event) {
       var keycode = event.keyCode;

        var escapeKey;
        if (event.DOM_VK_ESCAPE) {  // mozilla
            escapeKey = event.DOM_VK_ESCAPE;
        } else { // ie
            escapeKey = 27;
        }

        var key = String.fromCharCode(keycode).toLowerCase();
        
        if ( keycode == escapeKey){ // close Modalbox
            this.end();
        }
    },


    //
    //  end()
    //
    end: function() {
    	delete this.msgBox;
        this.disableKeyboardNav();
        $('Modalbox').hide();
        new Effect.Fade($('overlayModalbox'), { duration: this.overlayDuration });
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible';});
    }


}