$( function() {

  $.clientCoords = function() {
       var dimensions = {width: 0, height: 0};
       if (window.innerWidth && window.innerHeight) {
           dimensions.width = window.innerWidth;
           dimensions.height = window.innerHeight;
       } else if (document.documentElement) {
           dimensions.width = document.documentElement.offsetWidth;
           dimensions.height = document.documentElement.offsetHeight;
       }
       return dimensions;
  };
  
  $('div.filmbox').bind('click', function(e) {
    window.location = $(this).children('a:first').attr('href');
  })
  
  $('#thumbnails > img').css({'cursor': 'pointer'});
  
  $('#thumbnails > img').click( function () {
    
    $('#overlay,#overlay > .background').css({
      height: ($.clientCoords().height > $('body').height())? $.clientCoords().height : $('body').height()+36, 
      width: '100%'
    });
    $('#overlay > .close').css({
      top: ($.clientCoords().height-600)/2+$('body').scrollTop(),
      left: ($.clientCoords().width-860)/2+860
    });
    $('#overlay > .next').css({
      top: ($.clientCoords().height-600)/2+$('body').scrollTop()+560,
      left: ($.clientCoords().width-860)/2+860
    });
    $('#overlay > .previous').css({
      top: ($.clientCoords().height-600)/2+$('body').scrollTop()+560,
      left: ($.clientCoords().width-860)/2-40
    });
    $('#overlay > .background').fadeTo(0, 0.9);
    $('#overlay').fadeIn(300);
    var src = $(this).attr('src');
    src = src.replace('150x78', '860x1300');
    var cl = $(this).attr('class').replace('thumb_', 'full_');
    imageLoader(src, $(this).attr('alt'), 'overlay_image', cl);
    offset = $('body').scrollTop();
    
  });
  
  $('.slideshow').everyTime(5000, function () {
    var elem = $(this).children(':first');
    var new_elem = getNextImage(elem.attr('class'));
    elem.fadeOut(500, function () {
      $(this).remove();
      imageLoader(
          new_elem.attr('src').replace('150x78', '640x800'), 
          new_elem.attr('alt'), 
          'slideshow',
          new_elem.attr('class').replace('thumb_', 'slide_'));
    });
  }, 0);
  
  $('#overlay > .background').click( function () {
    $('#overlay').fadeOut(300);
  });
  //console.log($('window').clientHeight);
  $('#overlay > .close').click( function () {
    $('#overlay').fadeOut(300);

    return false;
  });
  if ($('#thumbnails > img').length < 2)
  {
    $('#overlay > .next,#overlay > .previous').fadeTo(0, 0.2).css({'cursor': 'default'});
    $('#overlay > .next,#overlay > .previous').click( function () {
      return false;
    });
  } else {

    $('#overlay > .next').click( function () {
      var new_elem = getNextImage($('#overlay_image > img').attr('class'));
      $('#overlay_image > img').fadeOut(500, function () {
        imageLoader(
          new_elem.attr('src').replace('150x78', '860x1300'), 
          new_elem.attr('alt'), 
          'overlay_image',
          new_elem.attr('class').replace('thumb_', 'full_')
          );
      });
      return false;
    });

    $('#overlay > .previous').click( function () {
      var new_elem = getPrevImage($('#overlay_image > img').attr('class'));
      $('#overlay_image > img').fadeOut(500, function () {
        imageLoader(
          new_elem.attr('src').replace('150x78', '860x1300'), 
          new_elem.attr('alt'), 
          'overlay_image',
          new_elem.attr('class').replace('thumb_', 'full_')
          );
      });

      return false;
    });
    
  }
  
});

function getThumbClass (src) {
  src = src.replace('slide_', 'thumb_').replace('full_', 'thumb_');
  //var cl = src.substring(src.lastIndexOf('/')+1, src.indexOf('.'));
  return src;
}

function getNextImage (src) {
  var new_elem = $("img."+getThumbClass(src)).next();
  if (new_elem.attr('src') == undefined)
  {
    new_elem = $('#thumbnails > img:first');
  }
  return new_elem;
}

function getPrevImage (src) {
  
  var new_elem = $("img."+getThumbClass(src)).prev();
  if (new_elem.attr('src') == undefined)
  {
    new_elem = $('#thumbnails > img:last');
  }
  return new_elem;
}

function imageLoader(src, alt, div, new_class) {
  var img = new Image();
  
  $(img)
    .load(function () {
      $(this).hide();
      if (img.src.indexOf('860x1300') != -1) 
      {
        //var left = ($('#'+div).width()-Number(img.width))/2;
        //var top = ($('#overlay > .close').offset().top-40+$('#overlay > .previous').offset().top-img.height)/2;
        var top = ($.clientCoords().height-img.height)/2+$('body').scrollTop();
        var left = ($.clientCoords().width-img.width)/2+$('body').scrollLeft();
        $('#overlay_image').css({'left': left, 'top': top });
      };
      $('#'+div).html(this);
      $(this).fadeIn(500);
    })

    .error(function () {
    })

    .attr('src', src).attr('alt', alt).attr('class', new_class);
}