// Copyright 2010 Google Inc. All Rights Reserved.

/**
 * @fileoverview Methods for Korea 100 Things page.
 * @author Zacky Ma (zackyma@google.com)
 */

/**
 * Namesapce gweb.
 */
var gweb = gweb || {};

/**
 * Class for generating interactions on the page.
 * @param {Object} config Configoration.
 * @constructor
 */

gweb.Tips = function(config) {
  this.tips = config.tips;
  this.onNavTipItemTop = config.onNavTipItemTop;
  this.scrollSpeed = config.scrollSpeed;
  this.on = {cat: '', tips: {}};

  gweb.dom.getElement('tips').style.overflow = 'hidden';

  gweb.array.forEach(gweb.dom.query('#nav-cat li a'), function(el) {
    var cat = el.getAttribute('href').split('#cat-')[1];
    el.href = '#cat=' + cat;
    el.parentNode.id = 'tab-cat-' + cat;
    gweb.events.listen(el, 'click', function() {
      this.openCat(cat);
    }, false, this);
  }, this);

  gweb.array.forEach(gweb.dom.query('#nav-tip li a'), function(el) {
    var tip = el.getAttribute('href').split('#tip-')[1];
    el.href = '#tip=' + tip;
    el.parentNode.id = 'tab-tip-' + tip;
    gweb.events.listen(el, 'click', function() {
      this.openTip(this.on.cat, tip);
    }, false, this);
  }, this);

  gweb.array.forEach(gweb.dom.query("input[name='q']"), function(el) {
    if (el.parentNode.action.split('&').length >= 2) {
      var html = '';
      var params = el.parentNode.action.split('?')[1].split('&');
      var action = el.parentNode.action.split('?')[0];
      gweb.array.forEach(params, function(param) {
        if (param.split('=')[0] != 'q') {
          html += '<input type="hidden" name="' + param.split('=')[0] +
              '" value="' + param.split('=')[1] + '">';
        }
      }, this);
      el.parentNode.action = action;
      gweb.dom.query('span', el.parentNode)[0].innerHTML = html;
    }
  }, this);

  if (location.hash) {
    var catMatch = location.hash.match(/cat\=([^&]+)/);
    var tipMatch = location.hash.match(/tip\=([^&]+)/);
    var cat = catMatch && catMatch[1] ? catMatch[1] : '';
    var tip = tipMatch && tipMatch[1] ? tipMatch[1] : '';
    if (tip) {
      this.openTip('all', tip);
    }
    else if (cat) {
      this.openCat(cat);
    } else {
      this.openCat('all');
    }
  } else {
    this.openCat('all');
  }
};

/**
 * Open a category.
 * @param {string} cat ID of the category to open.
 */
gweb.Tips.prototype.openCat = function(cat) {
  if (cat == this.on.cat) {
    return;
  }
  if (!gweb.dom.getElement('tab-cat-' + cat)) {
    cat = 'all';
  }

  // Handle nav-cat item's styles.
  if (this.on.cat) {
    gweb.dom.classes.remove(gweb.dom.getElement('tab-cat-' + this.on.cat),
        'on');
  }
  gweb.dom.classes.add(gweb.dom.getElement('tab-cat-' + cat), 'on');
  this.on.cat = cat;

  // Show tips under the category.
  gweb.array.forEach(gweb.dom.query('#nav-tip li.cat-' + cat), function(el) {
    el.style.display = 'block';
    gweb.dom.classes.remove(el, 'on');
  }, this);
  gweb.array.forEach(gweb.dom.query('#nav-tip li:not(.cat-' + cat + ')'),
      function(el) {
        el.style.display = 'none';
        gweb.dom.classes.remove(el, 'on');
  }, this);

  var tipToOpen = '';
  if (!this.on.tips[cat] && this.tips[cat]) {
    var index = 0;
    tipToOpen = gweb.dom.query('#nav-tip li.cat-' + cat)[index].id.
        split('tab-tip-')[1];
  } else {
    tipToOpen = this.on.tips[cat];
  }
  this.openTip(cat, tipToOpen);
};

/**
 * Open a tip.
 * @param {string} cat ID of category which the tip to open is in.
 * @param {string} tip ID of the tip to open.
 */
gweb.Tips.prototype.openTip = function(cat, tip) {
  if (!gweb.array.contains(this.tips[cat], tip) || this.on.cat != cat) {
    this.openCat(cat);
  }

  // Handle nav-tip item's styles, and pause playing video.
  if (this.on.tips[cat]) {
    gweb.dom.classes.remove(gweb.dom.getElement('tab-tip-' + this.on.tips[cat]),
        'on');
    if (gweb.dom.getElement('player-' + this.on.tips[cat])) {
      var player = gweb.dom.getElement('player-' + this.on.tips[cat]);
      player.pauseVideo();
    }
  }
  gweb.dom.classes.add(gweb.dom.getElement('tab-tip-' + tip), 'on');
  this.on.tips[cat] = tip;

  // Move nav-tip item to center area.
  var navTipEl = gweb.dom.query('ul', gweb.dom.getElement('nav-tip'))[0];
  var navTipConEl = navTipEl.parentNode;
  var navTipItemEl = gweb.dom.getElement('tab-tip-' + tip);
  var newNavTipTop = navTipItemEl.offsetTop - this.onNavTipItemTop;
  if (newNavTipTop > 0 &&
      newNavTipTop < (navTipEl.offsetHeight - navTipConEl.offsetHeight)) {
    var increasement = (newNavTipTop - navTipConEl.scrollTop) / 10;
    function scroll(self) {
      var doScroll = false;
      if (increasement > 0 && navTipConEl.scrollTop < newNavTipTop) {
        doScroll = true;
      }
      else if (increasement < 0 && navTipConEl.scrollTop > newNavTipTop) {
        doScroll = true;
      }
      if (doScroll) {
        navTipConEl.scrollTop = navTipConEl.scrollTop + increasement;
        self.scrollTimout = setTimeout(function() {scroll(self);},
            (self.scrollSpeed / 10));
      } else {
        clearTimeout(self.scrollTimeout);
      }
    }
    // navTipEl.parentNode.scrollTop = newNavTipTop;
    scroll(this);
  } else {
    navTipConEl.scrollTop = newNavTipTop;
  }

  // Move to the tip to open.
  var tipEl = gweb.dom.getElement('tip-' + tip);
  var tipListEl = gweb.dom.getElement('tip-list');
  //gweb.fx.slideY(tipListEl, (0 - tipEl.offsetTop));
  tipListEl.style.top = (0 - tipEl.offsetTop) + 'px';
};