//*******************************************************************************************************
//
//  |
//
//*******************************************************************************************************



(function($){
	$.fn.slidepanel = function(options) {
		var defaults = {
			pause: 5,
			start: 0,
			autoPlay:true,
			loop:true,
			height:null,
			playBtn:null,
			pauseBtn:null,
			nextBtn:null,
			prevBtn:null,
			slideButtons:null,
			slideButtonsAutoCreate:true, //if this is set to false, you should include a class for slideButtonsClass
			slideButtonsClass:"button",
			slideButtonsSelectedClass:"selected",
			endOfLoopClass:"endOfLoop",
			grouped:true, // this only applies to slide transitioned slidepanels, works with regular or irregular sizes.
			trans:'fade',
			transSpeed:500,
			externalAction:function(){}
		};
		
		var options = $.extend(defaults, options);
	
		return this.each(function() {
			var parent=this;
			
			var current=options.start;
			var prev=null;
			var playStatus=true;
			var slideButtons=null;
			
			//  TIMER ***********************************************************************************
			//
			//  Creates a empty DOM element used simply for transitions...
			//
			//  *****************************************************************************************
			
			$(this).append("<div class='ejb_timer'></div>");
			var timer=$(this).children('.ejb_timer');
			
			
			
			//  SETUP SLIDEPANEL *************************************************************************
			//
			//  Since the 2 transition types supported require very different DOM settings, this code will 
			//  run though and set them up accordingly.
			//
			// *******************************************************************************************
			
			
			
			function setup(){
				var temp=$(parent).children('li'); // use children so a slidepanel of slidepanels can be made
				if (options.trans.toLowerCase()=='fade'){
					$(temp).css({
						'display':'none','position':'absolute'
					});
					//$(temp[current]).css('display','block');
				}
				if (options.trans.toLowerCase()=='slide'){
					$(temp).css({
						'float':'left'
					});
					var element = document.createElement("div");
					$(parent).css({'overflow':'hidden'});
					$(element).css('width',500000);
					$(temp).wrapAll($(element));
					var panelWidth=$(parent).width();
					var widthIndex=0;
					var distanceTillNextSlide=0;
					$(temp).removeClass('slidePanelMarker');
					$(temp).each(function(){
						$(this).data('position',{left:widthIndex});
						var oldWidth=widthIndex;
						widthIndex=parseInt($(this).outerWidth(true))+widthIndex;
						if (options.grouped){
							if (widthIndex>distanceTillNextSlide) {
								$(this).addClass('slidePanelMarker');
								distanceTillNextSlide=oldWidth+panelWidth;
							}
						}
					});
					if (options.grouped){
						$(temp[0]).addClass('slidePanelMarker');
						temp=$(parent).find('.slidePanelMarker');
					}
				}
				return(temp);
			}
			var obj=setup();
			
			//  DEFAULT BUTTONS (optional) **************************************************************
			//
			//	These buttons are not required for the slidepanel to function, as it turns out you never
			//  are required to use these, they do however receive some extra functionality you would
			//  not receive otherwise. example: the next and previous buttons will fade dependins on 
			//  the avalibily of the next or previous slides (you never see this if the slidepanel is set
			//  to loop).
			//
			//  *****************************************************************************************
			
			if (options.playBtn){
				$(options.playBtn).click(function(){
					slidePlay(true);
				});
			}
			if (options.pauseBtn){
				$(options.pauseBtn).click(function(){
					slidePlay(false);
				});
			}
			if (options.nextBtn){
				$(options.nextBtn).click(function(){
					slideNext();
				});
			}
			if (options.prevBtn){
				$(options.prevBtn).click(function(){
					slidePrev();
				});
			}
			if (options.slideButtons){
				for (i=0;i!=obj.length;i++){
					var element = document.createElement("div");
					$(element).addClass(options.slideButtonsClass);
					$(element).data('slideIndex',i);
					$(options.slideButtons).append($(element));
				}
				slideButtons=$('.'+options.slideButtonsClass);
				$(slideButtons).click(function(){
					if ($(this).data('slideIndex')!=current){
						current=$(this).data('slideIndex');
						$(timer).stop(true);
						loadSlide(current);
					}
				});
			}
			
			if (!options.slideButtonsAutoCreate){
				slideButtons=$('.'+options.slideButtonsClass);
			}
			
			function loopStatus(cur){
				if (cur<=0) {
					$(options.prevBtn).addClass(options.endOfLoopClass);
				}else{
					$(options.prevBtn).removeClass(options.endOfLoopClass);
				}
				if (cur>=obj.length-1) {
					$(options.nextBtn).addClass(options.endOfLoopClass);
				}else{
					$(options.nextBtn).removeClass(options.endOfLoopClass);
				}
			}
			
			//  TRANSITIONS ********************************************************************************
			//
			//  
			//
			//  ********************************************************************************************
			
			
			function animateOut(who){
				switch(options.trans.toLowerCase()){
					case 'fade':$(who).fadeOut(options.transSpeed);break;
					case 'slide':break;
				}
			}
			
			function animateIn(who){
				switch(options.trans.toLowerCase()){
					case 'fade':$(who).fadeIn(options.transSpeed);break;
					case 'slide':
						$(who).parent().animate({marginLeft:-$(who).data('position').left},options.transSpeed);
						break;
				}
			}
			
			
			
			//  SLIDE FUNCTIONS ***************************************************************************
			//
			//  these functions are used to manipulate the slide show
			//
			//  *******************************************************************************************
			
			
			function slidePlay(status){
				if(status){
					$(timer).stop(true);
					options.autoPlay=true;
					$(timer).fadeTo(options.transSpeed,100,function (){
						current++;
						if (current>=obj.length){
							current=(options.loop)?0:obj.length-1;
							loadSlide(current);
						}else{
							loadSlide(current);
						}
					});
				}else{
					options.autoPlay=false;
					$(timer).stop(true);
				}
			}
			
			
			function slidePrev(){
				current--;
				$(timer).stop(true);
				if (current<0) {
					current=(options.loop)?obj.length-1:0;
					if (options.loop) loadSlide(current);
				}else{
					loadSlide(current);
				}
			}
			
			function slideNext(){
				current++;
				$(timer).stop(true);
				if (current>obj.length-1) {
					current=(options.loop)?0:obj.length-1;
					if (options.loop) loadSlide(current);
				}else{
					loadSlide(current);
				}
			}
			
			function loadSlide(which){
				//if(which!=current){
					animateOut(obj);
					animateIn(obj[which]);
				//}
				
				if (!options.loop) loopStatus(which);
				if (slideButtons){
					$(slideButtons).removeClass(options.slideButtonsSelectedClass);
					$(slideButtons[which]).addClass(options.slideButtonsSelectedClass);
				}
				
				try {
					options.externalAction();
				}
				catch(err){
					//alert(err);
				};
				
				if (options.autoPlay){
					$(timer).fadeTo(options.pause*1000,100,function (){
						current++;
						if (current>=obj.length){
							current=(options.loop)?0:obj.length-1;
							loadSlide(current);
						}else{
							loadSlide(current);
						}
					});
				}
			}
			
			loadSlide(current);
			
			
			
			//  BINDING EVENTS TO THE SLIDESHOW  **********************************************************
			//
			//  these can be referenced from outside, makikng it really easy to create a custom interface
			//  that can reference the slideshow.
			//
			//*********************************************************************************************
			//
			// #who = the slide show to be effected by the calls.
			// number = the slide index to load.
			//
			
			// CALL: $('#who').trigger('loadSlide', number);
			
			$(this).bind('loadSlide',function(event,slideNumber){
				current=slideNumber;
				loadSlide(slideNumber);
			});
			
			// CALL: $('#who').trigger('slideNext');
			
			$(this).bind('slideNext',function(event){
				slideNext();
			});
			
			// CALL: $('#who').trigger('slidePrev');
			
			$(this).bind('slidePrev',function(event){
				slidePrev();
			});
			
			// CALL: $('#who').trigger('slidePrev');
			
			$(this).bind('slidePlay',function(event,status){
				slidePlay(status);
			});
			
			$(this).bind('changeSetting',function(event,obj){
				options[obj.setting]=obj.value;
			});
			
			
			// addslide doesn't really work well with the slide transition. The numbers get all messed up. I tried, but
			// im really not all that interested, don't think it would add too much. Keeping the code incase i change my mind.
			// //addSlide should only be used if your autoplaying the slidepanel or the user has an next-previous button
			// //anything that required dynamic creation of controls doesn't work with this call yet, if ever.
			
			/*$(this).bind('addSlide',function(event,what){
				var element=$(what);
				if (options.trans.toLowerCase()=='fade'){
					$(element).css({
						'display':'none','position':'absolute'
					});
				}
				if (options.trans.toLowerCase()=='slide'){
					$(element).css({
						'float':'left'
					});
				}
				var temp=$(this).append(element);
				obj=$(temp).find('li');
			});*/
			
		});
	}
	
})(jQuery);