// JavaScript Document
// 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.3 (19-Feb-2011), Yotam Bar-On
// v0.3 Is now Internet-Explorer-Compatible.

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 $jContainer = $(this); 
	$jContainer.wrap('<div class="jPortlet-ui"></div>'); // Wrap the container with the 'jPortlet-ui'.
	var $jPortlet = $jContainer.parents('.jPortlet-ui');
	var $jContent = $jContainer.children('div');
	$jPortlet.wrap('<div class="jPortlet-wrapper"></div>');
	var $jWrapper = $jPortlet.parents('.jPortlet-wrapper');
	// Add appropriate classes, and set dimensions:
	$jContStyle = $jContainer.attr('style');
	$jContClass = $jContainer.attr('class');
	$jContId = $jContainer.attr('id');
	$jWrapper.addClass($jContClass);
	$jWrapper.attr('id', $jContId);
	$jWrapper.attr('style', $jContStyle);
	$jPortlet.css('width', opt.width+'px');
	$jPortlet.css('height', opt.height+'px');
	$jWrapper.css('width', opt.width+'px');
	$jWrapper.css('height', opt.height+'px');
	$jContent.css('width', opt.width+'px');
	$jContent.css('height', opt.height+'px');
	$jContent.addClass('jPortlet-content');
	$jContainer.addClass('jPortlet-container');
	$jContainer.attr('style', '');
	// Set jQuery array of all content divs:
	var $Content = [];
	$jContent.each( function(idx, $obj) {
		$Content.push($(this));
	});	
	// Set content order and container dimensions, according to desired effect.
	if (opt.effect == 'fade') { // Fade Effect Here::
		// Append navigation:
		if (opt.navStyle == 'arrows') {
			$jWrapper.append('<div id="navLeft" class="navigation"></div><div id="navRight" class="navigation"></div>');
		}
		var cur_cont = '0'; // Current content displayed.
		$jContent.hide();
		$Content[0].show();
		// Set appropriate styles to container and content:
		$jContent.addClass('jPortlet-content-fade');
		$jContainer.css('width', opt.width+'px')
		$jContainer.css('height', opt.height+'px');
		// Set navigation animation according to 'fade' effect:
		$jWrapper.children('.navigation').bind('click', function () {
			if ($(this).attr('id') == 'navRight') {
				$Content[cur_cont].fadeOut(opt.speed);
				if (cur_cont < ($Content.length-1)) {
					cur_cont++;
				} else {
					cur_cont = 0;
				}
				$Content[cur_cont].fadeIn(opt.speed);
			} else if ($(this).attr('id') == 'navLeft') {
				$Content[cur_cont].fadeOut(opt.speed);
				if (cur_cont > 0) {
					cur_cont--;
				} else {
					cur_cont = ($Content.length-1);
				}
				$Content[cur_cont].fadeIn(opt.speed);		
			}
		});
	} else if (opt.effect == 'horSlide') { // Horizontal Slide Effect Here::
		// Append navigation:
		if (opt.navStyle == 'arrows') {
			$jWrapper.append('<div id="navLeft" class="navigation"></div><div id="navRight" class="navigation"></div>');
		}
		// Set appropriate styles to container and content:
		$jContent.addClass('jPortlet-content-slide');
		$jContainer.css('width', ((opt.width + 30) * $jContent.length)+'px');
		if ($.browser.msie) { $jContainer.css('width', ((opt.width + 5) * $jContent.length)+'px'); }
		$jContainer.css('height', opt.height+'px');
		var cur_cont = '0'; // Current content displayed.
		// Set navigation animation according to 'fade' effect:
		$jWrapper.children('.navigation').bind('click', function () {
			var $width = (opt.width + 25);
			if ($.browser.msie) { $width = opt.width + 5; }
			if ($(this).attr('id') == 'navRight') {
				if (cur_cont < ($Content.length-1)) {
					cur_cont++;
					$jContainer.animate({ 'left': '-='+$width }, opt.speed);
				} else {
					cur_cont = 0;
					$jContainer.animate({ 'left': '+='+($width*($Content.length-1)) }, opt.speed);
				}
			} else if ($(this).attr('id') == 'navLeft') {
				if (cur_cont > 0) {
					cur_cont--;
					$jContainer.animate({ 'left': '+='+$width }, opt.speed);
				} else {
					cur_cont = ($Content.length-1);
					$jContainer.animate({ 'left': '-='+($width*($Content.length-1)) }, opt.speed);
				}
			}
		});		
	} else if (opt.effect == 'verSlide') {
		$jContent.addClass('jPortlet-content-verSlide');
		var $height = (opt.height + 30);
		var $width = (opt.width + 30);
		if ($.browser.msie) { $height = opt.height; }
		if ($.browser.msie) { $width = opt.width; }
		$jContainer.css('width', $width+'px')
		$jContainer.css('height', ($height * $jContent.length)+'px');
		var cur_pos = 0; // Define current position.
		// Define the vertical slide method:
		jQuery.fn.verSlide = function (position) {
			var $length = (($height * $jContent.length) - position);
			$(this).animate({ 'top': '-='+$length }, (($length) / $height)*opt.speed, 'linear', function() {
				$(this).attr('style', 'top:'+$height+'px'); // Place the content below the visible box.
				$(this).verSlide(0 - opt.height - 30); // Call this function so the content will slide up again.
			});
		}
		$jContainer.verSlide(0);
		$jPortlet.bind('mouseenter', function() {
			$jContainer.stop(); // On mouseenter, stop the animation.
			cur_pos = $jContainer.css('top').replace('px', '').replace('-',''); // But remember where you stopped.
		});
		$jPortlet.bind('mouseleave', function () {
			$jContainer.verSlide(cur_pos); // When mouseleaves, resume animation from where you stopped.
		});
	}
}