/*
	! Dependencies:	/wwroot/common/scripts/lib/scriptaculous/scriptaculous.js
					/wwroot/common/scripts/lib/prototype/prototype.js
					/wwroot/common/scripts/lib/util/functions.js
					
	These are imported using the display script's ./import.php
*/

/*
	Returns the width and height of the viewport
*/
Position.GetWindowSize = function(w) {

	if(!w) var w = window;
	var width = w.innerWidth || 
				(w.document.documentElement.clientWidth || 
				w.document.body.clientWidth);
	var height = w.innerHeight || 
				(w.document.documentElement.clientHeight || 
				w.document.body.clientHeight);
	return [width, height];

},

/*
	Centers an element relative to "parent"
	(or the viewport if no parent is given)
*/
Position.Center = function(element, parent) {
	var w, h, pw, ph;
	w = $(element).getWidth();
	h = $(element).getHeight();
	Position.prepare();
	if (!parent) {
			var ws = Position.GetWindowSize();
			pw = ws[0];
			ph = ws[1];
	} else {
			pw = $(parent).getWidth();
			ph = $(parent).getHeight();
	}
	var setLeft = Math.floor((pw-w)/2);
	var setTop = Math.floor((ph-h)/2);
	$(element).setStyle({ left: setLeft + "px", top: setTop + "px" });
},

/*
	Returns the distance from the top of the viewport to the top of the document
	(i.e. the distance scrolled)
*/
Position.GetScroll = function() {
	return self.pageYOffset || (document.documentElement.scrollTop || document.body.scrollTop);
}

/*
	The thing. Documentation to come.
*/
var Display = Class.create({

	spinner: 'http://housing.wisc.edu/common/scripts/lib/display/im/large-spinner.gif'.preloadImage(),
	image: null,
	dur: 0.10,
	opac: 0.80,
	bounce: 0,
	
	initialize: function(el) {
		
		if(typeof el == 'string')
			this.image = el.preloadImage();
		else
			this.image = el.href.preloadImage();
		
		Event.observe(el, 'click', this.single.bindAsEventListener(this), false);
		el.onclick = function() { return false; }
		
		el.style.cursor = "pointer";
		el.title = "Click to enlarge";
	},
	
	single: function() {
	
		if(typeof this.image == 'string')
			this.image = this.image.preloadImage();
		
		// IE doesn't do position:fixed, so we remember how far
		// down the page we are and go back to the top temporarily
		// to display the image
		if(_browser == "Internet Explorer") {
			this.fit('100%', 'hidden');
			this.bounce = Position.GetScroll();
			window.scrollTo(0, 0);
		}
		
		Effect.Appear('overlay', { duration: this.dur, to: this.opac } );
		$('overlay').observe('click', this.closeDisplay.bindAsEventListener(this), false);
	
		var w = Position.GetWindowSize();
		var maxWidth = 0.9 * w[0] + 'px';
		var maxHeight = 0.9 * w[1] + 'px';
	
		if(this.image.complete)
			this.show(maxWidth, maxHeight);
		else {
			this.spin();
			Event.observe(this.image, 'load', function() {
				this.show(maxWidth, maxHeight);
			});
		}
	},
	
	spin: function() {
		
		$('display').innerHTML = '<img src="'+this.spinner+'" style="margin:30px;" />';
		Position.Center('display');
		Effect.Appear('display', { duration: this.dur } );
	
	},
	
	show: function(maxw, maxh) {

		$('display').innerHTML = '<img src="'+this.image.src+'" style="max-height: '+maxh+'; max-width: '+maxw+';" />';
		Position.Center('display');
		Effect.Appear('display', { duration: this.dur } );
		
	},
	
	fit: function(height, overflow){
		
		var b = document.getElementsByTagName('body')[0];
		b.style.height = height;
		b.style.overflow = overflow;
  
		var h = document.getElementsByTagName('html')[0];
		h.style.height = height;
		h.style.overflow = overflow;
		
	},
	
	// Note to self -- close() is reserved
	closeDisplay: function() {

		$('display').fade({ duration: this.dur });
		$('overlay').fade({ duration: this.dur });
		$('overlay').onclick = null;
		
		if(_browser == "Internet Explorer") {
			this.fit('auto', 'auto');
			new PeriodicalExecuter( function(pe) {
				window.scrollBy(0, this.bounce);
				pe.stop();
			}.bind(this), this.dur);
		}
		
		if(exists('slideshow')) slideshow.stop(); // To destroy a slideshow, if one exists
		
	},
	
	multiple: function(query, sort) {
		
		var photos = new Array();
		var count = 0;
		new Ajax.Request('http://housing.wisc.edu/common/scripts/lib/display/slideshow/slideshow.php?'+query+'&'+sort, {
			method: 'get',
			onSuccess: function(transport) {
			
				chunks = transport.responseText.split('|'); // request returns a piped list of image urls
				chunks.each( function(p) { photos.push(p); }); // queue them up
			
				this.single(); // show the first photo
				photos[count+1].preloadImage(); // unnecessary but nice; preload the next image
				
				$('overlay').onclick = function() { if(exists('slideshow')) slideshow.stop(); }
				
				// slideshow must be global (for now... till fixed)
				slideshow = new PeriodicalExecuter( function() {
					if(count < chunks.length - 1) {
						count++;
						this.image = photos[count]; // update the Display object with the next photo...
						this.single(); // ... and show it
						if(count < chunks.length - 2)
							photos[count+1].preloadImage(); // again unnecessary, but makes things go faster
					} else {
						this.closeDisplay();
						slideshow.stop();
					}
				}.bind(this), 5);
			}.bind(this)
		});
	}
	
}); // End Display

// Link up all a tags
linkImages = function() {
	
	var anchors = $$('a');

	// loop through all a tags
	for (var i = 0; i < anchors.length; i++)
		if(anchors[i].rel.indexOf("display") != -1)
			var d = new Display(anchors[i]);
			
}

Event.observe(window, 'load', getBrowserInfo);
Event.observe(window, 'load', linkImages);