
/*******************************************************************************
	jQuery.jadrotate (beta!)
	------------------------
	
	This is a simple ad rotator that will rotate a set of images. Takes in an object as a parameter
	of options:
		* interval 
			-> The time interval between the rotation of the images, the minimum is 3secs or 3000ms.
			   Defaults to 3000.
		* rotation
			-> This options specifies if the widget will rotate or not. Values are either 'on' or 'off'.
			   Defaults to 'on'.			   
	This is still in testing...
	
	@example
		conforms to the following markup:
		
		<script>
			$(function () {
				$.jadrotate({
					interval : 3000
				});
			});
		</script>
		
		<div id="jadrotate-box">
			<div>
				<ul id="jadrotate-list">
					<li class="jadrotate:activate(test-active) asdf asdff">advertisement 1</li>
					<li class="jadrotate:activate(test-active)">advertisement 2</li>
					<li class="asdf jadrotate:activate(test-active)  asdff">advertisement 3</li>
					<li class="jadrotate:activate(test-active)">advertisement 4</li>
					<li class="jadrotate:activate(test-active)">advertisement 5</li>
					<li class="asdf asdff jadrotate:activate(test-active)">advertisement 6</li>
				</ul>
			</div>
			<div style="float: right; padding-top: 20px;">
				<a href="#1"><img src="img/1.jpg" class="jadrotate-img" alt="hellow from image 1" style="width: 500px; height: 400px;"/></a>
				<a href="#2"><img src="img/2.jpg" class="jadrotate-img" alt="hellow from image 2" style="width: 500px; height: 400px;"/></a>
				<a href="#3"><img src="img/3.jpg" class="jadrotate-img" alt="hellow from image 3" style="width: 500px; height: 400px;"/></a>
				<a href="#4"><img src="img/4.jpg" class="jadrotate-img" alt="hellow from image 4" style="width: 500px; height: 400px;"/></a>
				<a href="#5"><img src="img/5.jpg" class="jadrotate-img" alt="hellow from image 5" style="width: 500px; height: 400px;"/></a>
				<a href="#6"><img src="img/6.jpg" class="jadrotate-img" alt="hellow from image 6" style="width: 500px; height: 400px;"/></a>
			</div>
		</div>
	
	Hooks for the markup:
	---------------------
		-> #jadrotate-box
			|_ #jadrotate-list
			|_ .jadrotate-img 
			
		-> 	jadrotate:activate(<your-class-here>)
			 - The class that is activated when the list is hovered.
			 
		->  .jadrotate-active
			 - A class that is given by jadrotate to the list item which is active.
			 
	Tested on JSLint (http://jslint.com/) with the following warnings:
		-> Implied global: window 99,107,108,124,133,139
		
			
	LM: 10-26-09

	@dependencies jquery 1.3.2
	
	@author Rafael Gandionco (http://elrafa.0fees.net) "Write Less, Destroy More"
	@version 1.2
	
********************************************************************************/

(function ($) { // be a good citizen avoid globals...but the dollar sign is mine!
var opt,
	MIN_INTERVAL = 4000,
	_defaultOpt = {
		interval : MIN_INTERVAL,
		rotation : 'on'
	},
	_queue = 0,
	_timer;
			
$.jadrotate = function (_o) {	
	// group the selectors //
	var $jAdBox = $('#jadrotate-box'),
		$jAdList = $jAdBox.find('#jadrotate-list'),
		$jAdImg = $jAdBox.find('.jadrotate-img'),
		$jAdListLi = $jAdList.find('div.adrotatelist'),
		$jAdImgCon = $jAdBox.find(':has(.jadrotate-img):not(a)');
	
	opt = $.extend({}, _defaultOpt, _o);
	
	var class2Activate,
		class2ActivateObj = {},
		checker,
		DELAY = opt.interval;	
		
	if (opt.interval) { //set minimum interval...
		if (opt.interval < MIN_INTERVAL) {
			opt.interval = MIN_INTERVAL;
		}
	}
	
	if ($jAdListLi.length !== $jAdImg.length) {
		throw 'jadrotate:ERROR -> The number of li does not match the number of images to rotate!';		
	}
	
	// find the parent container of the image and give it a relative position...
	$jAdImgCon.css({
		position : 'relative'
	});  
	
	// stack the images one on top of the other...
	$jAdImg.css({
		position: 'absolute',
		display : 'none'
	});
	
	// display the first image
	$($jAdImg.get(_queue)).css('display', 'block');	
	
	// get the class to activate when hovered...
	$jAdListLi.each(function (_index) {
		var me = $(this);
		if ($.trim(this.className) !== '') {
			class2Activate = /jadrotate:activate\(.{1,}\)/.exec(this.className);
			if (class2Activate !== null) {
				me.removeClass(class2Activate[0]);
				class2ActivateObj[_index] = class2Activate[0]
												.replace(/^.*jadrotate:activate\(/, '')
												.replace(')', '');
			}
		}
	});
	
	var __removejAdrotateActiveClass = function (_index, _me) {
		if (typeof class2ActivateObj[_index] !== 'undefined') {
			_me.removeClass(class2ActivateObj[_index]);
		}
	};
	
	var __removeAllCustomActivateClass = function () {
		// http://yuiblog.com/blog/2006/09/26/for-in-intrigue/
		var p;		
		$jAdListLi.removeClass('jadrotate-active');
		for (p in class2ActivateObj) {
			if (class2ActivateObj.hasOwnProperty(p)) {
				$jAdListLi.removeClass(class2ActivateObj[p]);
			}			
		}
	};
	
	var __addjAdrotateActiveClass = function (_index, _me) {
		_me.addClass('jadrotate-active');
		if (typeof class2ActivateObj[_index] !== 'undefined') {
			_me.addClass(class2ActivateObj[_index]);
		}
	};
	
	var __doRotation = function () {
		//console.log(_queue);
		if ($.trim(opt.rotation) === 'on') {
			window.clearTimeout(_timer);
			$($jAdImg.get(_queue)).fadeOut('slow', function () {
				_queue++;	
				if (_queue > ($jAdListLi.length-1)) {
					_queue = 0;
				}
				__removeAllCustomActivateClass();	   
				__addjAdrotateActiveClass(_queue, $($jAdListLi.get(_queue)));
						
				$($jAdImg.get(_queue)).fadeIn('slow', function () {
					_timer = window.setTimeout(__doRotation, opt.interval); // call again...recursive call to simulate rotation...
				});
			});
		}
	};	
	
	// handle list hover events here //		
	$jAdListLi
		.bind('mouseover', function () {
			if ($.trim(opt.rotation) === 'on') {
				window.clearTimeout(_timer);
			}
			window.clearTimeout(checker);			
			var me = $(this),
				indx = $jAdListLi.index(this);						
			
			$jAdImg.hide();
			$($jAdImg.get(indx)).show();
			_queue	= indx;
			
			__removeAllCustomActivateClass();	   
			__addjAdrotateActiveClass(_queue, me);														
		})
		.bind('mouseout', function () {
			var me = $(this),
				indx = $jAdListLi.index(this);
							
			checker = window.setTimeout(function () { // para dili m tok-an....
				__removejAdrotateActiveClass(me, indx);
				__doRotation(); // rotate..	
			}, DELAY);			
		});
	
	// initialization calls....but not all init actions are called here.... //	
	(function () {	
		__addjAdrotateActiveClass(_queue, $($jAdListLi.get(_queue)));
		window.setTimeout(function () {		
			__doRotation();
		}, opt.interval);			
	})();	

};
})(window.jQuery);