(function($) {
  
  
  $.fn.sonnetiSlideshow = function(o){
    
    o = $.extend({

    speed: 			800, 
    percentage: 70,
    margin: 10,
    startPosition: 160, 
    maxHeight: 300,
    pager: '#pagination a'
    }, o || {});
     
        
    var cw = 0; // current width
    var tw = 0; // total width
    var ci = 0; // current index
    var pr = 100 - o.percentage; // percentage remainder
      
    $('#slider li img:first').addClass('enlarged');
      
    $(this).parent().css('float','left');
    $(this).parent().css('margin-right', o.margin);
      
    this.each(function() {  
      
      $(this).show().css('opacity', 0);
      
      if(!$(this).hasClass('enlarged')) $(this).fadeTo(2000, 0.4); // fade all items except the initial item
      if($(this).hasClass('enlarged')) $(this).fadeTo(2000, 1); // fade all items except the initial item
      
      if ($(this).height() > o.maxHeight) o.maxHeight = $(this).height(); // override the max height with the tallest item
      
      var w = $(this).width(); // get the image width with margin
      var h = $(this).height(); // get the image height
      
      // set the height of the parent li item
      $(this).parent().css('height', o.maxHeight);
        
      if(!$(this).hasClass('.enlarged')) {
        
        // reduce the width and height based on the percentage option
        w = Math.round((w / 100) * o.percentage);
        h = Math.round((h / 100) * o.percentage); 
          
      }
        
      // set the width of the parent li item
      $(this).parent().css('width', w);
    
      // set the width and height of the image
      $(this).css('width', w);
      $(this).css('height', h);
 		  
 		  // tally up the total width required for the images
 		  tw += w + o.margin;
 		       
    });
       
    $(this).parent().parent().parent().css('height', o.maxHeight);
    $(this).parent().parent().parent().css('left', o.startPosition);
    
    // add a few pixels to stop it from dropping down when it animates
    $(this).parent().parent().parent().css('width',tw + 200); 
    
    
       
    return this.click(function() {  
      
       cw = 0;
       
       // get the width and height of the currently selected item
       var prev_width = $("#slider li img.enlarged").width();
       var prev_height = $("#slider li img.enlarged").height();
       
       // reduce the width and height based on the percentage option
       var small_width = Math.round((prev_width / 100) * o.percentage);
       var small_height = Math.round((prev_height / 100) * o.percentage);
       
       // get the width and height of the clicked item
       var this_width = $(this).width();
       var this_height = $(this).height();
      
       // increase the width and height based on the percentage option
       var full_width = this_width + Math.round((this_width / o.percentage) * pr);
       var full_height = this_height + Math.round((this_height / o.percentage) * pr);
      
       // adjust the total width based on the 2 items animating
       tw = (tw - prev_width - this_width) + small_width + full_width;
      
       var ti = $('#slider li img').index(this); // click items index
       
        
       $('#slider li img').each(function(){
        if ($("#slider li img").index(this) < ti) {
          cw += $(this).width();
          cw += 10;
        }
      });
      
      // adjust the width after resize 
      if(ci < ti){
        var actualWidth = (cw - (prev_width - small_width)) - o.startPosition;
      } else {
        var actualWidth = cw - o.startPosition;
      }
      
      // set current index to value of clicked index
      ci = ti;
      

      
      var theImage = $('#slider li img:eql(' + ti + ')');
      
      if(!$(this).hasClass('.enlarged')) {
        $('.captions p').each(function() {
           $(this).fadeTo("normal", 0, function(){$(this).hide()});
         });
      }
      
      
      // if the index is 0 reset to the start position
      // otherwise carry one with animation
      if (ti == 0) {
        $("#slider").animate({ left: o.startPosition }, o.speed, null,function(){
          $('.captions p:eq(' + ci + ')').show().fadeTo("normal", 1);
        });
      } else {
        $("#slider").animate({ left: "-" + actualWidth}, o.speed, null, function(){
          $('.captions p:eq(' + ci + ')').show().fadeTo("normal", 1);
        });
      }
      
      
      if(!$(this).hasClass('.enlarged')) {
      
      
        // animate (shrink) the enlarged image parent li elem
        $("#slider li img.enlarged").parent().animate(
    		  { 
      		  width: small_width, 
      			height: o.maxHeight 
      		}, o.speed
    		);
    		
    		
  			// animate (shrink) the enlarged image
        $("#slider li img.enlarged").animate(
          { 
            width: small_width, 
            height: small_height,
            opacity: 0.4
          }, o.speed
        ).removeClass("enlarged");
  	
       
        // add the enlarged class to the click elem
        $(this).addClass('enlarged');
      
        
        /////////////
       
        // animate (enlarge) the enlarged image
        $(this).animate(
  			  { 
    			  width: full_width, 
    				height: full_height,
    				opacity: 1 
    			}, o.speed
  			);
			
  			// animate (enlarge) the enlarged image parent li elem
        $(this).parent().animate(
          { 
            width: full_width, 
            height: o.maxHeight 
          }, o.speed
        );
        
        $(o.pager).each(function() {
            $(o.pager + '.active').removeClass('active');
        });
        
        $('#pagination li a:eq(' + ci + ')').addClass('active');
 			 
 		  } // end if
				
				return false;
    });
    
    
					
  }; // eof
  
  // this function is used to paginate through each slide
  $.fn.sonnetiPager = function(o){ 
    o = $.extend({

    speed: 800, 
    percentage: 70,
    margin: 10,
    startPosition: 215, 
    maxHeight: 300,
    pager: '#pagination a',
    asset: '#slider li img'
    }, o || {}); 
    
    $('#pagination li a:first').addClass('active');
    
    return this.click(function() { 
    
      var cw = 0;
      var tw = 0; // total width
      var ci = 0; // current index
      var ti = $(o.pager).index(this); // click items index
      var curImage = $('#slider li img:eq(' + ti + ')');
      var pr = 100 - o.percentage; // percentage remainder
        
      $(o.asset).each(function() {
        if ($(this).height() > o.maxHeight) o.maxHeight = $(this).height(); // override the max height with the tallest item
      });
      
      // get the width and height of the currently selected item
      var prev_width = $("#slider li img.enlarged").width();
      var prev_height = $("#slider li img.enlarged").height();

      // reduce the width and height based on the percentage option
      var small_width = Math.round((prev_width / 100) * o.percentage);
      var small_height = Math.round((prev_height / 100) * o.percentage);

      // get the width and height of the clicked item
      var this_width =  $(curImage).width();
      var this_height =  $(curImage).height();
      
      // increase the width and height based on the percentage option
      var full_width = this_width + Math.round((this_width / o.percentage) * pr);
      var full_height = this_height + Math.round((this_height / o.percentage) * pr);

      // adjust the total width based on the 2 items animating
      tw = (tw - prev_width - this_width) + small_width + full_width;
      
      if(!$(this).hasClass('.active')) {
        
       $('#slider li img').each(function(){
               if ($("#slider li img").index(this) < ti) {
                 cw += $(this).width();
                 cw += 10;
               }
        });
       
        
        // adjust the width after resize 
        if(ci < ti){
          var actualWidth = (cw - (prev_width - small_width)) - o.startPosition;
        } else {
          var actualWidth = cw - o.startPosition;
        }

        // set current index to value of clicked index
        ci = ti;
        
       if(!$(this).hasClass('active')) {
         $('.captions p').each(function() {
            $(this).fadeTo("normal", 0, function(){$(this).hide()});
          });
        }
        
      // if the index is 0 reset to the start position
            // otherwise carry one with animation
            if (ti == 0) {
              $("#slider").animate({ left: o.startPosition }, o.speed, null,function(){
                $('.captions p:eq(' + ci + ')').show().fadeTo("normal", 1);
              });
            } else {
              $("#slider").animate({ left: "-" + actualWidth}, o.speed, null, function(){
                $('.captions p:eq(' + ci + ')').show().fadeTo("normal", 1);
                $('.captions p:eq(' + ci + ')').show().fadeTo("normal", 1);
              });
            }
        
        if(!$(curImage).hasClass('enlarged')) {
          
          // animate (shrink) the enlarged image parent li elem
          $("#slider li img.enlarged").parent().animate(
          { 
           width: small_width, 
           height: o.maxHeight 
          }, o.speed
          );


          // animate (shrink) the enlarged image
          $("#slider li img.enlarged").animate(
          { 
            width: small_width, 
            height: small_height,
            opacity: 0.4
          }, o.speed
          ).removeClass("enlarged");


          // add the enlarged class to the click elem
          $(curImage).addClass('enlarged');


          /////////////

          // animate (enlarge) the enlarged image
          $(curImage).animate(
          { 
           width: full_width, 
           height: full_height,
           opacity: 1 
          }, o.speed
          );

          // animate (enlarge) the enlarged image parent li elem
          $(curImage).parent().animate(
          { 
            width: full_width, 
            height: o.maxHeight 
          }, o.speed
          );
        } // end if

        $(o.pager).each(function() {
          $(o.pager + '.active').removeClass('active');
        });
                      
        $('#pagination li a:eq(' + ci + ')').addClass('active');
        
        
      } // end if
      
      return false;
    
    });
    

  }; // eof
  
})(jQuery);

$(document).ready(function(){
  $('#slider').before('<p id="loading">Loading images...</p>');
  $('#slider img').hover(function(){
    $(this).css('cursor', 'pointer');
  });


	// set the default text
	$('#iruuq-iruuq').val($('#iruuq-iruuq').attr('title'));

	// clear it out on focus
	$('#iruuq-iruuq').focus(function(){
		$(this).val("");
	});

	// if it's blank then reset back the title attribute
	$('#iruuq-iruuq').blur(function(){
		if(!$(this).val().length){
			$('#iruuq-iruuq').val($('#iruuq-iruuq').attr('title'));
		}
	});
	
	
	
	// set the default text
	$('#cm-name').val($('#cm-name').attr('title'));

	// clear it out on focus
	$('#cm-name').focus(function(){
		$(this).val("");
	});

	// if it's blank then reset back the title attribute
	$('#cm-name').blur(function(){
		if(!$(this).val().length){
			$('#cm-name').val($('#cm-name').attr('title'));
		}
	});
	
	
});

$(window).load(function(){
  $('#loading').fadeOut('slow');
  $('.captions p').each(function() { $(this).fadeTo(0, 0).hide(); });
  $('.captions p:first').show().fadeTo(1500, 1);
   
   
  $('#slider li img').sonnetiSlideshow();
  $('#pagination li a').sonnetiPager();
   
  $('#pagination li a').show().css('opacity', 0);
  $('#pagination li a').fadeTo(1500, 1); 
   
});