/*
 * jQuery infinitecarousel plugin
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 1.2.2
 * @date August 31, 2009
 * @category jQuery plugin
 * @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-Share Alike 3.0 - http://creativecommons.org/licenses/by-sa/3.0/
 */

(function ($) {
	$.fn.extend({
		infiniteCarousel: function (options) {
			var defaults =
			{
				transitionSpeed: 1500,
				displayTime: 6000,
				textholderHeight: .2,
				displayProgressBar: 1,
				displayThumbnails: 1,
				displayThumbnailNumbers: 1,
				displayThumbnailBackground: 1,
				thumbnailWidth: '20px',
				thumbnailHeight: '20px',
				thumbnailFontSize: '.7em'
			};
			var options = $.extend(defaults, options);

			return this.each(function () {
				var randID = Math.round(Math.random() * 100000000);
				var o = options;
				var obj = $(this);
				var curr = 1;

				var numImages = $('img', obj).length; // Number of images
				//				var imgHeight = $('img:first', obj).height();
				//				var imgWidth = $('img:first', obj).width();
				var imgHeight = 300;
				var imgWidth = 984;
				var autopilot = 1;

				$('p', obj).hide(); // Hide any text paragraphs in the carousel
				$(obj).width(imgWidth).height(imgHeight);

				// Build progress bar
				if (o.displayProgressBar) {
					$(obj).append('<div id="progress' + randID + '" style="position:absolute;bottom:0;background:#bbb;left:' + $(obj).css('paddingLeft') + '"></div>');
					$('#progress' + randID).width(imgWidth).height(5).css('opacity', '.5');
				}

				// Move last image and stick it on the front
				$(obj).css({ 'overflow': 'hidden', 'position': 'relative' });
				$('li:last', obj).prependTo($('ul', obj));
				$('ul', obj).css('left', -imgWidth + 'px');
				$('ul', obj).width(9999);

				$('ul', obj).css({ 'list-style': 'none', 'margin': '0', 'padding': '0', 'position': 'relative' });
				$('li', obj).css({ 'display': 'inline', 'float': 'left' });

				// Build textholder div thats as wide as the carousel and 20%-25% of the height
				$(obj).append('<div id="textholder' + randID + '" class="textholder" style="position:absolute;bottom:0px;margin-bottom:' + -imgHeight * o.textholderHeight + 'px;left:' + $(obj).css('paddingLeft') + '"></div>');
				var correctTHWidth = parseInt($('#textholder' + randID).css('paddingTop'));
				var correctTHHeight = parseInt($('#textholder' + randID).css('paddingRight'));
				$('#textholder' + randID).width(imgWidth - (correctTHWidth * 2)).height((imgHeight * o.textholderHeight) - (correctTHHeight * 2)).css({ 'backgroundColor': '#000', 'opacity': '0.75' });
				showtext($('li:eq(1) p', obj).html());

				// Prev/next button(img) 
				html = '<div id="btn_rt' + randID + '" style="position:absolute;right:0;top:' + ((imgHeight / 2) - 15) + 'px"><a href="javascript:void(0);"><img style="border:none;margin-right:2px" src="/Content/Images/Icons/rt.png" /></a></div>';
				html += '<div id="btn_lt' + randID + '" style="position:absolute;left:0;top:' + ((imgHeight / 2) - 15) + 'px"><a href="javascript:void(0);"><img style="border:none;margin-left:2px" src="/Content/Images/Icons/lt.png" /></a></div>';
				$(obj).append(html);

				// Pause/play button(img)
				html = '<a href="javascript:void(0);"><img id="pause_btn' + randID + '" src="/Content/Images/Icons/pause.png" style="position:absolute;top:3px;right:3px;border:none" alt="Pause" /></a>';
				html += '<a href="javascript:void(0);"><img id="play_btn' + randID + '" src="/Content/Images/Icons/play.png" style="position:absolute;top:3px;right:3px;border:none;display:none;" alt="Play" /></a>';
				$(obj).append(html);
				$('#pause_btn' + randID).css('opacity', '.5').hover(function () { $(this).animate({ opacity: '1' }, 250) }, function () { $(this).animate({ opacity: '.5' }, 250) });
				$('#pause_btn' + randID).click(function () {
					autopilot = 0;
					$('#progress' + randID).stop().fadeOut();
					clearTimeout(clearInt);
					$('#pause_btn' + randID).fadeOut(250);
					$('#play_btn' + randID).fadeIn(250);
					showminmax();
				});
				$('#play_btn' + randID).css('opacity', '.5').hover(function () { $(this).animate({ opacity: '1' }, 250) }, function () { $(this).animate({ opacity: '.5' }, 250) });
				$('#play_btn' + randID).click(function () {
					autopilot = 1;
					anim('next');
					$('#play_btn' + randID).hide();
					clearInt = setInterval(function () { anim('next'); }, o.displayTime + o.transitionSpeed);
					setTimeout(function () { $('#pause_btn' + randID).show(); $('#progress' + randID).fadeIn().width(imgWidth).height(5); }, o.transitionSpeed);
				});

				// Left and right arrow image button actions
				$('#btn_rt' + randID).css('opacity', '.75').click(function () {
					autopilot = 0;
					$('#progress' + randID).stop().fadeOut();
					anim('next');
					setTimeout(function () { $('#play_btn' + randID).fadeIn(250); }, o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function () { $(this).animate({ opacity: '1' }, 250) }, function () { $(this).animate({ opacity: '.75' }, 250) });
				$('#btn_lt' + randID).css('opacity', '.75').click(function () {
					autopilot = 0;
					$('#progress' + randID).stop().fadeOut();
					anim('prev');
					setTimeout(function () { $('#play_btn' + randID).fadeIn(250); }, o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function () { $(this).animate({ opacity: '1' }, 250) }, function () { $(this).animate({ opacity: '.75' }, 250) });

				if (o.displayThumbnails) {
					// Build thumbnail viewer and thumbnail divs
					$(obj).after('<div id="thumbs' + randID + '" style="position:relative;overflow:auto;text-align:left;padding-top:5px;"></div>');
					$('#thumbs' + randID).width(imgWidth);
					for (i = 0; i <= numImages - 1; i++) {
						thumb = $('img:eq(' + (i + 1) + ')', obj).attr('src');
						//$('#thumbs' + randID).append('<div class="thumb" id="thumb' + randID + '_' + (i + 1) + '" style="cursor:pointer;background-image:url(' + thumb + ');display:inline;float:left;width:' + o.thumbnailWidth + ';height:' + o.thumbnailHeight + ';line-height:' + o.thumbnailHeight + ';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:' + o.thumbnailFontSize + ';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">' + (i + 1) + '</div>');
						$('#thumbs' + randID).append('<div class="thumb" id="thumb' + randID + '_' + (i + 1) + '" style="cursor:pointer;background-image:url(' + thumb + ');display:inline;float:left;width:' + o.thumbnailWidth + ';height:' + o.thumbnailHeight + ';line-height:' + o.thumbnailHeight + ';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;>' + (i + 1) + '</div>');
						if (i == 0) $('#thumb' + randID + '_1').css({ 'border-color': '#ff0000' });
					}
					// Next two lines are a special case to handle the first list element which was originally the last
					thumb = $('img:first', obj).attr('src');
					$('#thumb' + randID + '_' + numImages).css({ 'background-image': 'url(' + thumb + ')' });
					$('#thumbs' + randID + ' div.thumb:not(:first)').css({ 'opacity': '.65' }); // makes all thumbs 65% opaque except the first one
					$('#thumbs' + randID + ' div.thumb').hover(function () { $(this).animate({ 'opacity': .99 }, 150) }, function () { if (curr != this.id.split('_')[1]) $(this).animate({ 'opacity': .65 }, 250) }); // add hover to thumbs

					// Assign click handler for the thumbnails. Normally the format $('.thumb') would work but since it's outside of our object (obj) it would get called multiple times
					$('#thumbs' + randID + ' div').bind('click', thumbclick); // We use bind instead of just plain click so that we can repeatedly remove and reattach the handler

					if (!o.displayThumbnailNumbers) $('#thumbs' + randID + ' div').text('');
					if (!o.displayThumbnailBackground) $('#thumbs' + randID + ' div').css({ 'background-image': 'none' });
				}
				function thumbclick(event) {
					target_num = this.id.split('_'); // we want target_num[1]
					if (curr != target_num[1]) {
						$('#thumb' + randID + '_' + curr).css({ 'border-color': '#ccc' });
						$('#progress' + randID).stop().fadeOut();
						clearTimeout(clearInt);
						//alert(event.data.src+' '+this.id+' '+target_num[1]+' '+curr);
						$('#thumbs' + randID + ' div').css({ 'cursor': 'default' }).unbind('click'); // Unbind the thumbnail click event until the transition has ended
						autopilot = 0;
						setTimeout(function () { $('#play_btn' + randID).fadeIn(250); }, o.transitionSpeed);
					}
					if (target_num[1] > curr) {
						diff = target_num[1] - curr;
						anim('next', diff);
					}
					if (target_num[1] < curr) {
						diff = curr - target_num[1];
						anim('prev', diff);
					}
				}

				function showtext(t) {
					// the text will always be the text of the second list item (if it exists)
					if (t != null) {
						$('#textholder' + randID).html(t).animate({ marginBottom: '0px' }, 500); // Raise textholder
						showminmax();
					}
				}
				function showminmax() {
					if (!autopilot) {
						//html = '<img style="position:absolute;top:6px;right:6px;display:none;cursor:pointer" src="../../Content/Images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;top:6px;right:6px;display:none;cursor:pointer" src="../../Content/Images/up.png" title="Maximize" alt="maximize" id="max" />';
						//html += '<img style="position:absolute;top:2px;right:6px;display:none;cursor:pointer" src="../../Content/Images/close.png" title="Close" alt="close" id="close" />';
						//$('#textholder'+randID).append(html);
						///$('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});});
						//$('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});});
						//$('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);});
					}
				}
				function borderpatrol(elem) {
					$('#thumbs' + randID + ' div').css({ 'border-color': '#ccc' }).animate({ opacity: 0.65 }, 500);
					setTimeout(function () { elem.css({ 'border-color': '#ff0000' }).animate({ 'opacity': .99 }, 500); }, o.transitionSpeed);
				}
				function anim(direction, dist) {
					// Fade left/right arrows out when transitioning
					$('#btn_rt' + randID).fadeOut(500);
					$('#btn_lt' + randID).fadeOut(500);

					// animate textholder out of frame
					$('#textholder' + randID).animate({ marginBottom: (-imgHeight * o.textholderHeight) - (correctTHHeight * 2) + 'px' }, 500);

					//?? Fade out play/pause?
					$('#pause_btn' + randID).fadeOut(250);
					$('#play_btn' + randID).fadeOut(250);

					if (direction == "next") {
						if (curr == numImages) curr = 0;
						if (dist > 1) {
							borderpatrol($('#thumb' + randID + '_' + (curr + dist)));
							$('li:lt(2)', obj).clone().insertAfter($('li:last', obj));
							$('ul', obj).animate({ left: -imgWidth * (dist + 1) }, o.transitionSpeed, function () {
								$('li:lt(2)', obj).remove();
								for (j = 1; j <= dist - 2; j++) {
									$('li:first', obj).clone().insertAfter($('li:last', obj));
									$('li:first', obj).remove();
								}
								$('#btn_rt' + randID).fadeIn(500);
								$('#btn_lt' + randID).fadeIn(500);
								$('#play_btn' + randID).fadeIn(250);
								showtext($('li:eq(1) p', obj).html());
								$(this).css({ 'left': -imgWidth });
								curr = curr + dist;
								$('#thumbs' + randID + ' div').bind('click', thumbclick).css({ 'cursor': 'pointer' });
							});
						}
						else {
							borderpatrol($('#thumb' + randID + '_' + (curr + 1)));
							$('#thumbs' + randID + ' div').css({ 'cursor': 'default' }).unbind('click'); // Unbind the thumbnail click event until the transition has ended
							// Copy leftmost (first) li and insert it after the last li
							$('li:first', obj).clone().insertAfter($('li:last', obj));
							// Update width and left position of ul and animate ul to the left
							$('ul', obj)
								.animate({ left: -imgWidth * 2 }, o.transitionSpeed, function () {
									$('li:first', obj).remove();
									$('ul', obj).css('left', -imgWidth + 'px');
									$('#btn_rt' + randID).fadeIn(500);
									$('#btn_lt' + randID).fadeIn(500);
									if (autopilot) $('#pause_btn' + randID).fadeIn(250);
									showtext($('li:eq(1) p', obj).html());
									if (autopilot) {
										$('#progress' + randID).width(imgWidth).height(5);
										$('#progress' + randID).animate({ 'width': 0 }, o.displayTime, function () {
											$('#pause_btn' + randID).fadeOut(50);
											setTimeout(function () { $('#pause_btn' + randID).fadeIn(250) }, o.transitionSpeed)
										});
									}
									curr = curr + 1;
									$('#thumbs' + randID + ' div').bind('click', thumbclick).css({ 'cursor': 'pointer' });
								});
						}
					}
					if (direction == "prev") {
						if (dist > 1) {
							borderpatrol($('#thumb' + randID + '_' + (curr - dist)));
							$('li:gt(' + (numImages - (dist + 1)) + ')', obj).clone().insertBefore($('li:first', obj));
							$('ul', obj).css({ 'left': (-imgWidth * (dist + 1)) }).animate({ left: -imgWidth }, o.transitionSpeed, function () {
								$('li:gt(' + (numImages - 1) + ')', obj).remove();
								$('#btn_rt' + randID).fadeIn(500);
								$('#btn_lt' + randID).fadeIn(500);
								$('#play_btn' + randID).fadeIn(250);
								showtext($('li:eq(1) p', obj).html());
								curr = curr - dist;
								$('#thumbs' + randID + ' div').bind('click', thumbclick).css({ 'cursor': 'pointer' });
							});
						}
						else {
							borderpatrol($('#thumb' + randID + '_' + (curr - 1)));
							$('#thumbs' + randID + ' div').css({ 'cursor': 'default' }).unbind('click'); // Unbind the thumbnail click event until the transition has ended
							// Copy rightmost (last) li and insert it after the first li
							$('li:last', obj).clone().insertBefore($('li:first', obj));
							// Update width and left position of ul and animate ul to the right
							$('ul', obj)
								.css('left', -imgWidth * 2 + 'px')
								.animate({ left: -imgWidth }, o.transitionSpeed, function () {
									$('li:last', obj).remove();
									$('#btn_rt' + randID).fadeIn(500);
									$('#btn_lt' + randID).fadeIn(500);
									if (autopilot) $('#pause_btn' + randID).fadeIn(250);
									showtext($('li:eq(1) p', obj).html());
									curr = curr - 1;
									if (curr == 0) curr = numImages;
									$('#thumbs' + randID + ' div').bind('click', thumbclick).css({ 'cursor': 'pointer' });
								});
						}
					}
				}

				var clearInt = setInterval(function () { anim('next'); }, o.displayTime + o.transitionSpeed);
				$('#progress' + randID).animate({ 'width': 0 }, o.displayTime + o.transitionSpeed, function () {
					$('#pause_btn' + randID).fadeOut(100);
					setTimeout(function () { $('#pause_btn' + randID).fadeIn(250) }, o.transitionSpeed)
				});
			});
		}
	});
})(jQuery);