var debug = '';
var fading = 0;

var images = $('#images');
var pagination = $('#pagination'); 
var shadow = $('#shadow'); 

var PREFER = 24;
var LARGEST = 32;
var Page;

function Unzoom(img) {
  img.className = '';
  $(img.shade).animate({
    opacity: 0,
    left: (img.init.left + 'px'),
    top: (img.init.top + 'px'),
    width: '100px',
    height: '100px'
  }, 500, 'swing');
    
  $(img).animate({
    opacity: 0,
    left: (img.init.left + 'px'),
    top: (img.init.top + 'px'),
    width: '100px',
    height: '100px'
  }, 500, 'swing', function() { $(img.shade).remove(); $(img).remove(); } );
}

function Pan(preview) {
  var width = preview.realWidth, height = preview.realHeight;

  var ww = $(window).width(), wh = $(window).height();
  if (width > (0.9 * ww) || height > (0.9 * wh)) {
    var nh = 0.9 * wh;
    var nw = nh * width / height;
    if (nw > (0.9 * ww)) {
      nw = 0.9 * ww;
      nh = nw * height / width;
    }
    width = parseInt(nw);
    height = parseInt(nh);
  }

  var tx = parseInt((ww - width) / 2);
  var ty = parseInt((wh - height) / 2);
    
  $(preview.shade).animate({ 
    opacity: 1.0, 
    left: (tx - 10) + 'px',
    top: (ty - 10) + 'px',
    width: (width + 30) + 'px',
    height: (height + 30) + 'px'
  }, 700, 'swing');

  $(preview).animate({ 
    opacity: 1.0, 
    left: tx + 'px',
    top: ty + 'px',
    width: width + 'px',
    height: height + 'px'
  }, 700, 'swing');
}

function Zoom(a) {

  // Get the URL
  var id = Ids[a.ident];
  var bucket = id % 10;1
  if (bucket < 10) { bucket = '0' + bucket; }
  var url = 'http://images' + bucket + '.ricmoo.com/preview-' + id + '.jpg';

  // Unzoom all existing previews. If there was only one, and it's the same
  // don't continue to re-zoom it.
  var nozoom = false;
  $(".preview").each(function(idx, e) {
    nozoom = (e.src == url && idx == 0);
    Unzoom(e); 
  });
  if (nozoom) { return; }

  // Build our DOM goodness
  var img = document.createElement('img');
  img.className = "preview";
  img.src = url;

  img.shade = shadow.clone().get(0);
  img.init = $(a.getElementsByTagName('img')[0]).offset();

  $(img).css({
    position: 'absolute', 
    opacity: 0, 
    display: 'none'
  });

  document.body.appendChild(img);
  document.body.appendChild(img.shade);

  img.onload = function() {
    this.realWidth = this.width;
    this.realHeight = this.height;

    $(this).css({
      left: (this.init.left + 'px'),
      top: (this.init.top + 'px'),
      width: '100px',
      height: '100px',
      border: '3px solid white',
      zIndex: 5
    });

    $(this.shade).css({
      opacity: 0.0,
      left: (this.init.left + 'px'),
      top: (this.init.top + 'px'),
      width: '100px',
      height: '100px'
    });

    Pan(this);
  }

  img.onclick = function() { Unzoom(this); };
}

function LoadImages(data, status) {
  //console.log(status, data);
  for (var i = 0; i < data.urls.length; i++) {
    var id = 'p' + (data.offset + i);
    (new Image()).src = Urls[id] = data.urls[i];
    Ids[id] = data.ids[i];
    var el = document.getElementById(id);
    if (el) {
      el.className = "button";
      el.src = data.urls[i]; 
      delete el.id;
    }
  }
  Total = data.total;
  if (Query != data.query) { 
    Query = data.query;
    ShowPage(1);
  }
}


function Search(query, start, end) {

  if (query != Query) { 
    $(".preview").each(function(idx, e) { Unzoom(e); });
    delete Urls;
    Urls = new Array();
  }
  while (start < end && Urls['p' + start]) { start++; }
  while (start < end && Urls['p' + (end - 1)]) { end--; }
  if (start == end) { return; }
      
  $.getJSON('/action.tofu?query=' + escape(query) + '&start=' + start + '&end=' + end, null, LoadImages);
  return false;
}

var lastImages = null;
function ShowPage(page, instant) {
  Page = page;
  
  pagination.empty(); 

  if (Total == 0) {
    if (lastImages) {
      lastImages.fadeOut(1000, function() { $(this).remove(); });
    }
    lastImages = $('<div><br /><br /><b>Sorry. No images found matching <i>"' + Query + '"</i>.</b></div>');
    lastImages.css({ position: 'absolute', display: 'none', top: '0px', left: '0px', paddingLeft: '10px' });
    lastImages.fadeIn(1000);
    images.append(lastImages);
    return;
  }
  
  var pages = Math.ceil(Total / PREFER);
  var spill = Total % PREFER;
  if (pages > 1 && spill > 0 && spill <= (LARGEST - PREFER)) { pages--; }

  var startIdx = PREFER * (page - 1);
  var endIdx = (page == pages) ? Total: (PREFER * page);

  //console.log('Start: ' + startIdx + ' endIdx' + endIdx);
  
  // Start prefetching if we need something
  Search(Query, startIdx, endIdx);

  // Fade out any existing images
  if (lastImages) {
    if (instant) {
      lastImages.remove();
    } else {
      var suicide = lastImages;
      lastImages.fadeOut(1000, function() { suicide.remove(); });
    }
  }

  // Create a new set of images, setting an id on them if they need future loading
  lastImages = document.createElement('div');
  lastImages = $(lastImages);
  lastImages.css({ position: 'absolute', display: ((instant) ? '': 'none'), top: '0px', left: '0px' });
  images.append(lastImages);
  for (var i = startIdx; i < endIdx; i++) {
    var img = document.createElement('img');
    if (Urls['p' + i]) {
      img.src = Urls['p' + i];
      img.className = "button";
    } else {
      img.id = 'p' + i;
      img.src = '/static/blank.gif';
      img.className = "button";
      //img.className = "covert";
    }
    var a = document.createElement('a');
    a.className = "zoomer";
    a.ident = 'p' + i;
    a.onclick = function() { Zoom(this); };
    a.appendChild(img);
    lastImages.append(a);
  }
  if (!instant) { lastImages.fadeIn(1000); }
  
  

  var infos = new Array();

  // Less than 8 pages, show 'em all
  if (pages <= 8) {
    for (var i = 1; i <= pages; i++) { infos.push(i); }
    
  } else {
    var uniq = new Array();
    uniq['1'] = uniq['' + pages] = 1;
    infos.push(1)
    infos.push(pages)
    
    if (page == 5) { 
      uniq['2'] = 1;
      infos.push(2);
    }

    if (page == pages - 4) { 
      uniq['' + (pages - 1)] = 1;
      infos.push(pages - 1);
    }
    
    for (var i = page - 2; i <= page + 2; i++) { 
      if (i < 1 || i > pages || uniq['' + i]) { continue; }
      uniq['' + i] = 1
      infos.push(i); 
    }
    infos = infos.sort(function(a,b) { return a - b; } );
  }

  var span;
  for (var i = 0; i < infos.length; i++) {
    var value = infos[i];
    if (i > 0 && value != infos[i - 1] + 1) {
      span = document.createElement('span');
      span.className = 'nav_ellipsis';
      span.appendChild(document.createTextNode('...'));
      pagination.append(span);      
    }
    span = document.createElement('span');
    if (value == page) {
      span.className = 'pagination_on';
    } else {
      span.className = 'pagination_off';
      span.page = value;
      span.startIdx = PREFER * (value - 1);
      span.endIdx = (value == pages) ? Total: (PREFER * value);
      //PrefetchPage(span.startIdx, span.endIdx);
        
      span.onclick = function(obj) { 
        $(".preview").each(function(idx, e) { Unzoom(e); });
        ShowPage(this.page); 
      }

      span.onmouseover = function(obj) { 
        PrefetchPage(this.startIdx, this.endIdx);
      }

    }
    span.appendChild(document.createTextNode(value));
    pagination.append(span);      
  }

}
 
function PrefetchPage(start, end) {
  Search(Query, start, end);
}

/*
function GetParam(text, key, def) {
  var s = text.indexOf(key);
  if (s >= 0) {
    var us = text.indexOf('_', s);
    return text.substring(s + 1, us);
  }
  return def;
}


var o = null;
var oWhen = null, oWhere = null, oPage = null, oId = null;
function UpdateByFragment() {
  if (o != location.href) {
    o = location.href;
    var fWhen = 'all', fWhere = 'all', fPage = '1', fId = '';
  
    var frag = '';
    var find = location.href.indexOf("#");
    if (find >= 0) {
      var frag = location.href.substring(find + 1);
      
      fWhen = GetParam(frag, 'D', fWhen);
      fWhere = GetParam(frag, 'L', fWhere);
      fPage = GetParam(frag, 'P', fPage);
      fId = GetParam(frag, 'I', fId);
      
      
    }
    //console.log("When: " + fWhen + ", Where: " + fWhere + ", Page: " + fPage + ", Id: " + fId);
  }

  setTimeout("UpdateByFragment()", 150);
}
*/


var MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];

function fit(noshowpage) {
  var oldPrefer = PREFER;
  var firstIdx = (Page - 1) * PREFER;
  var perrow = -1, lastrow = -1;
  $(".button").each(function(idx, e) {
    if (perrow != -1) { return; }
    var offset = $(e).offset().top;
    if (lastrow == -1) { lastrow = offset; return; }
    if (lastrow != offset) { perrow = idx; }
  });
  PREFER = 4 * perrow;
  LARGEST = 5 * perrow;
  if (!noshowpage && oldPrefer != PREFER) { ShowPage(parseInt(firstIdx / PREFER) + 1); }
}

$(window).resize(function() {
  fit(); 
  $(".preview").each(function(idx, e) { Pan(e); });

});

$(document).ready(function() {
  ShowPage(1, true);
  fit(true);
  ShowPage(1, true);
});    

//UpdateByFragment();