/*
  Copyright (c) 2007 Robert Otani
*/
OST.namespace("OST.art.circle1");

OST.art.circle1 = {
  drawCircle : function(r)  {    
    var circumference = 2 * Math.PI * r;    
    var body = YAHOO.util.Dom.get("nurr");

    // since it's top and left, thus up in the left corner
    // let's shift it over the right and down a bit so we can  
    // see the whole circle
    var xOffset = Math.round(parseInt(body.clientWidth) / 2.1);
    var yOffset = 200;

    var n = 36;      // Number of words to display on the path

    var iH = '';
    var bleh = "OTANI";
    
    // Bucket for new DOM elements that we'll add after
    // the while loop is finished (this speeds things up significantly)
    var elCircles = [];

    // guts of the circle drawing...
    for (var i=0; i < n; i++) {
      var rads = i * (2 * Math.PI / n);
      x = Math.round(r *Math.cos(rads)) + xOffset;
      y = Math.round(r * Math.sin(rads)) + yOffset;

      if ("STUDIO" === bleh) {
        bleh = "OTANI";
      } else {
        bleh = "STUDIO";
      }
      
      iH += '<span class="period" style="left:' + x + 'px;top:' + y + 'px" id="dot' + i + '" >' + bleh + '</span>';
    }
    
    body.innerHTML += iH;
    
    var center = '<span class="period" style="left:' + xOffset + 'px;top:' + yOffset + 'px;" id="center">otanistudio.com</span>';
    body.innerHTML += center; 
    
    // re-align elements so the text centers are aligned with the path
    var stuff = YAHOO.util.Dom.getElementsByClassName('period');
    for (var i=0; i < stuff.length; i++) {
      var w = stuff[i].offsetWidth;
      var x = stuff[i].offsetLeft;
      var newLeft = parseInt(x-w/2) + "px";
      YAHOO.util.Dom.setStyle(stuff[i], 'left', newLeft);
    }
    
  },

  colorAnim : function(el) {
    var anim = new YAHOO.util.ColorAnim(el, 
      {color : 
        { 
          from : "#333",
          to : "#FF7A22"
        }
      },
      1.5
    );
    anim.animate();
  },

  doSomethingCool : function() {
    var dt = 700;
    var phaseDt = 100;
    var body = YAHOO.util.Dom.get('nurr');
    var spans = body.getElementsByTagName('span');
    for (var i=0; i < spans.length; i++) {
      if("Microsoft Internet Explorer" === navigator.appName) {
        setTimeout("OST.art.circle1.colorAnim(" + spans[i].id + ")", dt + phaseDt * i);
      } else {
        setTimeout(OST.art.circle1.colorAnim, dt + phaseDt * i, spans[i].id);
      }
    }
  },

  main : function() {
    OST.art.circle1.drawCircle(150);
    OST.art.circle1.doSomethingCool();
  }
  
}

YAHOO.util.Event.on(window, 'load', OST.art.circle1.main);