var showInfo = false;
var showElement;
var hideElement;
var previousButton = '#previous .overlay';
var nextButton = '#next .overlay';
var thumbnailButton = '#thumbnails';
var thumbnailHideTime = 400;
var thumbnailShowTime = 400;
var timeoutLength = 20; // seconds

if($.browser.msie) {
  showElement = function(element){$(element).show()}
  hideElement = function(element){$(element).hide()}
} else { 
  showElement = function(element){$(element).fadeIn('slow')}
  hideElement = function(element){$(element).fadeOut('fast')}
}

function Hide(type, immediately) {
  if(!$(type).is(':visible'))
    return;
  
  if(immediately) {
    if(type == thumbnailButton) {
        $(type).animate({top: '60px'}, { duration: thumbnailHideTime, complete: function(){$(type).css('top', '60px'); $(type).hide();}});
    } else {
      hideElement(type);
    }
  } else {
    $(type).stopTime();
    $(type).oneTime(timeoutLength, function(){Hide(type, true)});
  }
}

function Show(type)
{
  if(type)
    $(type).stopTime();
 
  if(type == previousButton) {
    showElement(previousButton);
    Hide(nextButton);
    Hide(thumbnailButton);
  } else if(type == nextButton) {
    showElement(nextButton);
    Hide(previousButton);
    Hide(thumbnailButton);
  } else if(type == thumbnailButton) {
       
    if($(type).attr('animating') != 'true') {
      
      var top = parseInt($(type).css('top'));

      $(type).stop(true, false);
      
      if(top != 0) { // animage
      
        var duration = thumbnailShowTime*top/60;
          
        $(type).attr('animating', 'true');
        $(type).show();
        $(type).animate({top: '0px'}, { duration: duration, complete: function(){ $(type).attr('animating', 'false');} });
      }
    }
      
    Hide(previousButton);
    Hide(nextButton);
  } else {
    Hide(nextButton);
    Hide(previousButton);
    Hide(thumbnailButton);
  }
}

jQuery(function($){ 

  $('#gallery').bind("mousemove", function(event){
    
//    event.pageX, event.pageY
    
    var topLeft = $(this).offset();
    var width = $(this).width();
    var height = $(this).height();
    
    var previousWidth = $('#previous').width();
    var nextWidth = $('#next').width();   
    var thumbnailHeight = $('#thumbnail_container').height();
    var over;
   
    if(topLeft.top + height - thumbnailHeight < event.pageY) {
      if(!showInfo)
        over = thumbnailButton;
    } else if(topLeft.left + previousWidth > event.pageX) {
      over = previousButton;
    } else if(topLeft.left + width - nextWidth < event.pageX) {
      over = nextButton;
    } else {
      over = null;
    }
    
    Show(over);
  });
  
  $('#gallery').bind("mouseleave", function(event){
    Hide(previousButton);
    Hide(nextButton);
    Hide(thumbnailButton);
  });
  
  if($('ul.gallery li').length > 1) { // disable next and previous
    $('#previous').click(function(){$.galleria.prev()});
    $('#next').click(function(){$.galleria.next()});
  }
});

jQuery(function($) {
  $('ul.gallery').galleria({
    history   : false, // activates the history object for bookmarking, back-button etc.
    clickNext : false, // helper for making the image clickable
    insert    : '#image', // the containing selector for our main image
    onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

      if(image.width() != 0) {
        image.css('left', 450-image.width()/2+'px');
      }
      
      if(image.height() != 0) {
        image.css('top', 300-image.height()/2+'px');
      }
      
      // fade in the image & caption
//      if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
        image.css('display','none').fadeIn(1000);
//      }
      caption.css('display','none');//.fadeIn(1000);

      // fetch the thumbnail container
      var _li = thumb.parents('li');
        
      // fade out inactive thumbnail
      _li.siblings().children('img.selected').fadeTo(500,0.3);
        
      // fade in active thumbnail
      thumb.fadeTo('fast',1).addClass('selected');

      $('#caption_text .title').text(_li.children('img').attr('title'));
      $('#caption_text .description').html(_li.children('img').attr('description'));
        
      // add a title for the clickable image
      //image.attr('title','Next image >>');
    },
    onThumb : function(thumb) { // thumbnail effects goes here
        
      // fetch the thumbnail container
      var _li = thumb.parents('li');
        
      // if thumbnail is active, fade all the way.
      var _fadeTo = _li.is('.active') ? '1' : '0.3';
        
      // fade in the thumbnail when finnished loading
      thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
        
      // hover effects
      thumb.hover(
        function() { thumb.fadeTo('fast',1); },
        function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
      )
    }
  });
    
  $('#info-link').click(function(event){
    event.preventDefault();
//	  $('#thumbnail-link').show();
//	  $('#info-link').hide();
    
    if(showInfo) {
      $('#caption_container').hide('slide', {direction: 'down'}, 400);
      showInfo = false;
    }
    else{
//      Hide(thumbnailButton, true);
//      $('#caption_container').show('slide', {direction: 'down'}, 400);   
      showInfo = true;
    }
	  
    return false;
  });
  
  $('#info-link').hover(
    function(){
      if(!showInfo){
        Hide(thumbnailButton, true);
        $('#caption_container').show('slide', {direction: 'down'}, 400);   
      }
    }, 
    function(){
      if(!showInfo){
        if(!$('#caption_container').is(':hidden')) {
          $('#caption_container').hide('slide', {direction: 'down'}, 400);
        }
      }
    }
  );
  
  $('#thumbnail-link').click(function(event){
    event.preventDefault();
//	  $('#thumbnail-link').hide();
//	  $('#info-link').show();
    if(showInfo) {
      Show(thumbnailButton);
      $('#caption_container').hide('slide', {direction: 'down'}, 400);	    
      showInfo = false;
    }

	  return false;
  });
  
  $('#thumbnail-link').hover(
      function(){
        if(!showInfo){
          Show(thumbnailButton);
          $('#motiongallery').stop(true, false);
        }
      }, 
      function(){
        if(!showInfo){
          Hide(thumbnailButton);
        }
      }
    );  
  
  if($('ul.gallery li').length > 1) { // disable next and previous 
    $(document).bind('keyup', function(event){
      if(event.which == 39) { // right arrow
        $.galleria.next();         
      } else if(event.which == 37) { // left arrow
        $.galleria.prev();
      }
    });
  }
});