//
//
//	simpleSlide 1.1
//
//	website:http://www.simplesli.de/
//	author: David Drew
//	email:  david@ddrewdesign.com
//	
//
//	simpleSlide is a jQuery plugin that addresses the problem of lack of designer control over
//  their slideshow plugin. The philosophy was to create a plugin that would take care of the
//	mundane issues of instantiating a slideshow plugin, but make it easy for a designer to
//	manipulate the parts of the process that they would want control over, such as visual
//	treatment, integration and additional functionality.
//
//	Parameters
//	----------
//
//	simpleSlide is instantiated, at minimum, like this:
//	
//	simpleSlide();
//
//	Upon activating this function, simpleSlide goes into your DOM and finds several key
//	elements. The simpleSlide HTML structure (and key elements) will look like this:
//
//	<div class="simpleSlide-window" rel="group_name">
//		<div class="simpleSlide-tray" rel="group_name">
//			<div class="simpleSlide-slide" rel="group_name">
//				/* Individual slide content. If content is merely an image, simpleSlide will
//				 * automatically configure each slide to accommodate the slide. If you have
//				 * opted to create content that doesn't have an apparent width or height, it
//				 * it may be in your best interest to give this content a defined width and
//				 * height. You do not, however, need to define the "simpleSlide-slide" class'
//				 * width and height. The function will take care of that for you.
//				 */
//			</div>
//		</div>
//	</div>
//
//	The user may also instantiate a graphical representative element vis-a-vis the simpleSlide
//	status element. This element is entirely optional, and will or will not be placed based on the
//	user's desire to place the following elements into their HTML:
//
//	<div class="simpleSlideStatus-tray" rel="group_name">
//		<div class="simpleSlideStatus-window" rel="group_name"></div>
//	</div>
//	
//	Please visit http://www.simplesli.de and click on "features" for more configuration information.
//
//	It should be noted, however, that after simpleSlide() has processed this structure, each slide
//  will house an "alt" attribute with an integer as its value. This integer (counting up from '1')
//	represents that slide's "page" placement among the slides in the window. This is to help the
//	designer set up functionality that allows page jumping.
//
//	The buttons that control the slideshow may be used in whatever manner you wish, and anywhere
//	in the site's structure that you wish to place them. They only must have the same "rel" as
//	the window (and accompanying elements) you wish for them to control. simpleSlide() automatically
//	treats them as clickable regions. "jump-to" is special in that you also have to pass the
//	desired "jump-to" page through the "alt" attribute.
//	
//	<div class="left-button" rel="group_name"></div>
//	<div class="right-button" rel="group_name"></div>
//  <div class="jump-to" rel="group_name" alt="1"></div>
//
//	The user is also allowed several options that they may customize. They are instantiated like this:
//	
//	simpleSlide({
//		'status_width': 20,				// Integer. Sets the width of the status slideshow's window element.
//		'status_color_inside': '#000', 	// String. Sets color of status window element.
//		'status_color_outside': '#FFF', // String. Sets color of status tray element.
//		'set_speed': 500, 				// Integer. Sets speed of all animations. Represented in milliseconds.
//		'callback': 'function()'		// String. Sets callback to actuate after simpleSlide initial config.
//	});
//
//	If you have any further questions on the usage of simpleSlide, or suggestions on making it better,
//	please e-mail me at david@ddrewdesign.com, or visit http://www.ddrewdesign.com/contact/ to email me.
//	Thank you for using this plugin, and I hope you enjoy it. I had a blast making it.
//
// 

function simpleSlide(incoming_options) {
	
	var options = {
		'status_width': 20,
		'status_color_inside': '#000',
		'status_color_outside': '#ccc',
		'set_speed': 500,
		'callback': 'function()'
	};
	
	/* Set variables; if none passed, set default */
	if(typeof(incoming_options.status_width) == 'number') {
		options.status_width = incoming_options.status_width;
	};
	
	if(typeof(incoming_options.status_color_inside) != 'undefined' && typeof(incoming_options.status_color_inside) != '') {
		options.status_color_inside = incoming_options.status_color_inside;
	};
	
	if(typeof(incoming_options.status_color_outside) != 'undefined' && typeof(incoming_options.status_color_outside) != '') {
		options.status_color_outside = incoming_options.status_color_outside;
	};
	
	if(typeof(incoming_options.set_speed) == 'number') {
		options.set_speed = incoming_options.set_speed;
	};
	
	if(typeof(incoming_options.callback) == 'function') {
		options.callback = incoming_options.callback;
	};

	$.options = options;

	$('.simpleSlide-slide').css({
		'opacity': '0'	
	});
	
	$('.simpleSlide-window').prepend('<span id="ssLoading" style="color: #808080;font-family:Helvetica, Arial, sans-serif;font-size: 12px; margin: 10px 0 0 10px;display: block">Loading slides...</span>');
	
	var no_of_images = $('.simpleSlide-slide img').size();
		
	if(no_of_images > 0) {
		
		var images = new Array();
		var i = 0;
		$('.simpleSlide-slide img').each( function() {
			images[i] = $(this).attr('src');
			i++;
		});
		
		i = 0;
		
		$(images).each( function(){
			var imageObj = new Image();
			imageObj.src = images[i];
			$(imageObj).load( function() {
				no_of_images--;
				i++;
				if(no_of_images == 0){
					ssInit();
				};
			});
		});
	} else {
		ssInit();
	};	
};

function ssInit(){
	/* Set the dimensions of each simpleSlide window and tray
	 * based on the size of the first 'slide' inside that window.
	 * Every slide within a given tray/window should be uniform in dimensions.
	 * Also, set Status Window size, if it's being used. Fire callback when finished.
	 */
	$('.simpleSlide-window').each( function() {
		var window_contents = $(this).html();	
		var cleaned_contents = removeWhiteSpace(window_contents);
		$(this).html(cleaned_contents);
													
		var slide_count = $(this).find('.simpleSlide-slide').size();		
		$(this).find('.simpleSlide-slide').css('display','block');
		var window_height = $(this).find('.simpleSlide-slide').first().outerHeight();
		$(this).find('.simpleSlide-slide').css({
			'display':'inline',
			'float':'left'
		});
		var window_width = $(this).find('.simpleSlide-slide').first().outerWidth();		
		
		var window_rel = $(this).attr('rel');
				
		$(this).css({
			'height': window_height,
			'width': window_width,
			'position': 'relative'
		});
		
		$(this).css('overflow','hidden');
		
		setTraySize(this, slide_count, window_width);
		
		setSimpleSlideStatus(window_rel, window_height, window_width, slide_count);
		
		setPaging(this);

		$(this).find('#ssLoading').remove();
				
		$(this).find('.simpleSlide-slide').animate({
			'opacity': '1'
		}, 300, "swing");
	
	});
	
	/* Fire callback after completion of image load and simpleSlide initialization */
	if(typeof($.options.callback) == 'function'){
		$.options.callback.call(this);
	};
	
	/* Gives each slide an 'alt' with the slide number */
	function setPaging(this_window) {
		var page_count = 1;
		
		$(this_window).find('.simpleSlide-slide').each( function() {
			$(this).attr('alt', page_count);
			page_count++;
		});
	};
	
	/* Sets size of the "tray" that holds the "slides" */
	function setTraySize(slideWindow, count, viewer_width) {
		
		var slider_width = count * viewer_width;
		
		$(slideWindow).find('.simpleSlide-tray').css({
			'width': slider_width + 'px'
		});
		
		$(slideWindow).find('.simpleSlide-slide').css('display','inline-block');
		
	};	
	
	/* If user chooses to establish Status Window, this function will set
	 * the dimensions of the window based on the desired width.
	 * The window (and its inherent slide's) dimensions are a relative factor
	 * of the main window's size, so the status window will be proportionally
	 * the same as the main window and its tray.
	 */
	function setSimpleSlideStatus(this_rel, height, width, image_count) {
			
		var ratio = $.options.status_width/width;
		var status_height = ratio*height;
		
		$('.simpleSlideStatus-tray[rel="' + this_rel + '"]')
			.css({
				 'width': $.options.status_width * image_count,
				 'height': status_height,
				 'background-color': $.options.status_color_outside
			});
		
		$('.simpleSlideStatus-window[rel="' + this_rel + '"]')
			.css({
				 'width': $.options.status_width,
				 'height': status_height,
				 'background-color': $.options.status_color_inside
			});
		
		if(jQuery.support.opacity){
			$('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]')
			   .css({
				   'opacity': '.5',
				   'background-color': $.options.status_color_inside
			});
		};
		   
		if(!jQuery.support.opacity){
			$('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]').css({
				'filter': 'alpha(opacity=50)',
				'background-color': $.options.status_color_inside
			});
		};
	};
					
	/* Actuates upon the clicking of a left- or right-button classed element */
	$('.left-button, .right-button, .jump-to').live('click', function() {
		
		var rel = $(this).attr('rel');
		
		if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) {
			
			simpleSlideAction(this, rel);
		};
	
	});
};

function simpleSlideAction(action, rel_no) {
	var move_speed = $.options.set_speed;
	var image_count = $('.simpleSlide-window[rel="' + rel_no + '"]').find('.simpleSlide-slide').size();
	var window_width = $('.simpleSlide-window[rel="' + rel_no + '"]').innerWidth();
	var status_window_width = $('.simpleSlideStatus-window[rel="' + rel_no + '"]').innerWidth();
	var status_tray_width = status_window_width * image_count;
	var current_tray_margin = parseInt($('.simpleSlide-tray[rel="' + rel_no + '"]').css('marginLeft'), 10);
	var current_status_window_margin = parseInt($('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').css('marginLeft'), 10);
	var current_status_tray_margin = parseInt($('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]').css('marginLeft'), 10);
	
	if($(action).is('.jump-to')) {
		var to_page = $(action).attr('alt');
		var j_margin = (to_page - 1) * (window_width * (-1));
		var st_margin = (to_page - 1) * (status_window_width * (-1));
		var sw_margin = (to_page - 1) * (status_window_width);
		
		move(j_margin, sw_margin, st_margin);
	};
	
	if($(action).is('.left-button')) {		
		if(current_tray_margin == 0) {
			var j_margin = current_tray_margin - ((image_count - 1) * window_width);
			var st_margin = current_status_tray_margin - ((image_count - 1) * status_window_width);
			var sw_margin = current_status_window_margin + ((image_count - 1) * status_window_width);			
		} else {
			var j_margin = current_tray_margin + window_width;
			var st_margin = current_status_tray_margin + status_window_width;
			var sw_margin = current_status_window_margin - status_window_width;			
		};
		
		move(j_margin, sw_margin, st_margin);
	};
	
	if($(action).is('.right-button')) {
		if(current_tray_margin == (image_count - 1) * (window_width * -1)) {
			var j_margin = 0;
			var st_margin = 0;
			var sw_margin = 0;					
		} else {
			var j_margin = current_tray_margin - window_width;
			var st_margin = current_status_tray_margin - status_window_width;
			var sw_margin = current_status_window_margin + status_window_width;			
		};
		
		move(j_margin, sw_margin, st_margin);
	};		

	function move(new_margin, new_swindow_margin, new_stray_margin) {
		$('.simpleSlide-tray[rel="' + rel_no + '"]').animate({
			'marginLeft': new_margin
		}, move_speed, "swing");
		
		$('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]')
			.animate({
				'marginLeft': new_stray_margin				 
		}, move_speed, "swing");
		
		$('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').animate({
				'marginLeft': new_swindow_margin		 
		}, move_speed, "swing");		
	};		
};


function removeWhiteSpace(raw) {
	var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, "");
	return cleaned_string;
};