// the mansonary function
// this is the main function.
// the function calls the mansonary script and fades in the ajax loaded content as a callback.
callmansonary = function(){
$('.grow:not(.done) .thumb-it:hidden').show();
						   
$('#img-container').masonry({
					columnWidth: 235, 
					animate: true,
					itemSelector: '.grow',
					animationOptions: {
					duration: 250,
					//easing: 'linear',
					queue: false
									   }
					       },function(){
							   //callback... 
							   $('.done').animate({'opacity': 1.0},1500);
//$('.done .thumb-it').animate({'opacity': 1.0},1500);
$('.grow:not(.done) .thumb-it:hidden').animate({'opacity': 1.0},1500);
							           });
						   };
// end mansonary...


						   
// hover for the thumb info text
// this will fade in the exhibit title on mouse hover. Also makes the current thumbnail transparent.
thehoverstuff = function(){
$('.grow:not(.done)').hover(function(){ // mouseover
$(this).children('.thumbtext').fadeIn('slow'); 
$(this).children('.thumb-it').animate({'opacity' : 0.7});},function(){ //mouseout
$(this).children('.thumbtext').fadeOut('slow');
$(this).children('.thumb-it').animate({'opacity' : 1.0}); });
                          };

// end hoverstuff...
						  
						  
// unload the ajax elements
// Function for the close button.
// Removes the ajax loaded content.
function myajaxunload(closeid){
	closeid.children('.thumb, .closebutton').remove();
	closeid.css({'width': 235}).removeClass('done');
	closeid.children('.thumb-it').animate({'opacity': 1.0},500);
	callmansonary();

					   };
// end myajax unload...

// the ajax load function

function myajaxload(clickedobject){

var clickedobjectid = clickedobject.parent().attr('id');
var clickedobject = $('#'+clickedobjectid);
var avariable = clickedobject.children('a').attr('href');
var ajaxtext = ' #content .container'; 
var completeurl = avariable + ajaxtext;
$('.thumbtext').fadeOut('slow');
	$('.done:not(#'+clickedobjectid+') .loadedinfo,.done:not(#'+clickedobjectid+') .thumb,.done:not(#'+clickedobjectid+') .permalink,.done:not(#'+clickedobjectid+') .closebutton').remove();
	$('.done:not(#'+clickedobjectid+') .thumb-it').animate({'opacity': 1.0},500); 
    //$('#'+clickedobjectid+' .thumb-it').animate({'opacity': 0.0},100); 
$('#'+clickedobjectid+' .thumb-it').fadeOut(100);
	$('.done:not(#'+clickedobjectid+')').css({'width': 235}).removeClass('done');
    clickedobject.hide();
	clickedobject.prepend('<div class="thumb noinfo"  ><div class="loadedinfo"></div><div class="permalink" ><a  href='+avariable+' >Permalink to Post</a></div></div>');
	clickedobject.append('<div class="closebutton"><span>x</span></div>'); 
	clickedobject.addClass('done');
	clickedobject.css({'width': 455, 'opacity': 0.0});
	clickedobject.children('.thumb').children('.loadedinfo').load(completeurl, function(data) {
	clickedobject.find('.container').attr("class","loaded-container");
	clickedobject.find('#img-container').attr("id","new-img-container");
	
	clickedobject.show( function(){
var newheight = clickedobject.outerHeight();
	clickedobject.attr('height', newheight+'px');
	 callmansonary();
	
	
//*** This is only needed if you want to use the cycle slideshow in your section.
//*** You can remove this if you don´t need it ***//	

function onAfter(curr, next, opts) {
var index = opts.currSlide;    	
$('#prev')[index == 0 ? 'hide' : 'show']();   	
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();		
var caption = 'Image ' + (opts.currSlide + 1) + ' / ' + opts.slideCount;	
$('#num').html(caption);}	
$('#s1').cycle({	fx:'fade', 	speed:'2000', 	timeout: 0, 	next:'#next', 	prev:'#prev',	after: onAfter		});
//*** end function for the cycle slideshow	
			
			                                });
		

  }
  
  
);




													
	
 }
  

						   

// document ready
$(function(){



if ($.browser.msie) {

$('.thumb-it img').each(function(){
$(this).removeClass('initial');	
	$('.thumb-it img').show();
	
	if ($(this).attr("complete")) {
    // Comes from the cache so no load event will fire
  var newheight = $(this).height();
  
  $(this).css('height' , newheight );
  
} else {
    $(this).load(function() {
      var newheight = $(this).height();
		$(this).css('height' , newheight );
    })
};

	
	
	
	
	
	
	});

				callmansonary();

  } else { 
	
$('.thumb-it img').addClass('initial').hide();


};

	

thehoverstuff();

// click function

$('.thumb-it, .thumbtext').click(function(){

	var clickedobject = $(this);
	myajaxload(clickedobject);
                                    });
	
$('.closebutton').live('click', function(){
	
	var closeid = $(this).parent();
	 myajaxunload(closeid);
	});	
	
	
	

	});

// initial function
	

    var i = 0;//initialize
	var int= 0;//Internet Explorer Fix
	$(window).bind("load", function() {//Fire the function when document is fully loaded

		var int = setInterval("doThis(i)",100); //100 is the fade in speed in milliseconds

	});

	function doThis() {
		var images = $('.initial').length;
		if (i >= images) {		
			clearInterval(int);//When it reaches the last image the loop ends
		}
		$('.initial:hidden').eq(0).fadeIn('200', function(){
		callmansonary();
		$(this).removeClass('initial');

			});
		i++;//add 1 to the count
	};