// -----------------------------------------------------------------------------------
//
//	Lightbox Extended v2.0
//	by Patti Chan - http://www.fizzel.com
//	Last Modification: 10/16/09
//
//  HEAVILY based on the fantastic Lightbox library by Lokesh Dhakar: 
//	http://lokeshdhakar.com/projects/lightbox2/
//	
//  In fact, this won't even work without it!	
//
// -----------------------------------------------------------------------------------
var lbx_flag = "contentbox";		// this is the rel flag we'll use instead of "lightbox" when we're triggering divs

var Contentbox = Class.create(Lightbox, {
	initialize: function() {
		this.updateLinks(); 

		// create divContainer if it doesn't exist
		if(!$('divContainer')) {
			$('lightbox').appendChild(new Element('div',{id:'divContainer'}));
		}

		// go through same declaration routine as Lightbox since we're not relying on $super()
		this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
		this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
    var th = this;
    (function(){
        var ids = 
            'divContainer overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 
            'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';   
        $w(ids).each(function(id){ th[id] = $(id); });
    }).defer();

		// augment the end() function to take care of extra business for divs
		$('overlay','loadingLink','bottomNavClose').each(function(t){
			t.observe('click',function(){ th.end(); })
		});

	},    
	
	updateLinks: function() {
		this.updateImageList = Prototype.emptyFunction;

		document.observe('click', (function(event){
		    var target = event.findElement('a[rel^=' + lbx_flag + ']') || event.findElement('area[rel^=' + lbx_flag + ']');
		    if (target) {      
		        event.stop();
		        this.start(target);
		    }
		}).bind(this));
	},
	
	start: function(divLink) {
		// mimics the start() function from Lightbox
		// $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

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

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

		// 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();
   
		// disable all the interface stuff
		$('divContainer','lightboxImage','hoverNav','prevLink','nextLink','imageDataContainer','numberDisplay').invoke('hide');

		// pass in the content div
		if(divLink.href.include('#')) {
			var theDiv = $(divLink.hash.replace('#',''));
		} else {
			var theDiv = $(divLink.pathname.replace(/(?:[\/]?)(\w+)?(?:[\/]?)(\w+)?(?:[\/]?)/,"$1-$2"));
		}                        
       
		this.resizeDivContainer(theDiv);

	},   

	resizeDivContainer: function(theDiv) {
	
    // get current width and height
    var widthCurrent  = this.outerImageContainer.getWidth();
    var heightCurrent = this.outerImageContainer.getHeight();

    // get new width and height           
		var dimensions = theDiv.getDimensions();
    var widthNew  = (dimensions.width  + LightboxOptions.borderSize * 2);
    var heightNew = (dimensions.height + LightboxOptions.borderSize * 2);

    // scalars based on change from old to new
    var xScale = (widthNew  / widthCurrent)  * 100;
    var yScale = (heightNew / heightCurrent) * 100;

    // calculate size difference between new and old image, and resize if necessary
    var wDiff = widthCurrent - widthNew;
    var hDiff = heightCurrent - heightNew;

    if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
    if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 

    this.imageDataContainer.setStyle({ width: widthNew + 'px' });
    this.showDiv(theDiv);
	
	}, 

	showDiv: function(theDiv) {     
    // get new width and height (again)           
		var dimensions = theDiv.getDimensions();
    var widthNew  = (dimensions.width  + LightboxOptions.borderSize * 2);
    var heightNew = (dimensions.height + LightboxOptions.borderSize * 2);

		// figure out the offset we'd have to apply after resizing
		var difference = (this.outerImageContainer.getWidth() - widthNew)/2;		
		
		// move in place	    
		this.divContainer.absolutize();
		this.divContainer.clonePosition(this.outerImageContainer, {offsetLeft: difference, setWidth: false, setHeight: false});
		this.divContainer.setStyle({
			width: widthNew + 'px', 
			height: heightNew + 'px'
		})

		// clone the div    
		this.divContainer.appendChild(theDiv);
		objDiv = this.divContainer.down('div');
		objDiv.className = theDiv.className;
		objDiv.style.display = 'block';
				
    this.loading.hide();
    new Effect.Appear('divContainer', { 
        duration: this.resizeDuration, 
        queue: 'end'
    });
		
	},

	end: function() {
		var div = this.divContainer.down('div');
		if(div){ document.body.appendChild(div); div.hide() }
		this.divContainer.hide();
		Lightbox.prototype.end.call(this);
	}

})

Event.observe(window,'load', function(){ new Contentbox();})