// blog.js
// -------
// Main JavaScript for the Reflection theme. Actual reflection is done using
// Christophe Beyls' reflection.js for mootools script:
//   http://www.digitalia.be/software/reflectionjs-for-mootools

var Site = {
	init: function(options) {
		this.options = $extend({
			panelDuration: 600,
			panelTransition: Fx.Transitions.Cubic.easeInOut,
			panelOpacity: 0.87,
			reflectionHeight: 0.15,
			reflectionOpacity: 0.5,
			faderDuration: 600
		}, options || {});
		
		this.panelIds = new Array(), this.panelSlide = new Array(), this.panelOpacity = new Array();
		this.panels = $$('#titlebits a.panel');
		this.mainImage = $('mainimage');
		this.panelClick = this.clickPanel.bind(this);
		this.loadingImage = 0;
		this.panelInTrans = this.panelDisplay = -1;
		

		this.setPanels();
		this.doReflection();
		
		this.panels.each(function(link, i) {
			var id = link.id+"_panel", p = $(link.id+"_panel");
			$(link.id+"_holder").setStyle('display', 'block');
			this.panelSlide[i] = new Fx.Slide(id, {
				duration:this.options.panelDuration,
				transition:this.options.panelTransition,
				onComplete:function() {
					this.panelInTrans = -1;
					this.panelDisplay = this.panelDisplay == -1 ? i : -1;
				}.bind(this)
			}).hide();
			this.panelOpacity[i] = new Fx.Style(id, 'opacity', { duration: 600 });
			link.addEvent('click', function(e){
				e = new Event(e);
				e.stop();
				this.panelClick(i);
			}.bind(this));
		}.bind(this));
	},
	
	fadeOut: function() {
		$('theoverlay_panel').setStyles({width:this.mainImage.width, height:this.mainImage.height, opacity:0});
		$('theoverlay_holder').setStyle('display', 'block');
		
		this.imageFader.start({
			0: {'opacity': [0,1]},
			1: {'opacity': [1,0]}
		});
	},
	
	fadeIn: function() {
		this.doReflection();
		this.imageFader.start({
			0: {'opacity': [1,0]},
			1: {'opacity': [0,1]}
		});
	},
	
	loadComplete: function() {
		this.mainImage.width = Math.min(this.mainImage.width, this.preload.width);
		this.mainImage.height = Math.min(this.mainImage.height, this.preload.height);
		this.imageFader.start({
			0: {width: this.preload.width, height: this.preload.height},
			2: {width: this.preload.width}
		});
	},
	
	resizeComplete: function() {
		this.loadingImage++;
		switch(this.loadingImage) {
		case 2:
			var myAjax = new Ajax(this.templateDir+'/ajax_request.php?id='+this.postID+'&'+this.testct, {
				method:'get',
				onComplete:this.ajaxRefresh.bind(this)
			}).request();
			break;
		case 3:
			this.mainImage.width = this.preload.width;
			this.mainImage.height = this.preload.height;
			this.mainImage.src = this.preload.src;
			
			this.preload.onload = Class.empty;
			this.preload = null;
			
			this.setPanels();
			this.fadeIn();
			break;
		case 4:
			$('theoverlay_holder').setStyle('display', 'none');
			this.loadingImage = 0;
			break;
		}
	},
	
	setPanels: function() {
		//$('exif_panel').setStyles({ height: this.mainImage.height });
	},
	
	clickPanel: function(i) {
		if (this.panelInTrans==-1 && this.panelDisplay==i) {
			this.panelSlide[i].slideOut();
			this.panelOpacity[i].start(this.options.panelOpacity,0);
			this.panelInTrans = i;
		} else if (this.panelInTrans==-1 && this.panelDisplay==-1) {
			this.panelSlide[i].slideIn();
			this.panelOpacity[i].start(0,this.options.panelOpacity);
			this.panelInTrans = i;
		} else if (this.panelDisplay!=i && this.panelInTrans==-1) {
			this.panelSlide[this.panelDisplay].slideOut().chain(function(){
				this.panelSlide[i].slideIn();
				this.panelOpacity[i].start(0,this.options.panelOpacity);
				this.panelInTrans=i;
			}.bind(this));
			this.panelOpacity[this.panelDisplay].start(0);
			this.panelInTrans=this.panelDisplay;
		} else if (this.panelDisplay!=i && this.panelInTrans!=-1) {
			this.panelSlide[this.panelInTrans].stop();
			this.panelOpacity[this.panelInTrans].stop();
			this.panelDisplay=this.panelInTrans;
			this.panelSlide[this.panelInTrans].slideOut().chain(function(){
				this.panelSlide[i].slideIn();
				this.panelOpacity[i].start(0,this.options.panelOpacity);
				this.panelInTrans=i;
			}.bind(this));
			this.panelOpacity[this.panelInTrans].start(0);
		}
	},
	
	//keyboardListener: function(e) {
		//switch (e.keyCode) {
			//case 39: this.ajaxRequest(1); break;
			//case 37: this.ajaxRequest(0); break;
			// case 69: case 101: this.panelClick(0); break;
			// case 73: case 105: this.panelClick(1); break;
		//}
	//},
	
	doReflection: function() {
		var canvasHeight = Math.floor(this.mainImage.height * this.options.reflectionHeight);
		
		if (this.canvas) this.canvas.remove();
		
		if (window.ie){
			this.canvas = new Element('img', {'src': this.mainImage.src, 'styles': {
				'width': this.mainImage.width,
				'marginBottom': -this.mainImage.height+canvasHeight,
				'filter': 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(this.options.reflectionOpacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(this.options.reflectionHeight*100)+')'
			}});
		} else {
			this.canvas = new Element('canvas', {'styles': {'width': this.mainImage.width, 'height': canvasHeight}});
			if (!this.canvas.getContext) return;
		}
		
		$('reflectionholder').setStyles({'width': this.mainImage.width, 'marginLeft': 'auto', 'marginRight': 'auto'});
		this.canvas.injectInside($('reflectionholder'));
		if (window.ie) return;

		var context = this.canvas.setProperties({'width': this.mainImage.width, 'height': canvasHeight}).getContext('2d');
		context.save();
		context.translate(0, this.mainImage.height-1);
		context.scale(1, -1);
		context.drawImage(this.mainImage, 0, 0, this.mainImage.width, this.mainImage.height);
		context.restore();
		context.globalCompositeOperation = 'destination-out';
		var gradient = context.createLinearGradient(0, 0, 0, canvasHeight);
		gradient.addColorStop(0, 'rgba(255, 255, 255, '+(1-this.options.reflectionOpacity)+')');
		gradient.addColorStop(1, 'rgba(255, 255, 255, 1.0)');
		context.fillStyle = gradient;
		context.rect(0, 0, this.mainImage.width, canvasHeight);
		context.fill();
	}
};