Element.addMethods({
  redraw: function(element){
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
  }
});

Ahhh = {  
  rays: function(style, radius, colorFrom, colorTo, opacityFrom, opacityTo, rotate){
    var element = new Element('div',{ className: 'ahhh', style:'z-index:-2;position:absolute' }).setStyle('display:none');
    $(document.body).insert(element);
    
    var s = radius, p = Raphael(element, s, s);
    element.setStyle(style);

    function addSector(path, cx, cy, r, startAngle, endAngle) {
      var x1 = cx + r * Math.cos(-startAngle * Math.PI / 180),
        x2 = cx + r * Math.cos(-endAngle * Math.PI / 180),
        y1 = cy + r * Math.sin(-startAngle * Math.PI / 180),
        y2 = cy + r * Math.sin(-endAngle * Math.PI / 180);
      path.lineTo(cx, cy).lineTo(x1, y1).lineTo(x2,y2);
    };

    var g = p.set();
    var steps = 20;

    var path = p.path({stroke:'none',strokeWidth:'none'}).attr({
        gradient: { 
          type: "radial",
          dots: [
            {color: colorFrom, opacity:opacityFrom },
            {color: colorTo, opacity:opacityTo }
          ]
        }
    }).moveTo(s/2,s/2);

    $R(0,steps-1).each(function(a){
      var ang = a*360/steps + 360/(steps*4), v = [
        0, 0,
        Math.sin((ang+90) * Math.PI / 180),
        Math.cos((ang+90) * Math.PI / 180)
      ];
      if(v[2]<0){ v[0] = -v[2]; v[2] = 0 }
      if(v[3]<0){ v[1] = -v[3]; v[3] = 0 }

      addSector(path, s/2, s/2, s/2, a*360/steps, a*360/steps + 360/(steps*2));
    });  
    
    path.andClose();

    var d = (new Date).getTime(), l;
    Ahhh.interval = setInterval(function(){
      l = (new Date).getTime(); d = l-d;
      path.rotate(rotate * d/1000); d = l;
      if(Prototype.Browser.WebKit) element.redraw();
    }, 50);
    
    if(Prototype.Browser.IE)
      element.show();
    else
      element.setStyle('opacity:0').show().morph('opacity:1',{duration:2});
    Ahhh.element = element;
  }
};

Number.prototype.fuzzy = function(value){
  return this+(Math.random()*value)-value/2;
};

Array.prototype.random = function(){
  return this.sortBy(Math.random).first();
};

(function(){
  var t = $w('spring swingTo swingFromTo bounce bouncePast easeOutBounce'),
    nav = $('navigation');
    
  function shuffle(){
	  var index = 1;
	  
	  var x = 0;
	  var y = 0;
	  
	  var pastop = 148;
	  var pasleft = 163;
	  
    nav.select('li').each(function(box, i){
	  if (index != 1) {
		  if (index >=2 && index <= 4) {
			  if (index % 2 == 0) { 
			  	x = x + pasleft; 
			  } else {
			  	y = y + pastop; 
				x = 0; 
			  }
		  } else if (index % 5 == 0) {
			  x = 0;
			  y = y + pastop;
		  } else {
			  x = x + pasleft; 
		  }
	  }
	  box.morph('top:'+y+'px;left:'+x+'px', {
		duration: 2+(Math.random()*2), delay: i/4,
		propertyTransitions: { top: t.random(), left: t.random() }});
	  index++;
    });
  }
  
  nav.select('li').each(function(box,i){
    //var c = Math.cos((0).fuzzy(10)/(180/Math.PI)).toFixed(3), s = Math.sin((0).fuzzy(10)/(180/Math.PI)).toFixed(3),
    //  filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+")";
    //
    //box.setStyle('left:'+(i*200).fuzzy(150)+'px;'+
    //  '-moz-transform:rotate('+(0).fuzzy(10)+'deg);'+
    //  '-webkit-transform:rotate('+(0).fuzzy(10)+'deg);'+
    //  '-webkit-transform:rotate('+(0).fuzzy(10)+'deg);'+
    //  'filter:'+filter);
    //
    //(function(){ box.setStyle('z-index:1'); }).defer();  
  });
  shuffle();
  
  var zIndex = 0;  
  var img = 0;
  nav.select('li').each(function(n){
    n.observe('mouseenter', function(){
      n.setStyle('z-index:'+(zIndex++)).morph('margin-top:-6px;margin-left:-6px;');
	  img++;
    });
    n.observe('mouseleave', function(){
      n.morph('margin-top:0px;margin-left:0px;');
    });
  });
  
})();