Object.extend = function(destination, source) {
  for (var property in source) { destination[property] = source[property]; }
  return destination;
}

Function.prototype.bind = function() {
  var __method = this, object = arguments[0];
  return function() { return __method.apply(object); };
};

var $ = function(element) { return (typeof element == 'string') ? document.getElementById(element) || null : element; };

var setStyle = function(element, name, value) {
   if(name == 'opacity') {
    if (value == 1) {
      value = (/Gecko/.test(navigator.userAgent) &&
        !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : 1.0;
      if(/MSIE/.test(navigator.userAgent) && !window.opera)
        element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
    } else if(value == '') {
      if(/MSIE/.test(navigator.userAgent) && !window.opera)
        element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
    } else {
      if(value < 0.00001) value = 0;
      if(/MSIE/.test(navigator.userAgent) && !window.opera)
        element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +
          'alpha(opacity='+value*100+')';
    }
   }
   element.style[name] = value;
};

var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var d2h = function(number, len) {
	if (number < 16) {
		var res = hex[number];
		while (res.length < len) 
			res = '0' + res;
		return res;
	}
		
	var mod = number % 16;
	return d2h((number - mod) / 16, len-1).toString() + hex[mod];
};


var Effect = function(obj, duration, a, options, afterFinish) {
	this.element 		= $(obj);	
	this.duration 		= duration ? parseFloat(duration) : 1;
	this.accelleration 	= a ? parseFloat(a) : 0;
	this.pos 			= 0;
	this.cronid 		= 0;
	this.afterFinish    = (typeof afterFinish == 'function') ? afterFinish : function() {};
	this.options 		= options;
	
	this.pointer		= function(t) {
		return (t == this.t0) ? 0 : Math.pow((t - this.t0)/(this.t1 - this.t0), 1 - this.accelleration); 
	};
	
	this.time = function() {
		return new Date().getTime();
	};
	
	this.start = function() {
		this.t0 = this.time();
		this.t1 = this.t0 + (this.duration * 1000);
		this.cronid = window.setInterval(this.loop.bind(this), 10);
	}
	
	this.render = function(t) {
		var pos = this.pointer(t);

		for(var i =0; i < this.options.length; i++) {
			var options = Object.extend({
				property: 'height',
				p0: 0, 
				p1: 1,
				px: 'px',
				pref: '',
				c1: 0, c2: 0, c3: 0
			}, this.options[i] || {});

			var p = options.p0 + pos*(options.p1 - options.p0);
			this.element._value = p;
			if (options.property.toLowerCase().indexOf('color') != -1) {
				p = d2h(Math.round(p));
				setStyle(this.element, options.property, 
					'#' + (options.c1 ? options.c1 : p) + 
						(options.c2 ? options.c2 : p) + 
						(options.c3 ? options.c3 : p));
			} else {
				setStyle(this.element, options.property, options.pref + p + options.px);
			}
		};	

	};
	
	this.loop = function() {
		var t = this.time();
		if (t >= this.t1) {
			this.render(this.t1);
			this.finish();
			return;
		};

		this.render(t);
	};
	
	this.finish = function() {
		this.cancel();
		this.afterFinish(this.element);
	};
	
	this.cancel = function() {
		if (this.cronid) window.clearInterval(this.cronid);
	};
	
	this.start();
};

function _print(el) {
	document.body.appendChild(document.createTextNode(el));
	document.body.appendChild(document.createElement('BR'));
}

function bodyloaded() {
	var item_about = $('item_about');
	
	item_about.onmouseover = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 26;
		this._effect = new Effect(this, 0.4, 0, [{property: 'color', p0: 137, p1: 219, c3: '2d'}, {property: 'fontSize', p0: val, p1: 35}]);
	};
	
	item_about.onmouseout = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 35;
		this._effect = new Effect(this, 0.4, 0, [{property: 'color', p0: 219, p1: 137, c3: '2d'}, {property: 'fontSize', p0: val, p1: 26}]);
	};
	
	var item_portfolio = $('item_portfolio');
	
	item_portfolio.onmouseover = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 26;
		this._effect = new Effect(this, 0.4, 0, [{property: 'color', p0: 198, p1: 225, c2: '7e', c3: '06'}, {property: 'fontSize', p0: val, p1: 35}]);
	};
	
	item_portfolio.onmouseout = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 35;
		this._effect = new Effect(this, 0.4, 0.4, [{property: 'color', p0: 225, p1: 198, c2: '6b', c3: '06'}, {property: 'fontSize', p0: val, p1: 26}]);
	};

	var item_contacts = $('item_contacts');
	
	item_contacts.onmouseover = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 26;
		this._effect = new Effect(this, 0.4, 0, [{property: 'color', p0: 101, p1: 161, c1: '70', c2: '90'}, {property: 'fontSize', p0: val, p1: 35}]);
	};
	
	item_contacts.onmouseout = function() {
		if (this._effect) this._effect.cancel();
		var val = this._value ? this._value : 35;
		this._effect = new Effect(this, 0.4, 0.4, [{property: 'color', p0: 161, p1: 101, c1: '55', c2: '5d'}, {property: 'fontSize', p0: val, p1: 26}]);
	};

	// navigation click effects
	item_about.onclick = function() {
		setShroud('about');
	};

	item_portfolio.onclick = function() {
		setShroud('portfolio');
	};
	
	item_contacts.onclick = function() {
		setShroud('contacts');
	};
	
	// paging effects
	var paging = $('paging');
	var spans = paging.getElementsByTagName('SPAN');
	for(var i=0; i<spans.length; i++) {
		spans[i].onclick = function() {
			initpages();
			this.className = "active";
			var page = parseInt(this.innerHTML);
			var portfolio = $('portfolio');

			var col = Math.round(Math.random()*2);
			var g = $('shroud');
			g.className = colors[col];
			setStyle(g, 'opacity', 1);
			setStyle(g, 'width', '1px');
			setStyle(g, 'left', '50%');
			setStyle(g, 'height', '');
			setStyle(g, 'display', 'block');
		
			g._effect = new Effect('shroud', 0.4, -0.3, [{property: 'width', p0: 1, p1: 734}, {property: 'left', p0: 50, p1: 0, px: '%'}], function() {
				var lis = portfolio.getElementsByTagName('LI');
				for(var j=0; j<lis.length; j++) {
					lis[j].className = "hidden";
				};
				for(var j=(page-1)*4; j<Math.min(lis.length,page*4); j++) {
					lis[j].className = "visible";
				};
				hideShroud();
			});

		};
	};
}

function initpages() {
	var paging = $('paging');
	var spans = paging.getElementsByTagName('SPAN');
	for(var i=0; i<spans.length; i++) {
		spans[i].className = "";
	};
}

var colors = ['green', 'orange', 'blue'];
var menu = ['contacts', 'about', 'portfolio'];
function setShroud(element) {
	var col = Math.round(Math.random()*2);
	var g = $('shroud');
	g.className = colors[col];
	setStyle(g, 'opacity', 1);

	var eff = Math.round(Math.random()*2);

	if (g._effect)
		g._effect.cancel();
		
	switch(eff % 3) {
		case 0:
			setStyle(g, 'left', '0');
			setStyle(g, 'height', '1px');
			setStyle(g, 'width', '');
			setStyle(g, 'display', 'block');
		
			g._effect = new Effect('shroud', 0.4, -0.2, [{property: 'height', p0: 1, p1: 36.3, px: 'em'}], function() {
				for(var i=0; i<menu.length; i++) {
					setStyle($(menu[i]), 'display', element == menu[i] ? 'block' : 'none');
				};
				hideShroud();
			});
			break;
		
		case 1:
			setStyle(g, 'left', '0');
			setStyle(g, 'width', '1px');
			setStyle(g, 'height', '1px');
			setStyle(g, 'display', 'block');
		
			g._effect = new Effect('shroud', 0.4, -0.3, [{property: 'height', p0: 1, p1: 36.3, px: 'em'}, {property: 'width', p0: 1, p1: 734}], function() {
				for(var i=0; i<menu.length; i++) {
					setStyle($(menu[i]), 'display', element == menu[i] ? 'block' : 'none');
				};
				hideShroud();
			});
			break;
		
		case 2:
			setStyle(g, 'width', '1px');
			setStyle(g, 'left', '50%');
			setStyle(g, 'height', '');
			setStyle(g, 'display', 'block');
		
			g._effect = new Effect('shroud', 0.4, -0.3, [{property: 'width', p0: 1, p1: 734}, {property: 'left', p0: 50, p1: 0, px: '%'}], function() {
				for(var i=0; i<menu.length; i++) {
					setStyle($(menu[i]), 'display', element == menu[i] ? 'block' : 'none');
				};
				hideShroud();
			});
			break;
	}
}

function hideShroud() {
	var g = $('shroud');

	if (g._effect)
		g._effect.cancel();
		
	g._effect = new Effect('shroud', 0.5, -0.3, [{property: 'opacity', p0: 1, p1: 0, px: ''}], function() {setStyle($('shroud'), 'display', 'none');});
}