function updatePhotoInfo(scrolling) {
    var control = document.getElementById('info');
    var photo_thumbs = document.getElementById('thumbs');

    thumbs[item_old].className = '';      
    thumbs[item].className = 'act';      
    if (photo_thumbs && scrolling!=false)
      photo_thumbs.scrollLeft = item*screen_item;
    
    if (control) 
      control.innerHTML = (item+1)+' / '+thumbs.length;
      
}

function showScreenshot(idx, img_src) {
  var photo_desc = document.getElementById('photo_desc');
  var desc       = thumbs[idx].getElementsByTagName('p')[0].innerHTML; 
  
  if (desc && photo_desc)
    photo_desc.innerHTML = desc;

  if (box_photo) { 
    loading    = true;
    timer      = setTimeout("hidePhoto()", 50);      
    photo.src = '../../data/img/'+img_src.trim();
  }
  item_old = item;
  item     = idx;
  updatePhotoInfo(false);
}

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g,"");
}

function getImgName(html) { 
  var idx_begin = 0; 
  var idx_end   = 0;
  var img_name  = '';
  
  html      = html.toLowerCase();
  idx_begin = html.indexOf('showscreenshot');
  
  if (idx_begin != -1) {
    html   = html.substring(idx_begin, html.length);
    idx_begin = html.indexOf('\'');
    if (idx_begin != -1)
      idx_end = html.indexOf('\'', idx_begin+1);
      if (idx_end == -1)
        idx_end = html.length-1;
      
    img_name = (html.substring(idx_begin+1, idx_end)).trim();   
  }
  
  return img_name;
}

function MoveThumb(idx) {
  var li          = thumbs[idx]; 
  var img_desc    = li.getElementsByTagName('p')[0].innerHTML;
  var img_name    = getImgName(li.innerHTML);
  var photo_desc  = '';

  if (img_name != '') {
    photo_desc = document.getElementById('photo_desc');
    
    if (photo_desc)
      photo_desc.innerHTML = img_desc;
  
    if (photo)
      photo.src = '../../data/img/'+img_name;
    updatePhotoInfo();
  }
}

function showPhoto(obj) {
  loading = false; 
  if (obj) {
    obj.style.visibility  = 'visible';
    clearTimeout(timer);
  }
}

function hidePhoto() {
  var date = new Date();
  var curr = new Date;
  
  if (photo && loading!=false)
    photo.style.visibility  = 'hidden';
}

function NextThumb() {
  var date = new Date();
    
  if (thumbs.length > item+1) { 
    loading  = true;
    timer    = setTimeout("hidePhoto()", 500);      
    item_old = item;
    MoveThumb(++item);     
  }
}

function PrevThumb() {
  if (0 < item) {
    loading  = true;
    timer    = setTimeout("hidePhoto()", 50);      
    item_old = item;
    MoveThumb(--item);     
  }
}

function setViewer(name) {
  var img_name = '';
  
  for (var i=0; i<thumbs.length; i++) {
    img_name = getImgName(thumbs[i].innerHTML);
    if (name == img_name.substring(0, img_name.lastIndexOf('.'))) {
      var photo_desc = document.getElementById('photo_desc');
      var img_desc   = thumbs[i].getElementsByTagName('p')[0].innerHTML; 
      
      if (photo_desc)
        photo_desc.innerHTML = img_desc;
    
      if (box_photo)
        if (photo)
          photo.src = '../../data/img/'+img_name;
        else
          box_photo.innerHTML = '<img src="../../data/img/'+img_name+'" onload="showPhoto();" alt="NaviGate" />'; 
      
      item_old = item;
      item     = i;
        
      updatePhotoInfo();
      break;
    }
  }
}

var item                  = 0; 
var item_old              = 0;
var screen_item           = 0;
var thumbs                = null;
var box_photo             = null;
var photo                 = null;
var loading               = false;
var timer                 = null;

function init() {
  var idx_dot           = 0;
  var thumbs_box        = document.getElementById('thumbs');
  var screenshot_box    = document.getElementById('screenshot');
  var screen_width_real = thumbs_box.getElementsByTagName('ul')[0].offsetWidth;
  var screen_width      = thumbs_box.offsetWidth;

  box_photo             = document.getElementById('photo');
  photo                 = box_photo.getElementsByTagName('img')[0];
  thumbs                = screenshot_box.getElementsByTagName('li'); 
  screen_item           = (screen_width_real-screen_width) / (thumbs.length-1);
  
  if (screenshot_box) {
    if (ScreenID!='') {
      idx_dot = ScreenID.lastIndexOf('.');
      if (idx_dot != -1)
        setViewer(ScreenID.substring(0, idx_dot));
      else
        setViewer(ScreenID);
    }
    else
    {
      if(thumbs.length>0) 
      {
        img_name = getImgName(thumbs[0].innerHTML);
        setViewer(img_name.substring(0, img_name.lastIndexOf('.')));
      }
    }    
  }
}

window.onload = init;