/* 
Mimikslide - a simple ul li slideshow plugin for jQuery
Version: 1.0
2011-05-23

Author: Kim Gunnarsson
E-mail:	hello@kimgunnarsson.com 
URL:	http://kimgunnarsson.com

==== DESC ====

A simple container with an ul, some li, and 2 buttons is all you need to start sliding!
uses jQuery Easing 1.3 http://gsgd.co.uk/sandbox/jquery/easing/
minimal css for easy customization.


==== INSTALLATION ====

1. 	add jQuery
2. 	add the plugi
3. 	call mimikslide(); on your container like this:
	$('.container').mimikslide();

4. use default settings or use custom settings like this:

	$('.container').mimikslide({
		buttonleft: 	$('a.left'),
		buttonright: 	$('a.right'),
		randomize: 	false,
		slidespeed: 	500,
		easingtype: 	'easeInOutSine',
		autoslide: 	false,
		direction:	'right',
		pause: 		1000
	});

5. see bellow for markup and settings, basiclly just give your li a width and height

==== SETTINGS ====
This is the default settings
	buttonleft: 	$('a.left'),		// define the button-left
	buttonright: 	$('a.right'),		// define the button-right
	randomize: 		false,		// true or false, if you want to randomize your li order
	slidespeed: 	500, 			//set the speed of the slideanimation in milliseconds
	easingtype: 	'easeInOutSine', 	//select easing http://gsgd.co.uk/sandbox/jquery/easing/
	autoslide: 		false, 		// true or false, if you want it to autoslide
	direction:		'right', 	// left or right, select slide direction if autoslide is true
	pause: 			1000,		// pause between slides in milliseconds if autoslide is true


/*====	HTML MARKUP ====
	<div class="container">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
		<a class="right" href="#">→</a>
		<a class="left" href="#">←</a>
	</div>

	
==== CSS EXAMPLE====
	.container{
		overflow:hidden;
		width: 1000px; //same as li
		height: 250px; //same as li
	}
	
	.container ul{
		list-style: none;
	}
	.container ul li {
		float: left;
		width: 1000px;
		height: 250px; 
	}

*/


//==== PLEASE DONT EDIT====
(function($){
   $.fn.mimikslide = function(options) {
      options = $.extend({
		container: 		$(this),	// Define container for slider
		buttonleft: 	$('.slide-left'),		// define the button-left
		buttonright: 	$('.slide-right'),		// define the button-right
		randomize: 		true,		// true or false, if you want to randomize your li order
		slidespeed: 	500, 			//set the speed of the slideanimation in milliseconds
		easingtype: 	'easeInOutSine', 	//select easing http://gsgd.co.uk/sandbox/jquery/easing/
		autoslide: 		false, 		// true or false, if you want it to autoslide
		direction:		'right', 	// left or right, select slide direction if autoslide is true
		pause: 			1000,		// pause between slides in milliseconds if autoslide is true
      }, options); 

		return this.each(function () {
		var container 	=	options.container
		var buttonleft 	=	options.buttonleft
		var buttonright =	options.buttonright
		var randomize	= 	options.randomize
		var slidespeed 	= 	options.slidespeed
		var easingtype 	=	options.easingtype 
		var autoslide 	= 	options.autoslide
		var direction 	=	options.direction
		var pause 		=  	options.pause
		
		// find the ul in the container
		var slideul = container.children('ul');
		//get the with of the li
		var liwidth = slideul.children('li').width();
		//get how many li
		var howmany = slideul.children('li').length;
		//set maxslide margins for animation and ul
		var maxslide = (howmany-1)*liwidth;
		//set the ul width
		slideul.css( "width",(howmany)*liwidth+'px');
		
		// slide to the right!
		function slideright() {
			var siffra = $(slideul).css("margin-left").replace("px", "");
			if (siffra == -750) {
				$(buttonright).unbind('click');
				slideul.children('li:last').after(slideul.children('li:first'));
				$(slideul).css( "marginLeft",'-500px' );
				$(slideul).animate({marginLeft:'-='+liwidth}, slidespeed, function() {
					$(buttonright).bind('click', slideright);
				});
			}
			else{ 
				$(buttonright).unbind('click');
				$(slideul).animate({marginLeft:'-='+liwidth}, slidespeed, function() {
					$(buttonright).bind('click', slideright);
				});
			}
			return false;
		}
		
		// slide to the left!
		function sliderleft() {
			var siffra = $(slideul).css("margin-left").replace("px", "");
			if (siffra == 0 ) {
				$(buttonleft).unbind('click');
				slideul.children('li:first').before(slideul.children('li:last'));
				$(slideul).css( "marginLeft",'-250px');
				
				$(slideul).animate({marginLeft:'+='+liwidth}, slidespeed, function() {
					$(buttonleft).bind('click', sliderleft);$(slideul).css( "marginLeft",'0');
				});
			}
			else{
				$(buttonleft).unbind('click');
				$(slideul).animate({marginLeft:'+='+liwidth}, slidespeed, function() {
					$(buttonleft).bind('click', sliderleft);
				});
			}
			return false;
		}
		
		// DOM-ready
		$(function(){
			// Bind functions to buttons
			$(buttonright).bind('click', slideright);
			$(buttonleft).bind('click', sliderleft);
			
			if (randomize == true) {
				//Randomize the list
				$(slideul).each(function(){
					var $ul = $(this);
					var $liArr = $ul.children('li');
					$liArr.sort(function(a,b){
						// make wierd math stuff here
						var temp = parseInt( Math.random()*10 );
						var isOddOrEven = temp%2;
						var isPosOrNeg = temp>4 ? 1 : -1;
						return( isOddOrEven*isPosOrNeg );
					})
					.appendTo($ul);            
				});
			}
			// if autoslide is on
			if (autoslide == true) {
				var tid;
				$(function() {
					tid = setTimeout(knapp, pause);
				});
				
				function knapp(event) {
					if (direction == "right"){
					slideright();
				} else if (direction == "left"){
					sliderleft()
				}
				tid = setTimeout(knapp, pause);
				}	
			}
			
		});	//closing DOM actions
			
      });
   };
})(jQuery);