dojo.provide("et");

et = {

  SEGMENT_SIZE: 5,

  canvas : [
    ["52950001","untitled 1"],
    ["52950002","untitled 2"],
    ["52950003","untitled 3"],
    ["52950004","untitled 4"],
    ["52950005","untitled 5"],
    ["52950006","untitled 6"],
    ["52950007","untitled 7"],
    ["52950008","untitled 8"],
    ["52950009","untitled 9"],
    ["52950010","untitled 10"],
    ["52950011","untitled 11"],
    ["52950012","untitled 12"],
    ["52950013","untitled 13"],
    ["52950014","untitled 14"],
    ["52950015","untitled 15"],
    ["52950016","untitled 16"],
    ["52950017","untitled 17"],
    ["52950018","untitled 18"],
    ["52950019","untitled 19"],
    ["52950020","untitled 20"],
    ["52950021","untitled 21"],
    ["52950022","untitled 22"],
    ["52950023","untitled 23"],
    ["52950024","untitled 24"],
    ["52950025","untitled 25"],
    ["52950026","untitled 26"],
    ["52950027","untitled 27"],
    ["52950028","untitled 28"],
    ["52950029","untitled 29"],
    ["52950030","untitled 30"],
    ["52950031","untitled 31"],
    ["52950032","untitled 32"],
    ["52950033","untitled 33"],
    ["52950034","untitled 34"],
    ["52950035","untitled 35"],
    ["52950036","untitled 36"],
    ["52950037","untitled 37"],
    ["52950038","untitled 38"],
    ["52950039","untitled 39"],
    ["52950040","untitled 40"],
    ["52950041","untitled 41"],
    ["52950042","untitled 42"],
    ["52950043","untitled 43"],
    ["52950044","untitled 44"],
    ["52950045","untitled 45"],
    ["52950046","untitled 46"],
    ["52950047","untitled 47"],
    ["52950048","untitled 48"],
    ["52950049","untitled 49"],
    ["52950050","untitled 50"],
    ["52950051","untitled 51"],
    ["52950052","untitled 52"],
    ["52950053","untitled 53"]
  ],

  paper: [
    ["52960001","untitled 1"],
    ["52960002","untitled 2"],
    ["52960003","untitled 3"],
    ["52960004","untitled 4"],
    ["52960005","untitled 5"],
    ["52960006","untitled 6"],
    ["52960007","untitled 7"],
    ["52960008","untitled 8"],
    ["52960009","untitled 9"],
    ["52960010","untitled 10"],
    ["52960011","untitled 11"],
    ["52960012","untitled 12"],
    ["52960013","untitled 13"],
    ["52960014","untitled 14"],
    ["52960015","untitled 15"],
    ["52960016","untitled 16"],
    ["52960017","untitled 17"],
    ["52960018","untitled 18"],
    ["52960019","untitled 19"],
    ["52960020","untitled 20"],
    ["52960021","untitled 21"],
    ["52960022","untitled 22"],
    ["52960023","untitled 23"],
    ["52960024","untitled 24"],
    ["52960025","untitled 25"],
    ["52960026","untitled 26"],
    ["52960027","untitled 27"],
    ["52960028","untitled 28"],
    ["52960029","untitled 29"],
    ["52960030","untitled 30"],
    ["52960031","untitled 31"],
    ["52960032","untitled 32"],
    ["52960033","untitled 33"],
    ["52960034","untitled 34"],
    ["52960035","untitled 35"],
    ["52960036","untitled 36"],
    ["52960037","untitled 37"],
    ["52960038","untitled 38"],
    ["52960039","untitled 39"],
    ["52960040","untitled 40"]
  ]
};

dojo.ready(function() {

  var initMedium = "canvas";
  var initItem = et[initMedium][0][0];
  var initSegment = 0;

  var fragment = document.location.hash.substring(1);
  if (fragment) {
    var parts = fragment.split("_");
    if ({ canvas: true, paper: true}[parts[0]]) {
      initMedium = parts[0];
      initItem = et[initMedium][0][0];
      dojo.forEach(et[initMedium], function(elem, i) {
        if (elem[0] == parts[1]) {
          initItem = parts[1];
          initSegment = Math.floor(i / et.SEGMENT_SIZE);
        }
      });
    }
  }

  var frame = dojo.byId("frame");

  var inFrame;
  var activeItem;
  var activeSegment;
  var segments = {};
  var idToTitle = {};

  var navLeft = dojo.byId("navLeft");
  var navRight = dojo.byId("navRight");

  var navToSegment = function(newSegment) {
    dojo.addClass(activeSegment, "hidden");
    dojo.removeClass(newSegment, "hidden");
    activeSegment = newSegment;
    dojo.toggleClass(navRight, "active", newSegment.nextSibling);
    dojo.toggleClass(navLeft, "active", newSegment.previousSibling);
  };

  var navSegment = function(delta) {
    var newSegment;
    if (delta > 0) {
      newSegment = activeSegment.nextSibling;
    } else {
      newSegment = activeSegment.previousSibling;
    }
    newSegment && navToSegment(newSegment);
  };

  dojo.forEach(["canvas", "paper"], function(medium, i) {
    var segment;
    var container = dojo.create("div", {
      id: medium,
      className: "medium"
    }, "segments");
    segments[medium] = [];

    var clicker = dojo.create("a", {
      href: "#",
      innerHTML: medium,
      className: (medium == initMedium) ? "selected" : ""
    }, "pager");
    dojo.connect(clicker, "onclick", function(event) {
      dojo.stopEvent(event);
      if (!dojo.hasClass(clicker, "selected")) {
        dojo.query("#pager a").removeClass("selected");
        dojo.addClass(clicker, "selected");
        navToSegment(segments[medium][0]);
      }
    });

    var segmentIndex = -1;
    dojo.forEach(et[medium], function(work, j) {
      if (j % et.SEGMENT_SIZE == 0) {
        ++segmentIndex;
        var isActive = (medium == initMedium) && (segmentIndex == initSegment);
        segment = dojo.create("div", {
         className: isActive ? "segment" : "segment hidden"
         }, container);
	isActive && (activeSegment = segment);
        segments[medium].push(segment);
      }
      idToTitle[work[0]] = work[1];
      var item = dojo.create("a", {
        className: "item",
        id: "item_" + work[0],
        href: "#"+ medium + "_" + work[0],
        innerHTML:
          '<img src="img/' + medium + '/thumb/' + work[0] + '.jpg" />' +
          '<span>' + work[1] + '</span>'
      }, segment);
    });
  });

  var selectImage = function(medium, item) {
    var itemId = item.id.substring("item_".length);
    activeItem && dojo.removeClass(activeItem, "selected");
    dojo.addClass(activeItem = item, "selected");
    inFrame && dojo.addClass(inFrame, "offleft");
    setTimeout(function() {
      inFrame && dojo.destroy(inFrame);
      inFrame = dojo.create("div", {
        className: "offright",
        innerHTML:
          '<img src="img/' + medium + '/large/' + itemId + '.jpg" />' +
          '<span>' + idToTitle[itemId] + ' &mdash; <i>' + medium + '</i></span>'
      }, frame);
      setTimeout(function() {dojo.removeClass(inFrame, "offright"); }, 0);
     }, 100);
  };

  dojo.query("#segments").onclick(function(event) {
    var target = event.target;
    while (target && !dojo.hasClass(target, "item")) {
      target = target.parentNode;
    }
    if (!target) {
      return false;
    }
    var item = target;
    while (!dojo.hasClass(target, "medium")) {
      target = target.parentNode;
    }
    var medium = target.id;
    selectImage(medium, item);
    return false;
  });

  dojo.connect(navLeft, "onclick", function(event) {
    dojo.stopEvent(event);
    navSegment(-1);
  });

  dojo.connect(navRight, "onclick", function(event) {
    dojo.stopEvent(event);
    navSegment(1);
  });

  selectImage(initMedium, dojo.byId("item_" + initItem));

});