// IX_rotator plugin
// wrap it up with jQuery passed in as $ for name collision safety
(function($) {

	// plugin definition
	$.fn.IX_rotator = function(content,options) {

		// if the content didn't get created or isn't an object, bail now before errors get tossed
		if(content == undefined || typeof content !== "object") { return this; }

		// build main options before element iteration
		// extends exposed defaults property (see end of script)
		var opts = $.extend({}, $.fn.IX_rotator.defaults, options);

		// private variables	
		var $this 		= $(this).addClass(opts.classname || "rotator"), // the rotator container
			$slides		= $('ul.slides li', this), 									// the slides
			$thumbwrap 	= $('<ul class="thumbnails"></ul>'),			// the thumbnails
			current		= opts.show || 0,											// current displayed rotatee
			total		= $slides.length,												// total number of rotatees
			animating	= false,															// animation state; don't animate when this is true.
			timer		= 0;																	// used to reference a setTimeout
		var rotatorwidth = $this.width();
	

		// image preloading
		for(var i=0,length = content.length; i<length; i++) {
			$('<img>').attr("src", content[i].image.replace(/\s/g,"%20"));
			$('<img>').attr("src", content[i].thumbnail.replace(/\s/g,"%20"));
			$('<img>').attr("src", content[i].tooltip.replace(/\s/g,"%20"));
		}	
		// loop over content object and build out each rotatee	
		for(var j=0;j<total;j++) {	
			$slides.eq(j).css('background-image', 'url('+content[j].image+')').wrapInner('<div class="content"></div>').append('<div class="decorator"></div>');
			$('div.content').css('width', rotatorwidth-375);
			$thumbwrap.append($.fn.IX_rotator.thumb.replace(/<%=thumbnail%>/g, content[j].thumbnail.replace(/\s/g,"%20")));
			if ($slides.eq(j).height() > $this.height()) { $this.height($slides.eq(j).height()); }
		}
		$slides.height($this.height());
		
		
		// make the thumbnail navigation
		$this.append($thumbwrap);
		var $thumbs = $thumbwrap.find('li');
		$thumbs.each(function(i){
			var $this = $(this),
			left = $this.position().left + $this.offsetParent().position().left;
			$this.append($.fn.IX_rotator.tooltip.replace(/<%=tooltip%>/g, content[i].tooltip.replace(/\s/g,"%20")));
			
			if (left >= rotatorwidth-131) { var offset = (rotatorwidth-2-left-17)-117; $this.find('.content').css('margin-left', offset + 'px'); }
		});
		
		// hide all but the default rotatee
		$slides.not(':eq('+current+')').hide();
		$thumbs.eq(current).addClass('current');

		// thumbnail click behavior.
		var thumbClick = function(e){
			var speed = opts.autospeed || 7000;
			clearTimeout(timer);
			clearInterval($.fn.IX_rotator.rotate);
			cycle(e.data.next);
			timer = setTimeout(function(){ $.fn.IX_rotator.rotate = setInterval(function(){ $this.trigger('rotate'); },speed); }, opts.pause || 10000);
			$('.tooltip').attr('style','');
			$('.tooltip',this).hide();
		}

		// the cycler
		var cycle = function(next) {
			if (!animating) {
				animating = true;
				$slides.eq(current).fadeOut(600);
				$thumbs.eq(current).removeClass('current');
				current = typeof(next) != 'undefined' ? next : current == total-1 ? 0 : ++current;
				$slides.eq(current).fadeIn(800, function(){ animating = false;});
				$thumbs.eq(current).addClass('current');
			}
		};
		// start the auto rotating
		if(opts.auto) {
			var speed = opts.autospeed || 7000;
			$.fn.IX_rotator.rotate = setInterval(function(){ $this.trigger('rotate'); },speed);
		}
		//	


		// return and iterate
		return this.each(function(){
			$thumbs.each(function(index){$(this).bind('click', {next: index}, thumbClick);});
			$(this).bind('rotate',function() { 
				cycle();
				return false;
			});
		});
	}

	// exposed functions

	// default options
	$.fn.IX_rotator.defaults = {	
		transition : "fade",
		speed : 100,
		auto : true,
		autospeed : 7000, // time between auto-rotated slides
		pause: 10000 // pause after user selects slide before auto-rotate restarts
	};

	// inserted html templates
	$.fn.IX_rotator.thumb 	= '<li class="thumbnail" style="background-image:url(<%=thumbnail%>);"></li>';
	$.fn.IX_rotator.tooltip	= '<div class="tooltip"><span class="content" style="background-image:url(<%=tooltip%>);"></span></div>';


})(jQuery);