// Copyright 2009 Google Inc.  All Rights Reserved.

/**
 * @fileoverview Module to control a behavior on the landing page
 * with earth api and other media (images, videos, etc).
 * @author Michal Drewniak
 */

/**
 * Create earth namespace.
 */
var earth = earth || {};

/**
 * Landing page class. Initializes events on the page.
 * @constructor
 */
earth.LandingPage = function() {
  var thumbs =
      document.getElementById('landing-thumbs').getElementsByTagName('img');
  var descr =
      document.getElementById('landing-descriptions').getElementsByTagName('span');

  for (var i = 0, size = thumbs.length; i < size; i++) {
    thumbs[i].onclick = function() {
      showMedia_(this.id);
    };
    thumbs[i].onmouseover = function() {
      toggleThumbStyle_(this, 'over');
    };
    thumbs[i].onmouseout = function() {
      toggleThumbStyle_(this, 'out');
    }
  }

  /**
   * Shows one of the media items and hides the rest.
   * @param {string} id Media string identifier.
   * @private
   */
  function showMedia_(id) {
    if (earth.earthapi) {
      earth.earthapi.showMedia(id);
    } else {
      var mediaContainer = document.getElementById('landing-media')
      var media = mediaContainer.getElementsByTagName('div');

      for (var i = 0, s = media.length; i < s; i++) {
        media[i].className = 'hidden';
      }
      media[id].className = '';
      mediaContainer.className = '';
    }

    for (var i = 0, size = descr.length; i < size; i++) {
      descr[i].className = 'hidden';
      thumbs[i].className = 'landing-thumb';
      if (i == id) {
        descr[i].className = '';
        thumbs[i].className = 'landing-thumb-selected';
      }
    }
  }

  /**
   * Changes the style of the thumbnail.
   * @param {Element} thumb Thumbnail whos style we modify.
   * @param {string} flag Flag indicating which style should be applied.
   *     over - mouse over, out - mouse out.
   * @private
   */
  function toggleThumbStyle_(thumb, flag) {
    if (flag == 'over' && thumb.className != 'landing-thumb-selected') {
      thumb.className = 'landing-thumb-over';
    } else if (thumb.className == 'landing-thumb-over') {
      thumb.className = 'landing-thumb';
    }
  }

};

/**
 * Hides all media.
 */
earth.LandingPage.prototype.hideMedia = function() {
  var mediaDiv = document.getElementById('landing-media');
  if (mediaDiv) {
    mediaDiv.className = 'hidden';
  }
};