var images = new Array();
var img_ids = new Array();
var imgs = new Array();
var cur_first = 0;
var loaded = new Array();
var slideshow_going = false;
var show_int = 0;
var decrement_int = 0;
var cur_id = -1;
var increment = true;

function fetch_images()
{
  _.X('http://mschat.net/bing/images.php', function(pData)
    {
      images = _.S(pData, true);
    }, '');
}

function display_image()
{
  var check_again = false;
  for(index in img_ids)
  {
    if(imgs[index].complete && !loaded[index])
      _.G('img_' + index).innerHTML = img_ids[index];
    else if(!loaded[index])
      check_again = true;
  }

  if(check_again)
    setTimeout('display_image();', 100);
}

function display_images(start, end)
{
  var total = 0;
  cur_first = start;
  img_ids = new Array();
  imgs = new Array();
  loaded = new Array();
  for(var i = start; i < (end + 1); i++)
  {
    if(total > 4)
      break;

    if(typeof images[i] != 'undefined')
    {
      img = new Image();
      var id = i;
      img.src = 'http://mschat.net/bing/display.php?date=' + images[i]['archive_date'] + '&small=true';
      img.onload = function() { display_image(); };
      img_ids[total] = '<img src="http://mschat.net/bing/display.php?date=' + images[id]['archive_date'] + '&small=true" alt="" title="' + (images[id]['description'].length > 0 ? images[id]['description'] : images[id]['archive_date']) + '" onclick="full_image(\'' + images[id]['filename'].substring(0, images[id]['filename'].length - 4) + '\', \'' + (images[id]['description'].length > 0 ? images[id]['description'] + ' ' : '') + '(' + images[id]['archive_date'] + ')\', \'' + id + '\');" />';
      imgs[total] = img;
      loaded[total] = false;

      var element = _.G('img_' + total);
      element.innerHTML = '<img src="loading.gif" alt="" title="Loading..." />';
      element.title = 'Loading...';
    }

    total++;
  }
  display_image();
}

function full_image(filename, the_description, img_id)
{
  var element = _.G('big_image');
  element.innerHTML = '<img src="loading.gif" alt="" title="Loading..." /><p class="loading">Loading...</p>';
  _.G('description').style.display = 'none';

  var image_big = new Image();
  image_big.src = 'http://mschat.net/bing/display.php?date=' + filename;
  image_big.onload = function()
  { 
    _.G('big_image').innerHTML = '<img src="http://mschat.net/bing/display.php?date=' + filename + '" width="800px" height="642px" alt="' + the_description + '" title="' + the_description + '" />';
    _.G('description').style.display = 'table-cell';

    // I don't know why... But IE7 won't do this...
    if(navigator.userAgent.indexOf('MSIE 7') == -1)
      _.G('description').innerHTML = the_description;
  };
  if(image_big.complete)
    image_big.onload();

  cur_id = img_id;
}

function next_prev(is_next)
{
  if(is_next && cur_first > 0)
    display_images(--cur_first, cur_first + 4);
  else if(!is_next && cur_first + 5 < images.length)
    display_images(++cur_first, cur_first + 4);
}

function enable_slideshow(element)
{
  if(!slideshow_going)
  {
    element.innerHTML = 'Disable slideshow (<span id="countdown">5</span>)';
    element.title = 'Turn the slideshow off';
    slideshow_going = true;
    show_int = setInterval('slideshow_go();', 5000);
    decrement_int = setInterval('decrement_countdown();', 1000);
    if(cur_id == -1)
      slideshow_go();
  }
  else
  {
    clearInterval(show_int);
    clearInterval(decrement_int);
    element.innerHTML = 'Enable slideshow';
    element.title = 'Turn the slideshow on';
    slideshow_going = false;
  }
}

function decrement_countdown()
{
  if(!slideshow_going || !_.G('countdown'))
  {
    clearInterval(decrement_int);
  }
  else
  {
    var element = _.G('countdown');
    num = parseInt(element.innerHTML);

    if(num - 1 < 1)
      num = 5;
    else
      num--;
    element.innerHTML = num;
  }
}

function slideshow_go()
{
  if(!slideshow_going)
  {
    clearInterval(show_int);
    return false;
  }
  else
  {
    cur_id = parseInt(cur_id);

    if(typeof images[cur_id + 1] == 'undefined')
      cur_id = -1;

    full_image(images[cur_id + 1]['filename'].substring(0, images[cur_id + 1]['filename'].length - 4), (images[cur_id + 1]['description'].length > 0 ? images[cur_id + 1]['description'] + ' ' : '') + '(' + images[cur_id + 1]['archive_date'] + ')', cur_id + 1);
  }
}

function search_for(element)
{
  var search_date = element['year'].value + '-' + element['month'].value + '-' + element['day'].value;
  var found = false;

  for(index in images)
  {
    if(images[index]['archive_date'] == search_date)
    {
      found = true;
      break;
    }
  }

  if(found)
  {
    var display_img = index;

    if(index + 3 > images.length)
      index -= 4;

    display_images(index, index + 4);
    full_image(images[display_img]['filename'].substring(0, images[display_img]['filename'].length - 4), (images[display_img]['description'].length > 0 ? images[display_img]['description'] + ' ' : '') + '(' + images[display_img]['archive_date'] + ')', display_img);
    close_date();
  }
  else
    alert('Sorry, the image for that date does not exist.');

  return false;
}

function enter_date()
{
  if(typeof document.body == 'undefined')
    alert('The page has yet to finish loading. Try again in a bit!');

  close_date();

  var div = document.createElement('div');
  div.id = 'enter_date';

  div.innerHTML = "\
  <form action=\"\" method=\"\" onsubmit=\"return search_for(this);\">\
    <table height=\"70px\" width=\"300px\" style=\"center\" style=\"margin: auto;\" cellspacing=\"0\" cellpadding=\"0\">\
      <tr>\
        <td class=\"center\" style=\"margin: auto;\" valign=\"middle\"><span class=\"center\">Enter in this format: YYYY - MM - DD</span></td>\
      </tr>\
      <tr>\
        <td class=\"center\" style=\"margin: auto;\" valign=\"middle\"><input id=\"year\" name=\"year\" type=\"text\" size=\"4\" value=\"\" /> - <input id=\"month\" name=\"month\" type=\"text\" size=\"2\" value=\"\" /> - <input id=\"day\" name=\"day\" type=\"text\" size=\"2\" value=\"\" /></td>\
      </tr>\
      <tr>\
        <td class=\"center\" style=\"margin: auto;\" valign=\"middle\"><input type=\"submit\" value=\"Submit\" /> <input type=\"button\" value=\"Cancel\" onclick=\"close_date();\" /></td>\
      </tr>\
    </table>\
  </form>";

  document.body.appendChild(div);

  document.forms[0]['year'].value = (new Date).getYear() < 1900 ? (new Date).getYear() + 1900 : (new Date).getYear();
  document.forms[0]['month'].value = ((new Date).getMonth() + 1) > 9 ? ((new Date).getMonth() + 1) : '0' + ((new Date).getMonth() + 1);
  document.forms[0]['day'].value = ((new Date).getDate()) > 9 ? ((new Date).getDate()) : '0' + ((new Date).getDate());
}

function close_date()
{
  if(_.G('enter_date'))
    document.body.removeChild(_.G('enter_date'));
}

fetch_images();
_.R(function()
{
  display_images(0, 4);
  setTimeout('next_prev(false); next_prev(true);', 1000);
});