/**
* jquery.c42.scrollgallery.js
* 
* A scrolling gallery widget.
* 
* @options:
* - slideClass : CSS class for all slides
* - listItemClass : CSS class for each list item on each slide
* - url : url for gallery view, defaults to : scrollgallery.html
*/

$.widget('ui.scrollgallery', {

	options: {
		slideClass: "scroller-slide",
		listItemClass: "client",
		url: "shared/html/scrollgallery.html",
		ready: function(self) { }
	},
	
	_create: function() {
		var self = this;
		var element = this.element;
	
		element.addClass('scrollgallery');
		
		// Load the view URL contents as HTML then initialize the widget
		element.load(self.options.url, function() {
			var o = self.options;

			var totalWidth = 0;
			var positions = [];
			var scrollCounter = 1;
			var currentSlide;
			var nextSlide;
			var previousSlide;
			var slideClass = element.find("."+o.slideClass).length;

			// find sum total width of all slides
			element.find("."+o.slideClass).each(function(i){
				positions[i]= totalWidth;
				totalWidth += jQuery(this).width();
			
				// If slide has no width, set default width of 720px wide
				if(!jQuery(this).width()){
					jQuery(this).width(720);
				}
			});

			if(scrollCounter <= 1){element.find("#scroller-previous").addClass("scroller-nav-disabled");}
		
			element.find("#scroller-content").width(totalWidth);
			
			element.find("."+o.slideClass+":first").addClass("slide-visible");
			element.find("#scroller-previous").unbind("click").click(function(){
				element.find("#scroller-next").removeClass("scroller-nav-disabled");
				currentSlide = element.find(".slide-visible").attr("id");
				previousSlide = element.find("#"+currentSlide).prev().attr("id");
				if(!previousSlide || previousSlide == undefined){ 
					previousSlide = currentSlide;
				}else{
					element.find("#scroller-previous").removeClass("scroller-nav-disabled");
					element.find("#"+currentSlide).removeClass("slide-visible");

					element.find("#"+previousSlide).addClass("slide-visible");

					scrollCounter--;

					if(scrollCounter <= 1){ scrollCounter = 1;}

					element.find("."+o.slideClass+" ul").animate({marginLeft:-positions[scrollCounter-1]+"px"}, 500);
					if(scrollCounter <= 1){element.find("#scroller-previous").addClass("scroller-nav-disabled");}
				}
				
			});
		
		
			element.find("#scroller-next").unbind("click").click(function(e){
				element.find("#scroller-previous").removeClass("scroller-nav-disabled");
				currentSlide = element.find(".slide-visible").attr("id");
				nextSlide = element.find("#"+currentSlide).next().attr("id");
				if(!nextSlide || nextSlide == undefined){ 
					nextSlide = currentSlide;
				}else{
					element.find("#scroller-next").removeClass("scroller-nav-disabled");
					element.find("#"+currentSlide).removeClass("slide-visible");

					element.find("#"+nextSlide).addClass("slide-visible");
					scrollCounter++;

					if(scrollCounter > slideClass){ scrollCounter = scrollCounter / 2; }

					element.find("."+o.slideClass+" ul").animate({marginLeft:-positions[scrollCounter-1]+"px"}, 500);
					if(scrollCounter >= slideClass){element.find("#scroller-next").addClass("scroller-nav-disabled");}
				}
			});

			
			self.options.ready && self.options.ready.call(self);
		});
		
		
	}
	
});