// jProtlet is a simple jQuery plugin that creates a nice 'wrapper' for contents to be shown in it,
// whether it's images, texts, news items etc.
// This plugin is released under the MIT license, that can be found here:
// http://www.opensource.org/licenses/mit-license.php
// Version 0.2 (18-Feb-2011), Yotam Bar-On
// v0.2 Implements verticsl slide, and a property for animation speed.

jQuery.fn.jPortlet = function (opt) {
	// Lets set some default options:
	if (!opt.width) { opt.width = '300'; }
	if (!opt.height) { opt.height = '300'; }
	if (!opt.effect) { opt.effect = 'fade'; } // The transition effect. Will be added in future releases: verSlide. verSlide is automatic. This means that no 'navigation' is appended.
	if (!opt.speed) { opt.speed = 600; } // The speed of the animations.
	// if (!opt.auto) { opt.auto = false; } // Whether effects will be automatic. Not yet implemented.
	if (!opt.navStyle) { opt.navStyle = 'arrows'; } // The navigation style. Will be added in future releases (in the FAR future):  bullets.
	var $jjContainer = $j(this);
	$jjContainer.wrap('<div class="jPortlet-ui"></div>'); // Wrap the container with the 'jPortlet-ui'.
	var $jjPortlet = $jjContainer.parents('.jPortlet-ui');
	var $jjContent = $jjContainer.children('div');
	$jjPortlet.wrap('<div class="jPortlet-wrapper"></div>');
	var $jjWrapper = $jjPortlet.parents('.jPortlet-wrapper');
	// Add appropriate classes, and set dimensions:
	$jjContStyle = $jjContainer.attr('style');
	$jjContClass = $jjContainer.attr('class');
	$jjContId = $jjContainer.attr('id');
	$jjWrapper.addClass($jjContClass);
	$jjWrapper.attr('id', $jjContId);
	$jjWrapper.attr('style', $jjContStyle);
	$jjPortlet.css('width', opt.width+'px');
	$jjPortlet.css('height', opt.height+'px');
	$jjWrapper.css('width', opt.width+'px');
	$jjWrapper.css('height', opt.height+'px');
	$jjContent.css('width', opt.width+'px');
	$jjContent.css('height', opt.height+'px');
	$jjContent.addClass('jPortlet-content');
	$jjContainer.addClass('jPortlet-container');
	$jjContainer.attr('style', '');
	// Set jQuery array of all content divs:
	var $jContent = [];
	$jjContent.each( function(idx, $jobj) {
		$jContent.push($j(this));
	});	
	// Set content order and container dimensions, according to desired effect.
	if (opt.effect == 'fade') { // Fade Effect Here::
		// Append navigation:
		if (opt.navStyle == 'arrows') {
			$jjWrapper.append('<div id="navLeft" class="navigation"></div><div id="navRight" class="navigation"></div>');
		}
		var cur_cont = '0'; // Current content displayed.
		$jjContent.hide();
		$jContent[0].show();
		// Set appropriate styles to container and content:
		$jjContent.addClass('jPortlet-content-fade');
		$jjContainer.css('width', opt.width+'px')
		$jjContainer.css('height', opt.height+'px');
		// Set navigation animation according to 'fade' effect:
		$jjWrapper.children('.navigation').bind('click', function () {
			if ($j(this).attr('id') == 'navRight') {
				$jContent[cur_cont].fadeOut(opt.speed);
				if (cur_cont < ($jContent.length-1)) {
					cur_cont++;
				} else {
					cur_cont = 0;
				}
				$jContent[cur_cont].fadeIn(opt.speed);
			} else if ($j(this).attr('id') == 'navLeft') {
				$jContent[cur_cont].fadeOut(opt.speed);
				if (cur_cont > 0) {
					cur_cont--;
				} else {
					cur_cont = ($jContent.length-1);
				}
				$jContent[cur_cont].fadeIn(opt.speed);		
			}
		});
	} else if (opt.effect == 'horSlide') { // Horizontal Slide Effect Here::
		// Append navigation:
		if (opt.navStyle == 'arrows') {
			$jjWrapper.append('<div id="navLeft" class="navigation"></div><div id="navRight" class="navigation"></div>');
		}
		// Set appropriate styles to container and content:
		$jjContent.addClass('jPortlet-content-slide');
		$jjContainer.css('width', ((opt.width + 30) * $jjContent.length)+'px')
		$jjContainer.css('height', opt.height+'px');
		var cur_cont = '0'; // Current content displayed.
		// Set navigation animation according to 'fade' effect:
		$jjWrapper.children('.navigation').bind('click', function () {
			var $jwidth = (opt.width + 25);
			if ($j(this).attr('id') == 'navRight') {
				if (cur_cont < ($jContent.length-1)) {
					cur_cont++;
					$jjContainer.animate({ 'left': '-='+$jwidth }, opt.speed);
				} else {
					cur_cont = 0;
					$jjContainer.animate({ 'left': '+='+($jwidth*($jContent.length-1)) }, opt.speed);
				}
			} else if ($j(this).attr('id') == 'navLeft') {
				if (cur_cont > 0) {
					cur_cont--;
					$jjContainer.animate({ 'left': '+='+$jwidth }, opt.speed);
				} else {
					cur_cont = ($jContent.length-1);
					$jjContainer.animate({ 'left': '-='+($jwidth*($jContent.length-1)) }, opt.speed);
				}
			}
		});		
	} else if (opt.effect == 'verSlide') {
		$jjContent.addClass('jPortlet-content-verSlide');
		$jjContainer.css('width', (opt.width + 30)+'px')
		$jjContainer.css('height', ((opt.height + 30) * $jjContent.length)+'px');
		var cur_pos = 0; // Define current position.
		// Define the vertical slide method:
		jQuery.fn.verSlide = function (position) {
			var $jlength = (((opt.height + 30) * $jjContent.length) - position);
			$j(this).animate({ 'top': '-='+$jlength }, (($jlength) / (opt.height + 30))*opt.speed, 'linear', function() {
				$j(this).attr('style', 'top:'+(opt.height+30)+'px'); // Place the content below the visible box.
				$j(this).verSlide(0 - opt.height - 30); // Call this function so the content will slide up again.
			});
		}
		$jjContainer.verSlide(0);
		$jjPortlet.bind('mouseenter', function() {
			$jjContainer.stop(); // On mouseenter, stop the animation.
			cur_pos = $jjContainer.css('top').replace('px', '').replace('-',''); // But remember where you stopped.
		});
		$jjPortlet.bind('mouseleave', function () {
			$jjContainer.verSlide(cur_pos); // When mouseleaves, resume animation from where you stopped.
		});
	}
}