// Custom sorting plugin
var imgLoading;
(function($) {

  $.fn.sorted = function(customOptions) {
    var options = {
      reversed: false,
      by: function(a) { return a.text(); }
    };
    $.extend(options, customOptions);
    $data = $(this);
    arr = $data.get();
    arr.sort(function(a, b) {
      var valA = options.by($(a));
      var valB = options.by($(b));
      if (options.reversed) {
        return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;				
      } else {		
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;	
      }
    });
    return $(arr);
  };
  
  $.fn.imageFade = function()
  {
	  $("li", this).hover(function() { //On hover...
  		
	  		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
	  		
	  		//Set a background image(thumbOver) on the &lt;a&gt; tag 
	  		$(this).find("a").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
	  		//Fade the image to 0 
	  		$(this).find("span").stop().fadeTo('normal', 0 , function() {
	  			$(this).hide(); //Hide the image after fade
	  		}); 
	  	} , function() { //on hover out...
	  		//Fade the image to 1 
	  		$(this).find("span").stop().fadeTo('normal', 1).show();
	  	});
  };
  
  $.fn.setClicks = function()
  {
	  $('li',this).click(function(){
		  var largeImageUrl = $('img',this).attr('src').replace('thumb-','');
		  var urlHash = $(this).attr('rel');
		  
		  var $imgLoad;
		  var $featureArea = $('#feature');
		  $('img',$featureArea).remove();
		  
		  $featureArea.append('<div class="loading">Loading...</div>');
		  imgLoading = true;
		  
		  $('html, body').animate({scrollTop:0}, 'slow');
		  
		  if( _imgCache[largeImageUrl] ){
			  $featureArea.animate({'height':_imgCache[largeImageUrl][0].height},function(){
				  $featureArea.append( _imgCache[largeImageUrl] );
				  $('.loading').remove();
				  window.location.hash = urlHash;
				  $featureArea.data('state',urlHash);
				  imgLoading = false;
			  });
		  }else{
			  var $img = $('<img />').attr('src',largeImageUrl);
			  $img.bind('load', function(e){
				  _imgCache[largeImageUrl] = $img;
				  $featureArea.animate({'height':$img[0].height},function(){
					  $featureArea.append($img);
					  $('.loading').remove();
					  window.location.hash = urlHash;
					  $featureArea.data('state',urlHash);
					  imgLoading = false;
				  });
				  
			  });
		  }
		  
  		return false;
  	});
  };
  
})(jQuery);

var _imgCache = {};

$(document).ready(function() {
	
	var intervalId;
	var $gallery = $('#gallery_list');
	var $featureArea = $('#feature');
	var hashLoader = function()
	{
		if( ! imgLoading ){
			var hash = window.location.hash.replace('#','');
			// Check if the hash is already loaded before switching
			if( hash != '' ){
				if($featureArea.data('state') != hash){
					$('li[rel='+hash+']',$gallery).trigger('click');
				}
			}else{
				if($featureArea.data('state') != $('li:first',$gallery).attr('rel')){
					$('li:first',$gallery).trigger('click');
				}
			}
		}
	};
	
	if( !intervalId ){
		intervalId = setInterval(hashLoader,500);
	}
	
	// bind radiobuttons in the form
	var $filterType = $('#filter li');
	var $filterSort = $('#filter input[name="sort"]');

	// get the first collection
	
	$('li', $gallery).each(function(el, i){
		
		var largeImageUrl = $('img',this).attr('src').replace('thumb-','');
		var urlArray = largeImageUrl.split('/');
		var urlHash = urlArray.pop().replace(/^(.*).(jpg|jpeg|png|gif|tiff)$/,'$1');
		$(this).attr('rel',urlHash);
	});
	
	if(!$featureArea.data('state') ){
		$featureArea.data('state',$('li:first',$gallery).attr('rel'));
	}

	// clone applications to get a second collection
	var $data = $gallery.clone();

	// attempt to call Quicksand on every form change
	$filterType.click(function( e ) {
		if ($(this).attr('id') == 'everything') {
	      var $filteredData = $data.find('li');
	    } else {
	      var $filteredData = $data.find('li[data-type=' + $(this).attr('id') + ']');
	    }
	
	    // finally, call quicksand
	    $gallery.quicksand($filteredData, {
	      duration: 800,
	      easing: 'easeInOutQuad',
	      enhancement: function()
	      {
	    	$gallery.imageFade();
	    	$gallery.setClicks();
	      }
	    });

	});
	  
	$gallery.imageFade();
	$gallery.setClicks();
});