// JavaScript Document
var bg;
window.onload = function(){
	bg = document.body.className.substr(1);
	var b1 = $('b1');
	b1.insertBefore(EL({tagName:'img', src:'/design/b'+bg+'1.gif', width:800, height:238, 
		onload:function(){ 
		 	rit.pljak();
			rit.init_squares(); 
			rit.init_mm();
		}
	}), b1.firstChild);
}
var rit = {
	init_mm: function(){
		var el = $('mm');
		for (var i=0, l=el.childNodes.length, li; i<l; i++){
			li = $(el.childNodes[i]);
			if (!li.firstChild) continue;
			var ch = li.getFirstNode();
			var w = ch.offsetWidth;
			var h = ch.offsetHeight;
			if (li.className == 'active' || ch.tagName.toLowerCase()=='span'){
				var z_el = EL({className:'mm_active', w:w/4, style:{width:'1px', height:h+'px'}});
				li.insertBefore(z_el, ch);
				PropertyTransformer.add(z_el, 'w', w, 8, {
					onTransform:function(){
						this.style.width = this.w+'px';
						this.style.left = -this.w-3+'px';
					}
				});
			} else {//a
				Element.addClassName(ch, 'no_bg');
				ch.start_w = w;
				ch.w = w;
				ch.b_el = EL({style:{width:w+'px', height:h+'px', backgroundColor:'#000', position:'absolute', left:0, top:0, zIndex:0}});
				ch.z_el = EL({className:'mm_active', w:0, style:{width:'0px', height:h+'px'}});
				li.insertBefore(ch.b_el, ch);
				li.insertBefore(ch.z_el, ch);
				ch.onmouseover = function(){
					Element.addClassName(this, 'pink');
					PropertyTransformer.add(this, 'w', 0, 7, {
						onTransform:function(){
							this.b_el.style.width = this.w+'px';
							var w = Math.round((this.start_w - this.w)/5);
							this.z_el.style.width = w + 'px';
							this.z_el.style.left = -(w + 3) + 'px';
						}
					});
				}
				ch.onmouseout = function(){
					Element.removeClassName(this, 'pink');
					PropertyTransformer.add(this, 'w', this.start_w, 7, {
						onTransform:function(){
							this.b_el.style.width = this.w+'px';
							var w = Math.round((this.start_w - this.w)/5);
							this.z_el.style.width = w + 'px';
							this.z_el.style.left = -(w + 3) + 'px';
						}
					});
				}
				
				
			}
		}
	},
	init_squares: function(){
		var b1 = $('b1');

		function square(i){
			setTimeout(function(){
				EL({parentNode:b1, className:'sq', style:{top:(38+i*10)+'px'}})
			}, 1200+i*25);
		}
		
		function text(i){
			setTimeout(function(){
				EL({parentNode:b1, id:'sq_tx', style:{top:(35+i*10)+'px'}, 
					chars:"it's alconcted",
					str:"it's all connected",
					update:function(){
						if (this.innerHTML!=this.str){
							setTimeout(function(){
								var self = document.getElementById('sq_tx');
								var str = '';
								for (var i=0; i<18; i++){
									str += self.innerHTML.charAt(i)==self.str.charAt(i) ? 
										self.innerHTML.charAt(i) : self.chars.charAt(Math.floor(Math.random()*self.chars.length));
								}
								self.innerHTML = str;
								self.update();
							}, 35);
						} else {
							rit.init_stripes();
						}
					} 
				}).update();
			}, 1200+i*25);
		}
		
		var empty = [0,15,0,9,8,7,7];
		for (var i=0; i<17; i++) {
			if (empty[bg]!=i) square(i);
			else text(i);
		}
	},
	pljak:function(){
		setTimeout(function(){$('b2').style.visibility = 'visible'}, 300);
		setTimeout(function(){
			var el = $('b3');
			
			el.style.visibility = 'visible'
			el.style.opacity = 0;
			PropertyTransformer.add(el.style, 'opacity', 1, 5, {
				round:false,
				onTransformComplete:function(){ this.opacity = ''; }
			});
		}, 500);
	},
	init_stripes:function(){
		var el = $('stripes');
		var max_w = el.offsetWidth;
		this.square_A = EL({parentNode:el, className:'stripe', which:'A', x:max_w, w:0});
		this.square_B = EL({parentNode:el, className:'stripe', which:'B', x:max_w, w:0});
		
		function transform(el){
			var speed = 20+Math.round(Math.random()*200);
			var w = 10+Math.random()*max_w/3*2
			var x = Math.random()*max_w;
			PropertyTransformer.add(el, 'w', w, speed);
			PropertyTransformer.add(el, 'x', x, speed, {
				onTransform:function(){
					this.style.left = this.x+'px';
					this.style.width = this.w+'px';
				},
				onTransformComplete:function(){
					var which = this.which;
					setTimeout(function(){
						transform(rit['square_'+which]);
					}, 500 + Math.floor(Math.random()*3000) );
				}
			});
		}
		
		transform(this.square_A);
		transform(this.square_B);
		
	}
}

Object.extend = function(d,s) {for (var p in s) d[p] = s[p]; return d;};
function $(el) {
  var el = (typeof el == 'string') ? document.getElementById(el) : el;
  for (var i in Element){
    el[i] = Element[i];
  }
  return el;
}

function EL(o){
  var el = document.createElement(o.tagName||'div');
  for (var i in o){
    switch (i) {
      case 'parentNode': 
      case 'tagName': break;
      case 'style': for (var p in o.style) el.style[p] = o.style[p]; break;
      default: el[i] = o[i];
    }
  }
  if (o.parentNode) o.parentNode.appendChild(el);
  for (var i in Element){
    el[i] = Element[i];
  }
	return el;
};

Element = {
  addClassName: function(el, cl){ 
    if (!el.className.match(new RegExp("\\b"+cl+"\\b"))) el.className += ' '+cl; 
  },
  removeClassName: function(el, cl){ 
    el.className = el.className.replace((new RegExp("\\b"+cl+"\\b")), '');
  },
  getFirstNode: function(){
    var el = this.firstChild;
    while (el){
      if (el.nodeType == 1) return $(el);
      el = el.nextSibling;
    }
  }
}

PropertyTransformer = {
	transforms:[],
	add: function(obj, property, value, steps, options){
		var transform = Object.extend({
			obj: obj, property: property, start_value: obj[property], delta_value: value - obj[property], steps: steps, step: 0,
			easing: 'easeInOutQuart', amplitude: 1, period: 1, round: true
		}, options||{})
		
		this.kill(obj, property)
		this.transforms.push(transform)
		this.start();
	},
	start: function(){
		if (!this.interval_id){
			this.interval_id = setInterval(function(){
				PropertyTransformer.next();
			}, 35);
		}
	},
	next: function(){
		for (var i=this.transforms.length-1, tr; i>=0; i--){
			tr = this.transforms[i];
			tr.step++;
			if (tr.step == tr.steps){
				tr.obj[tr.property] = tr.start_value + tr.delta_value;
			} else {
				var val = Math[tr.easing](tr.step, tr.start_value, tr.delta_value, tr.steps, tr.amplitude, tr.period);
				tr.obj[tr.property] = (tr.round) ? Math.round(val) : val;
			}
		}
		for (var i=this.transforms.length-1, tr; i>=0; i--){
			tr = this.transforms[i];
			if (tr.onTransform) tr.onTransform.call(tr.obj, tr.property);
		}
		for (var i=this.transforms.length-1, tr; i>=0; i--){
			tr = this.transforms[i];
			if (tr.step == tr.steps) {
				if (tr.onTransformComplete) tr.onTransformComplete.call(tr.obj, tr.property);
				this.transforms.splice(i,1);
			}
		}
		if (this.transforms.length == 0) {
			clearInterval(this.interval_id);
			delete this.interval_id;
		}
	},
	kill: function(obj, property){
		if (property){
			for (var i=this.transforms.length-1, tr; i>=0; i--){
				tr = this.transforms[i];
				if (tr.obj == obj && tr.property == property){
					this.transforms.splice(i,1);
					break;
				}
			}
		} else {
			for (var i=this.transforms.length-1; i>=0; i--){
				if (this.transforms[i].obj == obj) this.transforms.splice(i,1);
			}
		}
	}
}

Object.extend(Math, {
	easeInOutQuart: function (t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	}
})