// <![CDATA[
/**
 * dependency of this plugin:
 *
 * //@var global string http_root
 * //@var global string rp_global_image
 * //@var global string image_loader
 * //@var global string rp_cms
 *
 * //@function close_popup()
 *
*/

// You need an anonymous function to wrap around your function to avoid conflict
(function($){
 
    // Attach this new method to jQuery
    $.fn.extend({ 
         
        // This is where you write your plugin's name
        gallery: function(options) {
		
			// Set the default values, use comma to separate the settings, example:
            var defaults = {
				objectTarget:			'#viewer-gallery',
				captionTarget:   		'#caption-gallery',
				menuParent:				'#menu-gallery',
				timerAnimateOpacity:	1000,
				timerAnimateHeight:		500	
            }
                 
            var options = $.extend(defaults, options);
			
			//var $cm = this.each(function(index,element){
			// "this" is already a jQuery object: 
			// When you create the click function you can assign that element to a variable and reference it within:
			//var $cm = this.ready(function(e){
				
			var o = options;
			var object = $(this); // always return #document if you have: var $cm = this.ready(function(e){}).
			
			var object_parent = $(o.menuParent);
			
			var target_object = $(o.objectTarget);
			var target_caption = $(o.captionTarget);
			var target_total_items = $('li',target_object).length;
			
			// Hide the first element.
			$('li:first-child',object_parent).hide();
			
			// Add a class the first element
			$('li:first-child',target_object).addClass('active');
			
			// Set the opacity of all images to 0
			$('li',target_object).css({opacity: 0.0});
			
			// Get the first image and display it (set it to full opacity)
			$('li:first-child',target_object).css({opacity: 1.0});

			// Resize the width of the caption according to the image width.
			var width_current = $('li:first-child',target_object).find('img').css('width');
			var height_current = $('li:first-child',target_object).find('img').css('height'); 
			
			target_object.css({height:height_current});
			//alert(height_current);
			
			// Get the caption of the first image from longdesc attribute and display it
			target_caption.html($('li:first-child',target_object).find('img').attr('longdesc'));
			
			// Keep the lines below for checking.
			//alert(object.get(0).nodeName);
			//alert(object.selector);
			//alert(object.html());
			//alert(o.timerFirst);
			//alert(target_total_items);
				
			//});
			
			// Attach click function.
			var $cm = this.click(function(e){
				
				// Show all li.
				// Hide this li.
				$('li',object_parent).show();
				$(this,object_parent).parent().hide();
				
				// Get the index number of this click.
				var index_parent = $(this).parent().index();
				//alert(index_parent);
				
				// Get the current li.
				// Get the next li.
				var current = ($('li.active',target_object)?  $('li.active',target_object) : $('li:first-child',target_object));
				var next = $('li',target_object).eq(index_parent);
				
				// Get next image width & height.
				var width_next = next.find('img').css('width');
				var height_next = parseInt(next.find('img').css('height'));
				
				// Get next image caption.
				var caption_next = next.find('img').attr('longdesc');
				
				//target_object.css({height:height_next});
				target_caption.html(caption_next);
				
				// Change the opacity of the current li to 0.
				current.animate({opacity: 0.0}, o.timerAnimateOpacity).removeClass('active');
				
				// Prepend an ajax gif to the parent.
				target_object.prepend('<span style="position:absolute; top:100px; left:160px; display:block;" class="loader-gallery"><img src="' + http_root + rp_global_image + 'ajax-loader-2.gif" /></span>');
				
				// Animate the height of the parent.
				// Remove the ajax gif.
				// Change opacity of the next li to 1.
				target_object.animate({height:height_next}, o.timerAnimateHeight, function(){
					$('.loader-gallery',this).fadeOut('fast').remove();
					next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, o.timerAnimateOpacity);
				});
			
				return false;
			});

			
        }
    });
     
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

// ]]>