$(function() {
  if(document.getElementById('slideshow')) {
    var channel = new channels();
  }
  if(document.getElementById('detailImageFull')) {
    var dt = new detailImage();
  }
});

function detailImage() {
  var pi = new Image(32,32);
  pi.src = '/webimages/loader.gif';
  $('body').append('<div id="overlay"></div><div id="modal"></div>');
  var $overlay = $('#overlay');
  var $modal = $('#modal');
  var $ph = $('#detailImageFull');
  var $di = $('#detailImage');
  var firstHover = true;
  
  $ph.find('a').live('click',function(e) {
    e.preventDefault();
    overlayThis(this);
  });
  $('#detailImageThumbs a').click(function(e) {
    e.preventDefault();
    overlayThis(this);
  }).mouseenter(function() {
    if(firstHover) {
      $di.height($di.height());
      firstHover = false;
    }
    $ph.html($(this).clone());
  });
  
  $overlay.click(function() { closeModal(); });
  $modal.click(function() { closeModal(); });
  
  function overlayThis(anchor) {
    $overlay.show();
    $modal.html('<img src="'+pi.src+'" class="loader" />').css({width:400,height:300,marginLeft:-200,marginTop:-150}).show();
    var src = $(anchor).attr('href');
    var $img = $('<img style="visibility:hidden">');
    $img.load(function() {
      $img.unbind();
      $modal.html($img);
      $modal.animate({width:$img[0].clientWidth,height:$img.height(),marginLeft:-$img.width()/2,marginTop:-$img.height()/2},400,function() {
        $modal.html($img);
        $img.css({visibility:'visible',display:'none'}).fadeIn();
      });
    });
    $img.attr('src',src);
  }
  function closeModal() {
    $overlay.fadeOut();
    $modal.hide();
  }
}

function channels() {
  var cur = 0;
  var $li = $('#slideshow li');
  var timer;
  var isAnimating = false;
  var queue = -1;
  setTimer(5000);
  
  var bullets = '<ul id="slideshowBullets">';
  $li.each(function(i) {
    if(i == 0) {
      bullets += '<li class="active"></li>';
    }
    else {
      bullets += '<li></li>';
    }
  });
  bullets += "</ul>";
  $('#slideshow').append(bullets);
  bullets = $('#slideshowBullets li').each(function(i) {
    $(this).click(function() {
      jumpTo(i);
    });
  });
  
  function next() {
    var n = cur + 1;
    if(n == $li.length) { n = 0; }
    jumpTo(n);
  }
  function jumpTo(num) {
    if(!isAnimating && num != cur) {
      isAnimating = true;
      queue = -1;
      clearTimeout(timer);
      timer = null;
      bullets.eq(cur).removeClass('active');
      bullets.eq(num).addClass('active');
      $li.eq(num).fadeIn(1000,function() {
        $li.eq(cur).css({display:'none','zIndex':5}).removeClass();
        $(this).css('zIndex','4');
        cur = num;
        setTimer(7000);
        isAnimating = false;
        if(queue >= 0) {
          jumpTo(queue);
        }
      });
    }
    else {
      queue = num;
    }
  }
  function setTimer(time) {
    timer = setTimeout(function() { next(); }, time);
  }
}