//boxes
var names = ["box_news","box_film","box_music","box_sidebar"];
var boxes = new Array();
var flyingNames = ["bubble_tiger","bubble_ginchy","bubble_nishart"];
var flyingBoxes = new Array(), flyingContainer;
var flyX=new Array(), flyY=new Array();
var flyHover = -1, flyAlpha = .5;

//hidden screen
var screenCanvas, screenCtx=null, grad, backColor = "#444", brushRadius = 50;

//movement
var xpos = new Array();
var ypos = new Array();
var basex = new Array();
var basey = new Array();
var xspeed = [1,-1,4,-6];
var yspeed = [-3,-3,-3,-2];
var velocity_base = 1;
var velocity = 0;
var accel_base = .02;
var accel = accel_base;

//layout
var activeBox = null;
var zLevel = 1;

function init()
{
  //set up background boxes
  var banner = document.getElementById("bg_boxes");
  var offset = -10, maxOffset = banner.offsetWidth+10;
  var img;
  while (banner.hasChildNodes())
	  banner.removeChild(banner.firstChild);
  do {
    img = new Image();
    img.src = "images/bg_boxes/bg_boxes_"+Math.floor(Math.random()*4)+".gif";
    img.style.left = offset + "px";
    banner.appendChild(img);
    offset += img.width;
  } while (offset < maxOffset && img.width > 0);   
      
  //initialize position of main boxes
  var box;
  var center = banner.offsetWidth / 2; 
  //film box
  box = document.getElementById("box_film");  
  box.style.left = (center+20) + "px";
  //news box
  box = document.getElementById("box_news");  
  box.style.right = center + "px";
  if (box.offsetLeft < 5) box.style.left = "5px";
  //sidebar
  box = document.getElementById("box_sidebar"); 
  box.style.top = "30px";
  box.style.height = (window.innerHeight - 60) + "px";
  
  //random
  box = document.getElementById("box_random"); 
  box.style.left = (center-box.offsetWidth*.5) + "px";
  box.style.bottom = brushRadius + "px";    
  if (box.offsetTop >= 400)
  {
    box.style.visibility = "visible";
  
    //secret canvas
    screenCanvas = document.getElementById('random_screen');
    screenCanvas.width = box.offsetWidth + 2*brushRadius; 
    screenCanvas.height = box.offsetHeight + 2*brushRadius;  
    screenCanvas.style.left = (box.offsetLeft-brushRadius) + "px";
    screenCanvas.style.bottom = "0";         
    screenCanvas.onmousemove = canvasMousemove;  
    screenCanvas.onmouseout = canvasMouseout;  
    if (screenCanvas.getContext)  
    {
      screenCtx = screenCanvas.getContext('2d');
      screenCtx.fillStyle = backColor; 
      screenCtx.fillRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight);
    } 
  }
  
  //set up flying boxes
  flyingContainer = document.getElementById('flying_container');    
  for (var i in flyingNames)
  {
    box = document.getElementById(flyingNames[i]);
    box.style.left = (flyingContainer.offsetWidth+100) + "px";
    box.style.top = "0";
    box.style.zIndex = zLevel;
    box.style.visibility = "visible";
    box.style.opacity = flyAlpha;   
    box.onmouseover = flyMouseover;
    box.onmouseout = flyMouseout;
    flyingBoxes.push(box);
    flyX.push(0);
    flyY.push(0);
  }  
  ++zLevel;
    
  //set up breathing boxes
  var x, y;
  for (var i in names)
  {
    box = document.getElementById(names[i]);
    x = box.offsetLeft;
    y = box.offsetTop;
    xpos.push(x);
    ypos.push(y);
    basex.push(x);
    basey.push(y);
    box.style.right = "auto";
    box.style.bottom = "auto";
    box.style.visibility = "visible";
    box.style.zIndex = zLevel;
    box.onmouseover = boxMouseover;     
    box.onmouseout = boxMouseout;
    boxes.push(box);
    
    //init pos
    box.style.left = x + "px";
    box.style.top = y + "px";
  }

  setInterval(draw,33);
}

function draw() 
{
  var i, box;
  
  //update velocity
  if (velocity >= velocity_base)
    accel = -accel_base;
  else if (velocity <= -velocity_base)
    accel = accel_base; 
  velocity += accel;
      
  for (i=0; i<boxes.length; ++i)
  {
    xpos[i] += velocity * xspeed[i];
    boxes[i].style.left = Math.floor(xpos[i]) + "px";
    ypos[i] += velocity * yspeed[i] * .5;
    boxes[i].style.top = Math.floor(ypos[i]) + "px";
  }
  
  //flying boxes
  for (i=0; i<flyingBoxes.length; ++i)
  {
    if (i != flyHover)
    {
      box = flyingBoxes[i];
      box.style.left = (box.offsetLeft + flyX[i]) + "px"; 
      box.style.top = (box.offsetTop + flyY[i]) + "px"; 
       
      if (box.offsetTop >= flyingContainer.offsetHeight)
        box.style.top = "-" + box.offsetHeight + "px";
      else if (box.offsetTop <= -box.offsetHeight)
        box.style.top = flyingContainer.offsetHeight;
      if (box.offsetLeft >= flyingContainer.offsetWidth)
      {  
        box.style.left = "-" + (box.offsetWidth+100) + "px";
          
        flyX[i] = 1 + Math.floor(Math.random()*3);
        flyY[i] = 2*Math.floor(Math.random()*2) - 1;
        box.style.top = Math.floor(Math.random()*flyingContainer.offsetHeight);
      }
    }
  }
}

function boxMouseover (e)
{
  if (activeBox != e.currentTarget)
  {
    activeBox = e.currentTarget;
    activeBox.style.zIndex = ++zLevel;
  }
}
function boxMouseout (e)
{
}

function flyMouseover (e)
{
  flyHover = flyingBoxes.indexOf(e.currentTarget);
  e.currentTarget.style.opacity = 1;
}
function flyMouseout (e)
{
  flyHover = -1;
  e.currentTarget.style.opacity = flyAlpha;
}

function canvasMousemove (e)
{
  var x = e.pageX-screenCanvas.offsetLeft;
  var y = e.pageY-screenCanvas.offsetTop;
  
  if (screenCtx)
  {
    screenCtx.globalCompositeOperation = "source-over";
    screenCtx.globalAlpha = 1;
    screenCtx.fillStyle = backColor;
    screenCtx.fillRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight);
    screenCtx.globalCompositeOperation = "destination-out";
    
    grad = screenCtx.createRadialGradient(x,y,0,x,y,brushRadius);
    grad.addColorStop(0, 'rgba(0,0,0,1)');
    grad.addColorStop(1, 'rgba(0,0,0,0)');
    screenCtx.fillStyle = grad; 
    screenCtx.beginPath();
    screenCtx.arc(x,y,brushRadius,0,2*Math.PI,true);
    screenCtx.fill(); 
  }
}
function canvasMouseout (e)
{ 
  if (screenCtx)
  {
    screenCtx.globalCompositeOperation = "source-over";
    screenCtx.fillStyle = backColor;
    screenCtx.fillRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight);   
  }                                                                            
  
}