/**
 * jquery.slider.js
 *
 * jQuery apple style slider
 *
 * by Felipe Alcacibar <falcacibar@gmail.com>
 * based on the slider of 
 * http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
 *
 */

jQuery.fn.slider = function(settings) {
	var s = {
		'autoslide'	: 4 // seconds
		, 'menuHeight'	: 45
		, 'menuWidth'	: 60
		, 'height'	: null
	}

	jQuery.extend(s, settings);

	var totWidth	= 0;
	var positions	= new Array();	
	var current	= 0;

	var slideclones = this.find('> div').clone();
	var menuclones	= $();

	this.find('> ul > li').each(function(i) {
		menuclones = menuclones.add(
			$('<td>').append(
				jQuery(this).find('> *').clone()
			)
		);

	});

	this.addClass('slider');
	this.empty();

	slideclones.addClass('slide');
	menuclones.addClass('slider-menu-item');

	this.append( jQuery('<div>')
			.addClass('slides')
			.append(slideclones)
	);

	if(s.height) {
		this.find('> div.slides').height((s.height - s.menuHeight)); 
		this.height(s.height);
	}

	this.append( jQuery('<div>')
			.addClass('slider-menu')
			.append(jQuery('<table>')
				.attr({'cellpadding' : '0', 'cellspacing' : '0', 'border' : '0'})
				.append( jQuery('<tbody>')
					.append( jQuery('<tr>')
						.append( jQuery('<td>')
								.addClass('slider-menu-fbar')
								.html('&nbsp;')
								.height(s.menuHeight)
						).append(menuclones
							.height(s.menuHeight)
							.width(s.menuWidth)
							.find("> a")
								.height(s.menuHeight)
								.width(s.menuWidth)
							.end()
						)
					).height(s.menuHeight)
				)
				.addClass('slider-menu-table')
			)
			.height(s.menuHeight)
	);

	var mywidth = this.width(); 
	this.find('.slides .slide').each(function(i){
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		var me = $(this);
		if(me.width() < mywidth)
			me.width(mywidth);

		positions[i] = totWidth;
		totWidth += me.width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width()) 
			return jQuery.error("slider: Please, fill in width & height for all your images!");
		
	});
	
	this.find('.slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	this.find('.slider-menu > table > tbody > tr > td > a').click(function(e,keepScroll){
			if(!keepScroll) current = -1;

			/* On a thumbnail click */
			var me = $(this);

			me.parent().parent().find('> td.slider-menu-item').removeClass('active').addClass('inactive');
			$(this).parent().addClass('active');
			
			var pos = $(this).parent().prevAll('.slider-menu-item').length;

			me.parent().parent().parent().parent().parent().parent().find('> .slides').stop().animate({'marginLeft':-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
	});
	
	this.find('.slider-menu > table > tbody > tr > td.slider-menu-item:first').addClass('active').siblings().addClass('inactive');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	
	if(s.autoslide) {
		current = 0;
		var anchors	= this.find('> .slider-menu > table > tbody > tr > td.slider-menu-item > a');
		var asf = function() {
			if(current == -1) return false;
			
			anchors
				.eq(current % anchors.length)
				.trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
        
			current++;

			window.setTimeout(asf, s.autoslide * 1000);
		}

		window.setTimeout(asf, s.autoslide * 1000);
	};
}