/**
 * alocasia: or the 3d Histogram in HTML5 and JavaScript
 * By Joe Turgeon [http://arithmetric.com]
 * Version 2010/05/18
 * Licensed under GPL version 3
 */

var alocasia = function () {
  var exs = ['animals-flamingo', 'vietnam-protest', 'nashville-flooding', 'deepwater-oilspill', 'shanghai-expo', 'eyjafjallajokull-night', 'yushu-earthquake', 'earthday-rainbow', 'sudan', 'eyjafjallajokull', 'spaceshuttle-clouds', 'poland-candles', 'thailand-monks'],
    infoHidden, resizeTimeout, clickTimeout;

  function showInfo() {
    var h = $(window).height(), infoH, infoY;
    infoHidden = false;
    $('#progress').hide();
    $('#menu').show();
    $('#label').hide();
    infoH = $('#info').height();
    infoY = (h - infoH) / 4;
    $('#info').css('top', -(infoH - 20)).animate({'top': infoY}, 250);
    histogram.pause();
  }

  function hideInfo() {
    $('#label').show();
    var infoH = $('#info').height();
    $('#info').animate({'top': -(infoH - 20)}, 500);
    if (histogram && histogram.unpause) {
      histogram.unpause();
    }
    infoHidden = true;
  }

  function toggleInfo() {
    if (infoHidden) {
      showInfo();
      return;
    }
    hideInfo();
  }

  function handleClick(e) {
    if (clickTimeout) {
      window.clearTimeout(clickTimeout);
    }
    if (e && e.target) {
      id = e.target.id;
      if ((id == 'info' || id == 'label') && infoHidden) {
        clickTimeout = window.setTimeout(showInfo, 250);
      }
      else if ((id == 'histogram' || $(e.target).parent('#histogram').length) && !infoHidden) {
        clickTimeout = window.setTimeout(hideInfo, 250);
      }
    }
  }

  function updateProgress(text) {
    if (text) {
      $('#progress').html('<p class="prompt">' + text + '</p>');
    }
    else {
      hideInfo();
    }
  }

  function loadHistogram(url) {
    $('#menu').hide();
    updateProgress('Loading image');
    $('#progress').show();
    histogram.generate('histogram', url, $(window).width(), $(window).height(), updateProgress);
    $('#histogram').click(handleClick);
  }

  function useExample(index) {
    if (exs[index]) {
      loadHistogram('samples/' + exs[index] + '.jpg');
    }
  }

  function handleResize(e) {
    histogram.pause();
    if (resizeTimeout) {
      window.clearTimeout(resizeTimeout);
    }
    resizeTimeout = window.setTimeout(doResize, 500);
  }

  function doResize() {
    var w = $(window).width(), h = $(window).height(), menuX = (w - $('#info').width()) / 2, menuY = (h - $('#info').height()) / 4;
    if (menuX < 0) {
      menuX = 0;
    }
    if (menuY < 0) {
      menuY = 0;
    }
    $('#info').css({'left': menuX, 'top': menuY});
    if (histogram && histogram.resize) {
      histogram.resize(w, h);
    }
  }

  function start() {
    var i, num, thumburl;

    // build menu
    num = exs.length;
    for (i = 0; i < num; i++) {
      thumburl = 'samples/' + exs[i] + '-thumb.jpg';
      $('#menu-examples').append('<a href="" onclick="alocasia.useExample(' + i + ');return false;"><img src="' + thumburl + '" alt="Sample ' + (i + 1) + '" width="48" height="48" /></a> ');
    }
    $('#info').click(handleClick);
    infoHidden = false;

    // set up event handler for entering the URL for an image
    $('#imagebtn').click(function (e) { loadHistogram('proxy.php?url=' + encodeURIComponent($('#imageurl').val())); e.preventDefault(); });
    $('#imageurl').focus(function (e) { this.select(); });

    // handle resize event
    $(window).resize(handleResize);
    $('#info').resize(handleResize);
    doResize();
  }

  return {
    start: start,
    useExample: useExample
  };
}();

$(document).ready(function () {
  alocasia.start();
});