// -*- js2 -*-
var genr = new function() {
  var opts;

  var THUMB_PADDING = 4;
  var THUMB_WIDTH = 80;
  var thumbOuterWidth = 2*THUMB_PADDING + THUMB_WIDTH;
  var THUMB_HEIGHT = 80;
  var NAV_WH = 30;
  var instanceBrowser;
  var groupBrowser;

  function ThumbBrowser(browserId, thumbIdPrefix, state) {
    var thumbNavL;
    var thumbNavR;
    var divId = "genr_" + browserId;
    var thediv = $("#" + divId);

    thumbNavL = $('<div class="thumbnav" id="thumbnav_left"/>').appendTo("#head");
    thumbNavR = $('<div class="thumbnav" id="thumbnav_right"/>').appendTo("#head");
    var rowdiv = $("#"+divId+" .thumbrow");

    var visibleThumbCount = 0;
    var thumbCount = $("#" + divId + " li").length;
    var self = this;

    this.thumbOffset = function() {
    return -rowdiv.position().left / thumbOuterWidth;
    }

    function updateButtons(animated) {
      var off = self.thumbOffset();
      doUpdateButtons(animated, off);
    }

      function doUpdateButtons(animated, off) {
      var showCount = thediv.width() / thumbOuterWidth;
      var style = 'slow';
      if (off > 0) {
        animated? thumbNavL.fadeIn(style) : thumbNavL.show();
      } else {
	animated? thumbNavL.fadeOut(style) : thumbNavL.hide();
      }
      if (thumbCount - showCount - off  <= 0) {
	animated ? thumbNavR.fadeOut(style) : thumbNavR.hide();
      } else {
	animated ? thumbNavR.fadeIn(style) : thumbNavR.show();

      }
    }

    this.thumbsMovePage = function(pos, relative, animated) {
	var viewWidth = $("#"+divId).outerWidth();
	var viewThumbs = Math.ceil(1.*viewWidth / thumbOuterWidth);
      var newPos;
      if (relative) {
	var scroll = (Math.ceil(viewThumbs/2))*thumbOuterWidth;
	var curPos = parseInt(rowdiv.css("left"));
	newPos = thumbOuterWidth*Math.ceil((curPos + -scroll*pos)/thumbOuterWidth);
	}
      else {
	newPos = -thumbOuterWidth*pos;
      }
	var minPos = -(thumbCount - viewThumbs)*thumbOuterWidth;
	newPos = Math.min(0, Math.max(newPos, minPos));
      var poso = -newPos / thumbOuterWidth;
      var css = {left: newPos};
      if (animated) {
	rowdiv.animate(css,
		       "normal", "swing",
		       function() { updateButtons(animated, poso); });
	} else {
	  rowdiv.css(css);
	  doUpdateButtons(animated, poso);
	}
    }

    function doResize(w) {
      rowdiv.css({width:(thumbCount*thumbOuterWidth)+"px"});
      var navy = thediv.position().top + (THUMB_HEIGHT-NAV_WH)/2;
      thumbNavL.css({left: thediv.position().left-NAV_WH,
		     top: navy});
      thumbNavR.css({left: thediv.position().left+w,
		     top: navy});
      updateButtons();
    }

    this.resizeFixed = function() {
      visibleThumbCount = 4;
	var gw = visibleThumbCount*thumbOuterWidth;
      thediv.css({width: gw+"px"});
      doResize(gw);
    }

    this.resizeFlex = function() {
	var w = $(window).width();
	var gw = 4*thumbOuterWidth;
	var space = thumbOuterWidth+2*NAV_WH;
	var iw = w-gw - space;
      //alert(iw);
      iw = iw - (iw % thumbOuterWidth);
      var miw = thumbCount * thumbOuterWidth;
      iw = miw < iw ? miw : iw;
      visibleThumbCount = iw / thumbOuterWidth;
	var top = thediv.position().top; // ie6 needs it
      thediv.css({width: iw+"px",
			  position: "absolute",
		  top: top + "px",
			  left: (w-iw-NAV_WH)+"px" });
      doResize(iw);
    }

    this.resize = function() {
      if (browserId == 'groups') {
	self.resizeFixed();
      } else {
	self.resizeFlex();
      }
    }

    function getInitialOffset() {
      var fo = state[browserId+"_offset"];
      var so = rowdiv.find("a").index(rowdiv.find("a.selected"));
      var ret = fo;
      if (so < fo || so >= fo + visibleThumbCount) {
	ret = so;
      }
      return ret;
    }

    this.init = function(sel) {
      self.resize();
      self.thumbsMovePage(getInitialOffset(), false, false);
      rowdiv.show();
    }

    thumbNavL.click(function() { self.thumbsMovePage(-1, true, true); });
    thumbNavR.click(function() { self.thumbsMovePage(1, true, true); });
  }

  function thumbStateFragment() {
    var goff = groupBrowser.thumbOffset();
    var ioff = instanceBrowser.thumbOffset();
    return goff+","+ioff;
  }

  function selectIPhone(gid) {
      var img = $("#iphone_screenshot img");
	var src = img.attr('src');
      var src = src.substring(0,src.lastIndexOf("iphone/")+7);
      src = src + gid + '.png';
      img.attr('src',src);
    activateGenerator(gid);
    }

  function activateGenerator(gid) {
    var rowdiv = $("#genr_instances");
    rowdiv.find("a.selected").removeClass("selected");
    $("#genr_thumb_"+gid).addClass("selected");
    $("#sel_generator").attr('value', gid);
  }

  function selectPartyPrinter(gid) {
    $("#pprint_module").attr('value', gid);
    var title = $("#sel_generator option[value='"+gid+"']").text();
    $("#genr_title").text(title);
    activateGenerator(gid);
  }


  this.selectGenerator = function(gid) {
    var url = document.location.href;
    url = (url.split('#')[0]) + '#' + gid;
    var sel;
    if (opts.group == 'logo') {
	sel = $("#fid_logo");
    } else if (opts.group == 'cardgame'
		 || opts.group == 'money') {
      $("#id_photo_left").val("");
      $("#id_photo_top").val("");
      $("#id_photo_width").val("");
	sel = $("form#imagegen select[name='tpl']");
    }
    else if (opts.group == 'iphone') {
      selectIPhone(gid);
      return false;
    }
    else if (opts.group == 'partyprinter') {
      selectPartyPrinter(gid);
      return false;
    }
    sel.val(gid);
    var frm = sel.parents('form')[0];
    var action = $(frm).attr('action');
    var frg = thumbStateFragment();
    $(frm).attr('action', action+'#'+frg);
    frm.submit();
  }

  this.selectGroup = function(gid) {
    document.location.href= opts.group_urls[gid] + '#' + thumbStateFragment();
  }

  function decodeState() {
    var goff = 0;
    var ioff = 0;
    var url = document.location.href;
    var i = url.indexOf('#');
    if (i > 0) {
      var s = url.substring(i+1);
      var parts = s.split(",");
      if (parts.length == 2) {
        var g = parseInt(parts[0]);
	var i = parseInt(parts[1]);
	if (g >= 0) {
	  goff = g;
	}
	if (i >= 0) {
	  ioff = i;
	}
      }
    }
    var st = { groups_offset: goff,
	       instances_offset: ioff };
    return st;

  }

  this.init = function(o) {
    var st = decodeState();
    instanceBrowser = new ThumbBrowser("instances", "genr_thumb_", st);
    groupBrowser = new ThumbBrowser("groups", "genrg_thumb_", st);
    opts = o;
    $(window).resize(function() {
      instanceBrowser.resize();
      groupBrowser.resize();
    });
    instanceBrowser.init(o.generator);
    groupBrowser.init(o.group);

    $("#sel_group").change(function() {
			     genr.selectGroup($(this).attr('value'));
			   });
    $("#sel_generator").change(function() {
				 genr.selectGenerator($(this).attr('value'));
			       });
    $("#genr_groups ul li a").click(function() {
					 var gid = ($(this).attr('id')).replace("genrg_thumb_","");
				      genr.selectGroup(gid);
				      return false;

				    });
    $("#genr_instances ul li a").click(function() {
					 var gid = ($(this).attr('id')).replace("genr_thumb_","");
					 genr.selectGenerator(gid);
					 return false;
					 });
  }

};