YAHOO.namespace("myexample.container");

  var mainContent;
  var mainContentXYCoord;
  var mainContentX;
  var mainContentY;

  var blocks = new Array();
  var blockTexts = new Array("WiFi", "GPS", "Ethernet", "RAM", "Noise Supression", "Power Metering",
                              "Low Power WiFi","Discrete Power","HD Audio","MCUs","Security","Signal Conditioning",
                              "Integrated CPU's", "Displays", "10/40/100G Connectivity");
  var topBlockRow;
  var bottomBlockRow;
  var blockFirstColumn;

  var location_1;
  var location_2;
  var location_3;
  var location_4;
  var location_5;
  var location_6;

  var location_7;
  var location_8;
  var location_9;
  var location_10;
  var location_11;
  var location_12;

  var timer;
  var reloadTimer;

var windowResizeBlocks = function(e)
{
  // alert("Window Resized!");

  // window.location.replace('http://127.0.0.1/315/')
  // setBlockAttributes();
  // setBlockLocations();

  // clearTimeout(timer);

  //YAHOO.util.Event.onDOMReady(reloadOnResize);

  reloadTimer = setTimeout(reloadOnResize,500);


  // timer1Callback()
  /*
  setBlockAttributes();
  initBlank();
  setBlockLocations();
  initBlockOverlays();
  clearTimeout(timer);
  renderImageBlocks();
  timer1Callback();
  */

}

// Subscribe to the resize event for the window
YAHOO.util.Event.addListener(window, "resize", windowResizeBlocks);

function reloadOnResize()
{
  clearTimeout(timer);
  setBlockAttributes();
  initBlank();
  setBlockLocations();
  initBlockOverlays();

  renderImageBlocks();
  clearTimeout(reloadTimer);
  timer1Callback();
}

function setBlockAttributes()
{


  mainContent = YAHOO.util.Dom.get('main_content');
  mainContentXYCoord = YAHOO.util.Dom.getXY('main_content');
  mainContentX = mainContentXYCoord[0]
  mainContentY = mainContentXYCoord[1]

  /* alert( '(blocks.js) setBlockAttributes = ' + mainContentXYCoord +
          ' mainContentX = ' + mainContentX + ' mainContentY = ' + mainContentY );
  */

  topBlockRow = mainContentY + 165
  bottomBlockRow = mainContentY + 265
  blockFirstColumn = mainContentX + 0


  YAHOO.myexample.container.blankoverlay = new YAHOO.widget.Overlay("blankoverlay",
                                      { xy:[blockFirstColumn + 0, mainContentY + 165],
																			  visible:true,
																			  width:"522px",
                                        height:"200px",
																			  zIndex:99,
																			  effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
																					  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );

}

function setupBlocks()
{

  setBlockAttributes();
  initBlank();
  setBlockLocations();
  initBlockOverlays();
  timer1Callback();
}

  /* ****************** Render the Overlay containing the blank table ************** */
  function initBlank()
  {
    YAHOO.myexample.container.blankoverlay.render();
    // timer1Callback();
  }

  /* ****************** Slide in the blank table when DOM is Ready ****************** */
  // YAHOO.util.Event.onDOMReady(initBlank);

  // A function that handles the window resize event
  /*
  var windowResize = function(e)
  {
    // alert("Window Resized!");

    window.location.replace('http://127.0.0.1/315/')
  }

// Subscribe to the resize event for the window
YAHOO.util.Event.addListener(window, "resize", windowResize);
  */

  /* ********** Create the 12 Block Locations ******** */
  function BlockLocation(x, y)
  {
    this.x = x;
    this.y = y;
    this.width = "87px";
    this.height = "100px";
    // this.height = "100px";
    this.setCurrentImage = setCurrentImage;
  }

  function setCurrentImage( image )
  {
    this.currentImage = image;
  }

  function setBlockLocations()
  {
    /* ********* BlockLocation(x (from left), y (down from top), with initial images ) ****** */
    location_1 = new BlockLocation(blockFirstColumn + 0, topBlockRow);
    location_2 = new BlockLocation(blockFirstColumn + 87, topBlockRow);
    location_3 = new BlockLocation(blockFirstColumn + 174, topBlockRow);
    location_4 = new BlockLocation(blockFirstColumn + 261, topBlockRow);
    location_5 = new BlockLocation(blockFirstColumn + 348, topBlockRow);
    location_6 = new BlockLocation(blockFirstColumn + 435, topBlockRow);

    location_7 = new BlockLocation(blockFirstColumn + 0, bottomBlockRow);
    location_8 = new BlockLocation(blockFirstColumn + 87, bottomBlockRow);
    location_9 = new BlockLocation(blockFirstColumn + 174, bottomBlockRow);
    location_10 = new BlockLocation(blockFirstColumn + 261, bottomBlockRow);
    location_11 = new BlockLocation(blockFirstColumn + 348, bottomBlockRow);
    location_12 = new BlockLocation(blockFirstColumn + 435, bottomBlockRow);
  }

  function initBlockOverlays()
  {
    /* ********** Create Image Blocks (photographs, x and y are initial locations) ******** */
    YAHOO.myexample.container.block_bluewoman = new YAHOO.widget.Overlay("block_bluewoman",
                                        { xy:[location_1.x, location_1.y],
                                          visible:true,
                                          width:location_1.width,
                                          height:location_1.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_1.setCurrentImage( YAHOO.myexample.container.block_bluewoman );

    YAHOO.myexample.container.block_circuitboard = new YAHOO.widget.Overlay("block_circuitboard",
                                        { xy:[location_2.x, location_2.y],
                                          visible:true,
                                          width:location_2.width,
                                          height:location_2.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_2.setCurrentImage( YAHOO.myexample.container.block_circuitboard );

    YAHOO.myexample.container.block_grid = new YAHOO.widget.Overlay("block_grid",
                                        { xy:[location_3.x, location_3.y],
                                          visible:true,
                                          width:location_3.width,
                                          height:location_3.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_3.setCurrentImage( YAHOO.myexample.container.block_grid );

    YAHOO.myexample.container.block_handshake_globe = new YAHOO.widget.Overlay("block_handshake_globe",
                                        { xy:[location_4.x, location_4.y],
                                          visible:true,
                                          width:location_4.width,
                                          height:location_4.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_4.setCurrentImage( YAHOO.myexample.container.block_handshake_globe );

    YAHOO.myexample.container.block_cellphone1 = new YAHOO.widget.Overlay("block_cellphone1",
                                        { xy:[location_5.x, location_5.y],
                                          visible:true,
                                          width:location_5.width,
                                          height:location_5.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_5.setCurrentImage( YAHOO.myexample.container.block_cellphone1 );

    YAHOO.myexample.container.block_desktop1 = new YAHOO.widget.Overlay("block_desktop1",
                                        { xy:[location_6.x, location_6.y],
                                          visible:true,
                                          width:location_6.width,
                                          height:location_6.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_6.setCurrentImage( YAHOO.myexample.container.block_desktop1 );

    YAHOO.myexample.container.block_handshake1 = new YAHOO.widget.Overlay("block_handshake1",
                                        { xy:[location_7.x, location_7.y],
                                          visible:true,
                                          width:location_7.width,
                                          height:location_7.height,
                                          zIndex:101,
                                          effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5} } );
    location_7.setCurrentImage( YAHOO.myexample.container.block_handshake1 );


    /* Fill the rest of the blocks with default image overlays */
    location_8.setCurrentImage( YAHOO.myexample.container.block_desktop1 );
    location_9.setCurrentImage( YAHOO.myexample.container.block_cellphone1 );
    location_10.setCurrentImage( YAHOO.myexample.container.block_handshake_globe );
    location_11.setCurrentImage( YAHOO.myexample.container.block_grid );
    location_12.setCurrentImage( YAHOO.myexample.container.block_bluewoman );
  }

  /* ********** Move image from current location to new location ) ******** */
  function renderImageBlocks()
  {
    YAHOO.myexample.container.block_bluewoman.render();
    YAHOO.myexample.container.block_circuitboard.render();
    YAHOO.myexample.container.block_handshake_globe.render();
    YAHOO.myexample.container.block_grid.render();
    YAHOO.myexample.container.block_cellphone1.render();
    YAHOO.myexample.container.block_desktop1.render();
  }

  /* ********** Move image from current location to new location ) ******** */
  function moveBlock( blockName, newLocation )
  {
    // blockName.hide();
    blockName.cfg.setProperty("xy", [newLocation.x, newLocation.y]);
    // newLocation.currentImage.hide();
    // newLocation.setCurrentImage(blockName);
    // blockName.show();
  }

  /* We are going to create 4 block color combinations: (1) background: blockLightBlue
                                                            foreground: blockOffWhite
                                                        (2) background: blockOffWhite
                                                            foreground: blockSeaBlue
                                                        (3) background: blockOrangeBrown
                                                            foreground: blockGray
                                                        (4) background: blockLightGray
                                                            foreground: blockDarkViolet

    To avoid having same color blocks stacked on top of each other, only going to use block
    (4) twice.
  */
  var blockWhite = 'FFFFFF';
  var blockBlack = '000000';
  var blockLightBlue = '#91BCDC';
  var blockOffWhite = '#F3EDDA';
  var blockOffWhite2 = '#EFF8FC';
  var blockSeaBlue = '#0DBCD0';
  var blockOrangeBrown = '#EC8744';
  var blockOffBlack = '#2E2B27';
  var blockDarkViolet = '#2F083D';
  var blockLightGray = '#9FA9BA';

  /* ********** Create Animation Blocks (text with background colors) ******** */

  blocks[1] = document.getElementById('block1');
  var animBlock1 = createAnimBlock(blocks[1], blockOffWhite2, blockOffWhite, blockWhite, blockSeaBlue,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[2] = document.getElementById('block2');
  var animBlock2 = createAnimBlock(blocks[2], blockOffWhite2, blockLightBlue, blockWhite, blockOffWhite,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[3] = document.getElementById('block3');
  var animBlock3 = createAnimBlock(blocks[3], blockOffWhite2, blockOrangeBrown, blockWhite, blockOffBlack,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[4] = document.getElementById('block4');
  var animBlock4 = createAnimBlock(blocks[4], blockOffWhite2, blockOffWhite, blockWhite, blockSeaBlue,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[5] = document.getElementById('block5');
  var animBlock5 = createAnimBlock(blocks[5], blockOffWhite2, blockLightBlue, blockWhite, blockOffWhite,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[6] = document.getElementById('block6');
  var animBlock6 = createAnimBlock(blocks[6], blockOffWhite2, blockLightGray, blockWhite, blockDarkViolet,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[7] = document.getElementById('block7');
  var animBlock7 = createAnimBlock(blocks[7], blockOffWhite2, blockLightGray, blockWhite, blockDarkViolet,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[8] = document.getElementById('block8');
  var animBlock8 = createAnimBlock(blocks[8], blockOffWhite2, blockOffWhite, blockWhite, blockSeaBlue,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[9] = document.getElementById('block9');
  var animBlock9 = createAnimBlock(blocks[9], blockOffWhite2, blockLightBlue, blockWhite, blockOffWhite,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[10] = document.getElementById('block10');
  var animBlock10 = createAnimBlock(blocks[10], blockOffWhite2, blockOrangeBrown, blockWhite, blockOffBlack,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[11] = document.getElementById('block11');
  var animBlock11 = createAnimBlock(blocks[11], blockOffWhite2, blockOffWhite, blockWhite, blockSeaBlue,
                                      2, YAHOO.util.Easing.easeIn);

  blocks[12] = document.getElementById('block12');
  var animBlock12 = createAnimBlock(blocks[12], blockOffWhite2, blockLightBlue, blockWhite, blockOffWhite,
                                      2, YAHOO.util.Easing.easeIn);

  /* ************************* function: createAnimBlock ************************ */
  function createAnimBlock( blockIdName, backgroundColorFrom, backgroundColorTo,
                        colorFrom, colorTo, timeSpan, easing )
  {
    var blockAttributes = {
        color: { from: colorFrom, to: colorTo },
        backgroundColor: { from: backgroundColorFrom, to: backgroundColorTo }
    }

    var animBlock = new YAHOO.util.ColorAnim(blockIdName, blockAttributes);
    animBlock.duration = timeSpan;
    animBlock.method = easing;

    return animBlock;
  }

  /* ************************* function: assignBlockText ************************ */
  function assignBlockText()
  {
    //return a random integer between 0 and 14
    var textIndex = Math.floor(Math.random() * 15);

    for( var i = 1; i <= 12; i++)
    {

      blocks[i].innerHTML = blockTexts[textIndex];
      if( textIndex < 14 )
        textIndex++;
      else
        textIndex = 0;
    }
  }


  /* ************************* function: animateAllBlocks() ************************ */
  function animateAllBlocks()
  {
    assignBlockText();
    animBlock1.animate();
    animBlock2.animate();
    animBlock3.animate();
    animBlock4.animate();
    animBlock5.animate();
    animBlock6.animate();
    animBlock7.animate();
    animBlock8.animate();
    animBlock9.animate();
    animBlock10.animate();
    animBlock11.animate();
    animBlock12.animate();
  }

  /* ************************* function: animateEvenBlocks()************************ */
  function animateEvenBlocks()
  {
    assignBlockText();
    animBlock2.animate();
    animBlock4.animate();
    animBlock6.animate();
    animBlock8.animate();
    animBlock10.animate();
    animBlock12.animate();
  }

  /* ************************* function: animateOddBlocks() ************************ */
  function animateOddBlocks()
  {
    assignBlockText();
    animBlock1.animate();
    animBlock3.animate();
    animBlock5.animate();
    animBlock7.animate();
    animBlock9.animate();
    animBlock11.animate();
  }

  /* ************************* function: animateDiagonalBlocks() ************************ */
  function animateDiagonal_1_Blocks()
  {
    assignBlockText();
    animBlock1.animate();
    animBlock8.animate();
    animBlock3.animate();
    animBlock10.animate();
    animBlock5.animate();
    animBlock12.animate();
  }

  /* ************************* function: animateDiagonalBlocks() ************************ */
  function animateDiagonal_2_Blocks()
  {
    assignBlockText();
    animBlock7.animate();
    animBlock2.animate();
    animBlock9.animate();
    animBlock4.animate();
    animBlock11.animate();
    animBlock6.animate();
  }

  /* ************************* function: animateDiagonalBlocks() ************************ */
  function animateIteration4_Blocks()
  {
    assignBlockText();
    animBlock2.animate();
    animBlock9.animate();
    animBlock4.animate();
    animBlock11.animate();
  }

  /* ************************* function: animateDiagonalBlocks() ************************ */
  function animateIteration6_Blocks()
  {
    assignBlockText();
    animBlock1.animate();
    animBlock8.animate();
    animBlock5.animate();
    animBlock12.animate();
  }

  /* ************************* Create Timer ************************ */
  var firstTimeTimer1 = true;
  var timerIteration = 1;

  function timer1Callback()
  {
    if( firstTimeTimer1 )
    {
      renderImageBlocks();

      firstTimeTimer1 = false;
    }
      /* I'll keep this in case need more testing with blocks static. Comment out everything below this for that. */
      /*
      animateOddBlocks();

      moveBlock( YAHOO.myexample.container.block_bluewoman, location_2 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_4 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_6 );
      moveBlock( YAHOO.myexample.container.block_grid, location_8 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_10 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_12 );
      */

    if( timerIteration == 1 )
    {
      animateOddBlocks();

      moveBlock( YAHOO.myexample.container.block_bluewoman, location_2 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_4 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_6 );
      moveBlock( YAHOO.myexample.container.block_grid, location_8 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_10 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_12 );

      // block2.innerHTML = "&nbsp;New Text";

      timerIteration++;
    }
    else if( timerIteration == 2 )
    {
      animateEvenBlocks();

      moveBlock( YAHOO.myexample.container.block_bluewoman, location_1 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_3 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_5 );
      moveBlock( YAHOO.myexample.container.block_grid, location_7 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_9 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_11 );

      timerIteration++;
    }
    else if( timerIteration == 3 )
    {
      animateDiagonal_1_Blocks();

      moveBlock( YAHOO.myexample.container.block_bluewoman, location_7 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_2 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_9 );
      moveBlock( YAHOO.myexample.container.block_grid, location_4 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_11 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_6 );

      timerIteration++;
    }
    else if( timerIteration == 4 )
    {

      moveBlock( YAHOO.myexample.container.block_circuitboard, location_3 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_10 );
      moveBlock( YAHOO.myexample.container.block_grid, location_5 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_12 );

      animateIteration4_Blocks();

      timerIteration++;
    }
    else if( timerIteration == 5 )
    {
      animateDiagonal_2_Blocks();

      moveBlock( YAHOO.myexample.container.block_bluewoman, location_1 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_8 );
      moveBlock( YAHOO.myexample.container.block_desktop1, location_3 );
      moveBlock( YAHOO.myexample.container.block_grid, location_10 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_5 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_12 );

      timerIteration++;
    }
    else // iteration 6
    {
      moveBlock( YAHOO.myexample.container.block_bluewoman, location_2 );
      moveBlock( YAHOO.myexample.container.block_circuitboard, location_7 );
      moveBlock( YAHOO.myexample.container.block_handshake_globe, location_6 );
      moveBlock( YAHOO.myexample.container.block_cellphone1, location_11 );

      animateIteration6_Blocks();


      timerIteration = 1;
    }

    timer = setTimeout("timer1Callback()", 4000);


  }


  function timerSetup()
  {
    timer = setTimeout("timer1Callback()", 4000);
  }

  // timerSetup();
  // timer1Callback();
  // YAHOO.util.Event.onDOMReady(initBlank);
  // YAHOO.util.Event.onDOMReady(setupBlocks);
  YAHOO.util.Event.onDOMReady(windowResizeBlocks);
  // YAHOO.util.Event.onDOMReady(reloadOnResize);