// <![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
        run_slide: function(options) {
		
			// Set the default values, use comma to separate the settings, example:
            var defaults = {
				caption:			false,
				menu:				false,
				liquidWidth:		false,
				liquidHeight:		false,
				timerFirst:			5000, // The timeout for first slide before calling the call back function.
				timerEach:			5000, // The timeout for each slide.
				timerTransition:	1500,
				timerIdle:			3000,
				captionTitle:   	'.slide-caption h4', 
				captionDescription: '.slide-caption p',
				menuParent:			'.slide-menu',
				buttonNext:   		'.button-next', 
				buttonPrevious:   	'.button-previous',
				buttonStop:   		'.button-stop',
				buttonPlay:   		'.button-play',
				numberCurrent:		'.current',
				numberTotal:		'.total'
            }
                 
            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){}).
			
			// Get the next and previous buttons.
			var menu_parent = $(o.menuParent,object.parent());
			var button_next = $(o.buttonNext,object.parent());
			var button_previous = $(o.buttonPrevious,object.parent());
			var button_stop = $(o.buttonStop,object.parent());
			var button_play = $(o.buttonPlay,object.parent());
			
			// Add a class the the first element
			$('li:first-child',object).addClass('active');
			
			// Set the opacity of all images to 0
			$('li',object).css({opacity: 0.0});
			
			// Get the first image and display it (set it to full opacity)
			$('li:first-child',object).css({opacity: 1.0});
			
			// Set the caption background to semi-transparent
			//$('.slide .caption h2').css({opacity: 0.7});

			// Resize the width of the caption according to the image width.
			//$('.slide .caption').css({width: $('.slide > li').find('img').css('width')});
			var width_current = $('li:first-child',object).find('img').css('width');
			var height_current = $('li').find('img').css('height');
			
			if(o.liquidWidth == true) object.css({width:width_current});
			if(o.liquidHeight == true) object.css({height:height_current});
			
			//alert(width_current);
			
			// Get the caption of the first image from longdesc attribute and display it
			$('.slide-caption h4',object.parent()).html($('li:first-child',object).find('img').attr('title'));
			$('.slide-caption p',object.parent()).html($('li:first-child',object).find('img').attr('longdesc'));
			
			//var number = $('.current',object.parent()).html();
			//alert(first);
			
			// the timeOut to call the loop_slide function, 6000 = change to next image after 6 seconds
			var timer_first = setTimeout(function() {
				$.fn.run_slide.loop_slide[object.selector](object);
			},o.timerFirst);
			
			// Keep the lines below for checking.
			//alert(object.get(0).nodeName);
			//alert(object.selector);
			//alert(object.html());
			//alert(object.parent().get(0).nodeName);
				
			//});
			
			// Check if the property loop_slide exists, and if not, creates it as a new empty object. The functions are then stored as properties of that new object.
			if(!$.fn.run_slide.loop_slide) $.fn.run_slide.loop_slide = {};

			$.fn.run_slide.loop_slide[object.selector] = function(object) 
			{
	
				$.fn.run_slide.stop_timer[object.selector]();
				$.fn.run_slide.stop_idle[object.selector]();
				
				// Get the slide numbers.
				var number_current = parseInt($(o.numberCurrent,object.parent()).html());
				var number_total = parseInt($(o.numberTotal,object.parent()).html());
				
				// Set the next number.
				var number_increment = number_current + 1;
				if(number_current == number_total) number_increment = 1;
				//alert(typeof number_current);
				
				// If no IMGs have the show class, grab the first image.
				var current = ($('li.active',object)?  $('li.active',object) : $('li:first-child',object));

				// Get next image, if it reached the end of the slideshow, rotate it back to the first image.
				// var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('li:first-child',object) : current.next()) : $('li:first-child',object));	
				if(o.menu == true) var next = $('li',object).eq(number_increment - 1);
				else var next = ((current.next().length) ? current.next() : $('li:first-child',object));
				
				// Get next image caption.
				var caption_title = next.find('img').attr('title');
				var caption_description = next.find('img').attr('longdesc');
				//alert(caption_description);
				
				// Get next image width & height.
				var width_current = next.find('img').css('width');
				var height_current = next.find('img').css('height');
				
				if(o.liquidWidth == true) object.css({width:width_current});
				if(o.liquidHeight == true) object.css({height:height_current});
				
				// Update the element's content.
				$(o.numberCurrent,object.parent()).html(number_increment);
				$(o.captionTitle,object.parent()).html(caption_title);
				$(o.captionDescription,object.parent()).html(caption_description);
				
				// Set the fade in effect for the next image, show class has higher z-index.
				current.addClass('last-active');
				next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, o.timerTransition, function(){
					
					//if(button_next.hasClass('clicked')) alert('clicked');
					//if (!(button_previous.hasClass("clicked"))){alert('no class')};
					//if(button_next.hasClass('clicked')) alert('clicked');
					// if ($(this).not(".selected")) {};
					
					if (!(button_previous.hasClass("clicked")) && !(button_next.hasClass("clicked")))
					{
						current.animate({opacity: 0.0}, o.timerTransition).removeClass('active last-active');
						
						// Start the timer.
						$.fn.run_slide.timer_each[object.selector] = setTimeout(function() {
							$.fn.run_slide.loop_slide[object.selector](object);
						},o.timerEach);

					}
					
					//alert($.fn.run_slide.timer_each);
					
				});
				
				// Keep the lines below for checking.
				//alert(object.get(0).nodeName);
				//alert(object.selector);
				//alert(object.html());
				//alert(o.timerEach);
				
			}
			
			if(o.menu == true) click_next(button_next);
			if(o.menu == true) click_previous(button_previous);
			
			// Check if the property exists, and if not, creates it as a new empty object. The functions are then stored as properties of that new object.
			if(!$.fn.run_slide.timer_each) $.fn.run_slide.timer_each = {};
			if(!$.fn.run_slide.timer_idle) $.fn.run_slide.timer_idle = {};
			if(!$.fn.run_slide.stop_timer) $.fn.run_slide.stop_timer = {};
			if(!$.fn.run_slide.stop_idle) $.fn.run_slide.stop_idle = {};
			if(!$.fn.run_slide.continue_timer) $.fn.run_slide.continue_timer = {};
			
			
			$.fn.run_slide.stop_timer[object.selector] = function() {
				clearTimeout($.fn.run_slide.timer_each[object.selector]);
			}
			
			$.fn.run_slide.stop_idle[object.selector] = function() {
				clearTimeout($.fn.run_slide.timer_idle[object.selector]);
			}
			
			$.fn.run_slide.continue_timer[object.selector] = function() {
				$.fn.run_slide.loop_slide[object.selector](object);
			}
			
			function click_play(button_play){
			
				// Attach click function.
				button_play.click(function() {
					
					button_next.removeClass('clicked');
					button_previous.removeClass('clicked');
					$.fn.continue_timer();
					
					return false;
				});
			
			}
			
			function click_next(button_next){
			
				// Attach click function.
				//$.fn.cm = button_next.click(function(e){
				button_next.click(function() {
					
					$.fn.run_slide.stop_idle[object.selector]();
					
					// Clear all the timers.
					clearTimeout(timer_first);
					clearTimeout($.fn.run_slide.timer_each[object.selector]);
					
					// Check if the button has the clicked class, then remove it if it does.
					// Check if the button's parent's a has the clicked class, then remove it if it does. 
					// Add the class anew.
					//if($(this).hasClass('clicked')) $(this).removeClass('clicked');
					//if($(this).parent().siblings().find('a').hasClass('clicked')) alert('has class');
					if(menu_parent.find('a').hasClass('clicked')) menu_parent.find('a').removeClass('clicked');
					$(this).addClass('clicked');
					
					// Get the slide numbers.
					var number_current = parseInt($(o.numberCurrent,object.parent()).html());
					var number_total = parseInt($(o.numberTotal,object.parent()).html());
					
					// Set the next number.
					var number_increment = number_current + 1;
					if(number_current == number_total) number_increment = 1;
					
					$(o.numberCurrent,object.parent()).html(number_increment);
					
					// If no IMGs have the show class, grab the first image.
					var current = ($('li.active',object)?  $('li.active',object) : $('li:first-child',object));

					// Get next image, if it reached the end of the slideshow, rotate it back to the first image.
					var next = $('li',object).eq(number_increment - 1);
					
					// Get next image width & height.
					var width_current = next.find('img').css('width');
					var height_current = next.find('img').css('height');
					
					if(o.liquidWidth == true) object.css({width:width_current});
					
					// Get next image caption.
					var caption_title = next.find('img').attr('title');
					var caption_description = next.find('img').attr('longdesc');
					//alert(caption_description);
					
					$(o.captionTitle,object.parent()).html(caption_title);
					$(o.captionDescription,object.parent()).html(caption_description);
					
					current.removeClass('active').css({opacity: 0.0});
					next.addClass('active').css({opacity: 1.0});
					
					// Set time out when idle.
					$.fn.run_slide.timer_idle[object.selector] = setTimeout(function() {
						$.fn.run_slide.continue_timer[object.selector]();
						button_next.removeClass('clicked');
					},o.timerIdle);
					
					return false;
				});
			
			}
			
			function click_previous(button_previous){
			
				// Attach click function.
				button_previous.click(function() {
					
					$.fn.run_slide.stop_idle[object.selector]();
					
					// Clear all the timers.
					clearTimeout(timer_first);
					clearTimeout($.fn.run_slide.timer_each[object.selector]);
					
					// Check if the button has the clicked class, then remove it if it does.
					// Check if the button's parent's a has the clicked class, then remove it if it does. 
					// Add the class anew.
					//if($(this).hasClass('clicked')) $(this).removeClass('clicked');
					//if($(this).parent().siblings().find('a').hasClass('clicked')) alert('has class');
					if(menu_parent.find('a').hasClass('clicked')) menu_parent.find('a').removeClass('clicked');
					$(this).addClass('clicked');
					
					// Get the slide numbers.
					var number_current = parseInt($(o.numberCurrent,object.parent()).html());
					var number_total = parseInt($(o.numberTotal,object.parent()).html());
					
					// Set the next number.
					var number_decrement = number_current - 1;
					if(number_current == 1) number_decrement = number_total;
					
					$(o.numberCurrent,object.parent()).html(number_decrement);
					
					// If no IMGs have the show class, grab the first image.
					var current = ($('li.active',object)?  $('li.active',object) : $('li:first-child',object));

					// Get next image, if it reached the end of the slideshow, rotate it back to the first image.
					var next = $('li',object).eq(number_decrement - 1);
					
					// Get next image width & height.
					var width_current = next.find('img').css('width');
					var height_current = next.find('img').css('height');
					
					if(o.liquidWidth == true) object.css({width:width_current});
					
					// Get next image caption.
					var caption_title = next.find('img').attr('title');
					var caption_description = next.find('img').attr('longdesc');
					//alert(caption_description);
					
					$(o.captionTitle,object.parent()).html(caption_title);
					$(o.captionDescription,object.parent()).html(caption_description);
					
					current.removeClass('active').css({opacity: 0.0});
					next.addClass('active').css({opacity: 1.0});
					
					// Set time out when idle.
					$.fn.run_slide.timer_idle[object.selector] = setTimeout(function() {
						$.fn.run_slide.continue_timer[object.selector]();
						button_previous.removeClass('clicked');
					},o.timerIdle);
					  
					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);

// ]]>