/**
 * jQuery Slidy - A Transition Plugin - http://wbotelhos.com/slidy
 * ---------------------------------------------------------------------------------
 *
 * jQuery Slidy is a plugin that generates a customizable transitions automatically.
 *
 * Licensed under The MIT License
 *
 * @version         0.2.0
 * @since           11.16.2010
 * @author          Washington Botelho dos Santos
 * @documentation   wbotelhos.com/slidy
 * @twitter         twitter.com/wbotelhos
 * @license         opensource.org/licenses/mit-license.php MIT
 * @package         jQuery Plugins
 *
 * Usage with default values:
 * ---------------------------------------------------------------------------------
 * $('#banner').slidy();
 *
 * <div id="banner">
 *   <img src="image-1.jpg"/>
 *   <img src="image-2.jpg"/>
 *   <img src="image-3.jpg"/>
 * </div>
 *
 */

;(function($) {

	$.fn.banner = function(settings) {

		if (this.length == 0) {
			debug('Selector invalid or missing!');
			return;
		} else if (this.length > 1) {
			return this.each(function() {
				$.fn.banner.apply($(this), [settings]);
			});
		}

		var opt			= $.extend({}, $.fn.banner.defaults, settings),
			$this		= $(this),
			id			= this.attr('id'),
			elements	= $this.children(opt.children),
			quantity	= elements.length,
			images		= (opt.children == 'img') ? elements : elements.find('img'),
			timer		= 0,
			isAnimate	= false;

		if (id === undefined) {
			id = 'bann-' + $this.index();
			$this.attr('id', id); 
		}

		$this
		.data('options', opt)
		.css({
			'cursor':	opt.cursor,
			'height':	opt.height + 'px',
			'overflow':	'hidden',
			'position':	'relative',
			'width':	opt.width + 'px'
		});

		elements.each(function(i) {
			$(this)
			//.css({ 'position': 'absolute', 'z-index': quantity - i })
			.css({ 'position': 'absolute'})
			.attr('id', $this.attr('id') + '-' + (i + 1));
		});

		images.attr({ height: opt.height, width: opt.width }).css('border', '0');

		if (opt.children == 'a' && opt.target != '') {
			elements.attr('target',	opt.target);
		}

		elements.hide().first().show();

		
		if (opt.menu != false) {
			$menu = $('<ul/>', { id: id + '-bann-menu', 'class': 'bann-menu' }).appendTo($(opt.menu));
		}
		else {
			$menu = $('<ul/>', { id: id + '-bann-menu', 'class': 'bann-menu' }).insertAfter($this);
		}
		
		var stop = function() {
			clearTimeout(timer);
		}, overBanner = function() {
			stop();
		}, overMenu = function(thiz) {
			stop();

			var $this		= $(this),
				index		= $this.index(),
				$current	= $this.parent().children('.bann-link-selected'),
				last		= $current.index();

			if (index != last) {
				$current.removeClass('bann-link-selected');
				$this.addClass('bann-link-selected');

				change(last, index);
			}
		}, outBanner = function(thiz) {
			go($(thiz.target).parent('a').index());
		}, outMenu = function() {
			var $this		= $(this),
				index		= $this.index(),
				$current	= $this.parent().children('.bann-link-selected'),
				last		= $current.index();

			go(last);
		}, clickMenu = function(thiz) {
			stop();

			var $this		= $(this),
				index		= $this.index(),
				$current	= $this.parent().children('.bann-link-selected'),
				last		= $current.index();

			if (index != last) {
				$current.removeClass('bann-link-selected');
				$this.addClass('bann-link-selected');
			}

			change(last, index);
			//go(index);
		};

		if (opt.menu) {
			var target	= (opt.target != '') ? 'target="' + opt.target + '"' : '',
				menu	= '',
				parent,
				img;

			images.each(function() {
				img		= $(this);
				parent	= img.parent(opt.children);

				menu += '<li><a href="' + parent.attr(parent.is('a') ? 'href' : 'title') + '" onclick="return false;" ' + target + ' title=' + img.attr('alt') + '></a></li>';
			});

			$menu.html(menu);

			var	space	= parseInt((opt.width / quantity) + (quantity - 1)),
				diff	= opt.width - (space * quantity),
				links	= $menu.children('li');

			if (opt.action == 'mouseenter') {
				links.mouseenter(overMenu).mouseleave(outMenu);	
			} else 
			if (opt.action == 'click') {
				links.click(clickMenu);
			} else {
				debug('action attribute must to be "click" or "mouseenter"!');
				return;
			}

			links.first().addClass('bann-link-selected');
			
			if (opt.animation == 'slide' || opt.animation == 'fade') {
				links.mousemove(function() {
					var $this = $(this);

					if (!$this.hasClass('bann-link-selected')) {
						$this.mouseenter();
					}
				});
			}
		}

		go(0);

		if (opt.pause) {
			$this.mouseenter(overBanner).mouseleave(outBanner);
		}

		function go(index) {
			var total	= quantity - 1,
				last	= null;

			if (index > total) {
				index = 0;
				last = total;
			} else if (index <= 0) {
				index = 0;
				last = total;
			} else {
				last = index - 1;
			}

			change(last, index);

			timer =	setTimeout(function() {
					go(++index);
				}, opt.time);
		}

		function change(last, index) {
			if (!isAnimate) {
				isAnimate = true;

				selectMenu(index);
				if (opt.animation == 'fade') {
					elements
						.eq(last).fadeOut(opt.speed)
					.end()
						.eq(index).fadeIn(opt.speed, function() {
							//selectMenu(index);
							isAnimate = false;
						});
				} else if (opt.animation == 'slide') {
					elements.css('z-index', 0)
						.eq(index).css('z-index', quantity).slideDown(opt.speed, function() {
							elements.eq(last).hide();
							//selectMenu(index);
							isAnimate = false;
						});
				} else {
					elements
					.eq(last).hide()
					.end()
					.eq(index).show(0, function() {
						//selectMenu(index);
						isAnimate = false;
					});
				}
			}
		};

		function selectMenu(index) {
			if (opt.menu != false) {
				$(opt.menu + ' > ul.bann-menu').children().removeClass('bann-link-selected').eq(index).addClass('bann-link-selected');
			} else {
				$this.next('ul.bann-menu').children().removeClass('bann-link-selected').eq(index).addClass('bann-link-selected');			
			}
			
		};

		return $this;
	};

	function debug(message) {
		if (window.console && window.console.log) {
			window.console.log(message);
		}
	};

	$.fn.banner.defaults = {
		action:		'click', //mouseenter
		animation:	'fade', // normal, slide
		children:	'img', // tag name
		cursor:		'default',
		width:		540,
		height:		250,
		menu:		false,
		pause:		true,
		speed:		600,
		target:		'',
		time:		3000
	};

})(jQuery);