// -----------------------------------------------------------------------------------
//
//	Martijn Smeets Fotografie Expander v0.5
//  by Martijn Smeets - http://www.martijnsmeetsfotografie.nl
//	Last Modification: March 6, 2010
//
// -----------------------------------------------------------------------------------


//
//  Configuration
//
expanderOptions = Object.extend({
    animate: true,			// toggles resizing animations
    resizeSpeed: 7,			// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
	initialWidth: 379,		//the initial width of the column containing the image (same as CSS value)
	fullWidth: 790			//the full width of the viewing window (same as CSS value)

}, window.expanderOptions || {});

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

var Expander = Class.create();

Expander.prototype = {
    
    // initialize()
    // Constructor runs on completion of the DOM loading.
    //
    initialize: function() {    
        
        this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

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

	    this.resizeDuration = expanderOptions.animate ? ((11 - expanderOptions.resizeSpeed) * 0.15) : 0;
	    this.overlayDuration = expanderOptions.animate ? 0.5 : 0;  // shadow fade in/out duration
  
		// EVENTS
		$('blogExpandLink').observe('click', (function(event) { event.stop(); this.toggleExpand(); }).bindAsEventListener(this));

		this.expanded = true;
		this.used = false;
		this.enableKeyboardNav();
    },


    
    //
    //  toggleExpand()
    //  Expand or retract the image
    //
    toggleExpand: function() {  

		this.used = true;    
    	this.disableKeyboardNav();
    	$('blogExpandLink').hide();

		if (!this.expanded)
			this.expand();
		else 
			this.retract();
    },
    
    
    //
    //  expand()
    //  Expand the column
    //
    expand: function() {  
    
		// Temporarily hide the scrollbar and other background elements
		$('scrollbarTrack').style.visibility = 'hidden';
		$('blogExpandLink').style.background = 'url(http://www.martijnsmeetsfotografie.nl/images/blogZoomOut.png) no-repeat';
		var xScale = (expanderOptions.fullWidth / expanderOptions.initialWidth) * 100;
		new Effect.Scale($('column1'), xScale, { scaleY: false, scaleContent: false, scaleMode: { originalWidth: expanderOptions.initialWidth }, duration: this.resizeDuration, queue: 'end', afterFinish: (function(){ this.updateControls(); }).bind(this)  }); 

    },    
    
    //  retract()
    //  Expand the column
    //
    retract: function() {  
    
		// Temporarily hide the scrollbar and other background elements
		$('blogExpandLink').style.background = 'url(http://www.martijnsmeetsfotografie.nl/images/blogZoomIn.png) no-repeat';
		var xScale = (expanderOptions.initialWidth / expanderOptions.fullWidth) * 100;
		new Effect.Scale($('column1'), xScale, { scaleY: false, scaleContent: false, scaleMode: { originalWidth: expanderOptions.fullWidth }, duration: this.resizeDuration, queue: 'end', afterFinish: (function(){ this.updateControls(); }).bind(this)  }); 
		$('scrollbarTrack').style.visibility = 'visible';
    },       
    
    
    
    //
    //  updateControls()
    //  Display appropriate controls.
    //
    updateControls: function() {

		if (this.expanded) {
	        this.expanded = false;
	        if( $('blogExpand').getAttribute('className') != null) // IE
				$('blogExpand').setAttribute('className', 'showBlogExpandLink');
			else // other browsers
				$('blogExpand').setAttribute('class', 'showBlogExpandLink');   	        
	    }
	    else {
	    	this.enableKeyboardNav();
        	this.expanded = true;
	        if( $('blogExpand').getAttribute('className') != null) // IE
				$('blogExpand').setAttribute('className', 'hideBlogExpandLink');
			else // other browsers
				$('blogExpand').setAttribute('class', 'hideBlogExpandLink');  
		}
		$('blogExpandLink').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 (key.match(/x|o|c/) || (keycode == escapeKey)) { // retract
            this.toggleExpand();
        }
    }

}

document.observe('dom:loaded', function () { 

if( $('column1').getAttribute('className') == 'blogImage' || $('column1').getAttribute('class') == 'blogImage') {
   $('scrollbarTrack').style.visibility = 'hidden';
   expander = new Expander(); 
   setTimeout("if(!expander.used) { if( $('blogExpand').getAttribute('className') != null) $('blogExpand').setAttribute('className', 'hideBlogExpandLink'); else $('blogExpand').setAttribute('class', 'hideBlogExpandLink'); }", 2000);
}
});