/** 
 *  boxes.js
 *  upwall.dev
 *
 *  Created by JCSiegrist on 2006-01-04.
 *  Copyright (c) 2006 mertes & siegrist. All rights reserved.
 *
 */

var BrowserDetect = Class.create();
BrowserDetect.prototype = {
	initialize: function() {
		var ua = navigator.userAgent.toLowerCase(); 

		this.isIE = (ua.indexOf('msie') != -1 && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); 
		// browser version
		this.versionMinor = parseFloat(navigator.appVersion); 
		if (this.isIE && this.versionMinor >= 4) {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
		}
		this.versionMajor = parseInt(this.versionMinor);
		this.isIE5x = (this.isIE && this.versionMajor == 5);
	}
}
browser = new BrowserDetect();

var Box = Class.create();
Box.boxes = new Array();
Box.effects = ['PhaseV','Appear','PhaseH'];

Box.prototype = {
	create: function(){ 
		Element.hide(this.element);
	},
	
	reveal: function(){
		var eff = Box.getRandomEffect();
		if (!eff) eff=this.options.effect;
		this.element.effect = new Effect[eff](this.element, this.options);
	}
}

Box.dom = Class.create();
Object.extend(Object.extend(Box.dom.prototype,Box.prototype),{
	initialize: function(left, top, width, height, boxStyle, options) {
		this.left = left;
		this.top = top;
		this.width = width;
		this.height = height;
		this.boxStyle = boxStyle;
		this.boxClass = 'dom';
	
		this.options = Object.extend({
			effect:'Appear',
			startTime:0,
			baseStyle:'decobox',
			duration:1.0,
			opacity:1.0
		}, options || {});
		
		this.id = Box.boxes.length;
		Box.boxes.push(this);
	},
	
	create: function(){ //create the box 
		var container = $('content');
		if (!container) return;
		
		this.element = document.createElement('div');
		this.element.id = 'dombox'+this.id;
		Element.addClassName(this.element,this.options.baseStyle);
		Element.addClassName(this.element,this.boxStyle);
		
		this.element.style.top = this.top + 'px';
		this.element.style.left = this.left + 'px';
		if (!browser.isIE5x) {
			this.element.style.width = this.width + 'px';
			this.element.style.height = this.height + 'px';
		}
		else {
			this.element.style.width = this.width+2 + 'px';
			this.element.style.height = this.height+2 + 'px';
		}
		
		Element.hide(this.element);
	
		container.appendChild(this.element);
	}
	
});

Box.html = Class.create();
Object.extend(Object.extend(Box.html.prototype,Box.prototype),{
	initialize: function(element, options){
		this.element = $(element);
		this.options = Object.extend({
			effect:'Appear',
			startTime:0,
			duration:1.0,
			opacity:1.0
		}, options || {});

		this.boxClass = 'html';
		
		this.id = this.element.id;
		Box.boxes.push(this);
	}
});

Box.getRandomEffect = function(){
	if (!Box.effects) return false;
	
	return Box.effects[Math.round(Box.effects.length * Math.random())];
}

 		
Box.initBoxes = function( options ) {
	if (!document.createElement || 
		!document.getElementById || 
		!document.getElementsByTagName) return;

		options = Object.extend({
			maxDelayDom: 3.5,
			maxDelayHtml: 1
		}, options || {});
	
	for(var i=0; i < Box.boxes.length; i++){
		Box.boxes[i].create();
		var maxDelay = (Box.boxes[i].boxClass=='dom') ? options.maxDelayDom : options.maxDelayHtml;
		maxDelay *= 1000;
		if (maxDelay != 0) {
			setTimeout(Box.boxes[i].reveal.bind(Box.boxes[i]), Math.round(Math.random()* maxDelay));
		}
		else{
			Box.boxes[i].reveal();
		}
	}
}


Box.projectsNav = function(element, goal) {
	if (!(element = $(element))) return;
	
	if (!(element = element.getElementsByTagName('A')[0])) return;

	if (goal == 'show') {
		clearTimeout(element.mOutTimeout);
		
		if (element.effect && element.state=='hiding') {
			element.effect.cancel();
			element.state='';
		}
		if (element.state!='showing') {
			element.effect = new Effect.Appear(element,
					{	beforeStart:function(){	element.state='showing'; }, 
						afterFinish:function(){ element.state=''; },
						duration:0.3
					}
			);
		}
	}
	else if (goal == 'hide'){
		if (element.effect && element.state=='showing') {
			element.effect.cancel();
			element.state='';
		}
		if(element.state!='hiding') {
			element.effect = new Effect.Fade(element,
					{	
						beforeStart:function(){ element.state='hiding'; }, 
						afterFinish:function(){	element.state=''; },
						duration:0.3
					}
			);
		}
	} else if (goal == 'mout') {		
		element.mOutTimeout = setTimeout(function(){Box.projectsNav(element.parentNode.id, 'hide')},300);

	}
}

/*
additional Effects
------------------------------------------------------------------------
*/

Effect.PhaseIn = function(element, orientation) {
	element = $(element);
	var options = Object.extend({to:arguments[2].opacity}, arguments[2] || {});
	if(orientation == 'vertical') { new Effect.BlindDown(element, arguments[2] || {}); }
	else {new Effect.BlindRight(element, arguments[2] || {}); }
	new Effect.Appear(element, options);
}

Effect.PhaseOut = function(element, orientation) {
	element = $(element);
	var options = Object.extend({to:arguments[2].opacity}, arguments[2] || {});
	new Effect.Fade(element, options);
	if(orientation == 'vertical') { new Effect.BlindUp(element, arguments[2] || {}); }
	else { new Effect.BlindUp(element, arguments[2] || {}); } // we don't need it here
}

Effect.PhaseH = function(element) {
	element = $(element);
	if(element.style.display == 'none') { new Effect.PhaseIn(element, 'horizontal', arguments[1] || {}); }
	else { new Effect.PhaseOut(element, 'horizontal', arguments[1] || {}); }
}

Effect.PhaseV = function(element) {
	element = $(element);
	if(element.style.display == 'none') { new Effect.PhaseIn(element, 'vertical', arguments[1] || {}); }
	else { new Effect.PhaseOut(element, 'vertical', arguments[1] || {}); }
}

Effect.BlindRight = function(element) {
	element = $(element);
	var oldWidth = element.style.width;
	var elementDimensions = Element.getDimensions(element);
	return new Effect.Scale(element, 100, 
		Object.extend({ scaleContent: false, 
			scaleY: false,
			scaleFrom: 0,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
			restoreAfterFinish: true,
			afterSetup: function(effect) {
				Element.makeClipping(effect.element);
				effect.element.style.width = "0px";
				Element.show(effect.element); 
			},	
			afterFinishInternal: function(effect) {
				Element.undoClipping(effect.element);
				effect.element.style.width = oldWidth;
			}
		}, arguments[1] || {})
	);
};

function trace( msg ){
	if( typeof( jsTrace ) != 'undefined' ){
		jsTrace.send( msg );
	}
}