(function($){	
	//main function
	$.fn.divSlideShow = function(customOptions) {	
		//default options
		var options = {
			width:200, 
			height:100, 
			arrow:"begin", 			
			delay:5000, 
			loop:1,
			leftArrowClass:"",
			rightArrowClass:"",
			//leftArrowClass:"ui-icon ui-icon-circle-triangle-w",
			//rightArrowClass:"ui-icon ui-icon-circle-triangle-e",
			slideContainerClass:"", 
			controlClass:"",
			controlActiveClass:"",
			//controlClass:"ui-state-default ui-corner-all", 
			//controlActiveClass:"ui-state-hover",
			controlHoverClass:"",
			controlContainerClass:"",
			separatorClass:"",
		    defaultPage:1,
			gotoCallback: ""
		};

		//override options
		if(customOptions)
			$.extend(options, customOptions);

		return this.each(function(){
			//make slideshow
			this.options = options;
			$.divSlideShow(this);
		});
	};

	$.divSlideShow = function(slideShow) {
		var options = slideShow.options;
		var gotoidx = options.defaultPage - 1;

		var numSlide = $(slideShow).children('.slide').length;			
		$(slideShow).css( { 'width':options.width ,  'overflow':'hidden', 'display':'block' } );		

		//wrap all slides with inner conatiner
		$(slideShow).children().wrap('<div class="dssSlide"></div>').removeClass("hide");
		$(slideShow).children('.dssSlide').wrapAll('<div class="dssSlideContainer" page=0 max='+numSlide+'/>');
		$(slideShow).find('.dssSlide').css( {'float':'left', 'width':options.width, 'height':options.height, 'overflow-y':'auto' } );

		for(var i = 0; i < numSlide; i++) //number buttons
			$(slideShow).append('<div class="dssControl" page='+i+'>'+(i+1)+'</div>');

		//styles for inner container and controls
		$(slideShow).find('.dssSlideContainer')
		  .css( {'width':options.width * numSlide, 'height':options.height, 'overflow':'hidden'} )
		  .addClass(options.slideContainerClass);

		$(slideShow).find('.dssControl')
			.addClass(options.controlClass)
			.css('float','left')
			.hover(function(){ $(this).toggleClass(options.controlHoverClass);})
			.wrapAll('<div class="dssControlContainer"/>');

		$($(slideShow).find('.dssControl')[gotoidx]).addClass(options.controlActiveClass);

		$(slideShow).find('.dssControlContainer')
			.css({'height':'100%', 'overflow':'hidden'})
			.addClass(options.controlContainerClass);

		if (gotoidx != 0) {
			var width = $(slideShow).find('.dssSlideContainer .dssSlide').width();	
			$(slideShow).find('.dssSlideContainer').css({'margin-left':-gotoidx*width});
		}
		
		//controls click handler
		$(slideShow).find('.dssControl').click(function(){
			var gotoPage = parseInt($(this).attr('page'));
			$.divSlideShow.slideTo(slideShow, gotoPage);

			if (options.gotoCallback && typeof options.gotoCallback === 'function') {
				options.gotoCallback(gotoPage);
			}
		});
	};


	$.divSlideShow.slideTo = function(slideShow, gotoPage, queue) {
		//remove auto-slide
		if( !queue )
			$(slideShow).find('.dssSlideContainer').clearQueue();

		var options = slideShow.options;

		//validate gotoPage
		var max = $(slideShow).find('.dssSlideContainer').children().length;
		if(gotoPage >= max)
			gotoPage = max - 1;
		if(gotoPage < 0)
			gotoPage = 0;

		//get width
		var width = $(slideShow).find('.dssSlideContainer .dssSlide').width();		

		//manage control look and store current page as attribute, to be executed just before animation
		$(slideShow).find('.dssSlideContainer').queue(function(){
			$.divSlideShow.manageControls(slideShow, gotoPage);
			$(this).attr('page', gotoPage);
			$(this).dequeue();
		});

		//animate
		$(slideShow).find('.dssSlideContainer').animate(	{'margin-left':-gotoPage*width}	);
	};

	$.divSlideShow.manageControls = function(slideShow, page) {
		var options = slideShow.options;
		
		$(slideShow).find('.dssControl').each(function(){			
			if( $(this).attr('page') != page )
				$(this).toggleClass(options.controlActiveClass, false);
			else 
				$(this).toggleClass(options.controlActiveClass, true); 
		});
	};

})(jQuery);