/*
 * 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: 0,
			    displayThumbnails: 1,
			    displayThumbnailNumbers: 0,
			    displayThumbnailBackground: 1,
			    thumbnailWidth: '210px',
			    thumbnailHeight: '116px',
			    thumbnailFontSize: '.7em'
			};
            var options = $.extend(defaults, options);
			
            function getBgPosition(i) {
				var bgposition;	
				if (i == 1) {
                   bgposition = '0';
                }
                else if (i == 2) {
                   bgposition = '234px';                           
	   	        }
                else if (i == 3) {
                   bgposition = '117px';
                }
	  		    return bgposition;
			}

            return this.each(function () {
                var randID = Math.round(Math.random() * 100000000);
                var o = options;
                var obj = $(this);
                var curr = 1;
                var autopilot = 1;
                var numImages = $('img', obj).length; // Number of images
                var imgHeight = $('img:first', obj).height();
                var imgWidth = $('img:first', obj).width();
				var clearInt;
				var moving = 0;

                $('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' });
                $('ul', obj).css('left', 0 + '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('700px').height('50px').css({ 'background': 'orange url("images/textbar.png") repeat-x left top', 'opacity': '1', 'padding-top': '15px', 'padding-left': '30px' });
                showtext($('li:eq(0) p', obj).html());

				// Pause/play button(img)	
				html = '<a href="javascript:void(0);"><img id="pause_btn'+randID+'" src="images/pause.png" style="position:absolute;bottom:30px;left:7px;border:none" alt="Pause" /></a>';
				html += '<a href="javascript:void(0);"><img id="play_btn'+randID+'" src="images/play.png" style="position:absolute;bottom:30px;left:7px;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);
				});
				$('#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);
				});
				
				
                if (o.displayThumbnails) {
                    // Build thumbnail viewer and thumbnail divs
                    $(obj).after('<div id="thumbs' + randID + '" style="margin-left:-23px;overflow:auto;text-align:left;float:left;position:relative"></div>');
					$('#thumbs' + randID).width('210px');
				
                    for (i = 1; i <= numImages; i++) {
                        thumb = $('img:eq(' + (i) + ')', obj).attr('src');
                        var thumbsrc;
                        var bgposition;
						var url_address;
						if(i==1){url_address="Loyalty.html";}
						if(i==2){url_address="Segmentation.html";}
						if(i==3){url_address="PrepaidValueCard.html";}
						thumbsrc = 'images/services_menubar.png';
						if (i == curr) bgposition = '0 ' + getBgPosition(i);
						else bgposition = '210px ' + getBgPosition(i);				
                        $('#thumbs' + randID).append('<a href="'+ url_address +'"> <div class="thumb" id="thumb' + randID + '_' + (i) + '" style="cursor:hand;background-image:url(' + thumbsrc + ');background-position:' + bgposition + ';display:block;width:' + o.thumbnailWidth + ';height:' + o.thumbnailHeight + ';line-height:' + o.thumbnailHeight + ';padding:0;overflow:hidden;text-align:center;border:0px solid #ccc;margin-right:4px;font-size:' + o.thumbnailFontSize + ';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">' + (i) + '</div></a>');
                    }
					
					
					 $('#thumb' + randID + '_' + curr).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('')' });
                    //$('#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

					// Ralat : Assign mouseenter/hover handler
                    // 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('mouseover', 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' });
                }
				
								
                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)
                });	
	
                function thumbclick(event) {
                    var target_num = this.id.split('_')[1]; 
                    if (curr != target_num) {
                        $('#thumb' + randID + '_' + curr).css({ 'border-color': '#ccc' });
	
                        $('#progress' + randID).stop().fadeOut();
                        autopilot = 0;
                        clearTimeout(clearInt);
						
                        //alert(event.data.src+' '+this.id+' '+target_num[1]+' '+curr);
                        //$('#thumbs' + randID + ' div').css({ 'cursor': 'default' }).unbind('mouseover'); // Unbind the thumbnail click event until the transition has ended
						
                        setTimeout(function () { $('#play_btn' + randID).fadeIn(250); }, o.transitionSpeed);
                    }
					
                    if (target_num > curr) {
                        diff = target_num - curr;
                        anim('next', diff);
                    }					
                    else if (target_num < curr) {
                        diff = curr - target_num;
                        anim('prev', diff);
                    }
                }

                function showtext(t) {
                     if (t != null) {
                        $('#textholder' + randID).html(t).animate({ marginBottom: '0px' }, 500); // Raise textholder
                    }
                }
				
                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) {
					
					if (dist == undefined) 
						dist = 1;
						
					if (direction == "prev")
					{
						direction = "next";
						dist = numImages - dist;
					}
					
					if (moving)
					{
						$('ul', obj).stop(true);
						$('#textholder' + randID).stop(true);
					}
					
					moving = 1;
					
					$('#thumb' + randID + '_' + curr).css({ 'background-position': '210px ' + getBgPosition(curr) });
					
                    // 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") {
						//alert('masuk');
						 curr = curr + dist;
						 if (curr > numImages) curr -= numImages;
						 
						// copy to original
						$('ul', obj).animate({ left: -imgWidth * (curr-1) }, o.transitionSpeed, function () {
							moving = 0;
							//$('#btn_rt' + randID).fadeIn(500);
							//$('#btn_lt' + randID).fadeIn(500);
							if (autopilot == 1)
    							$('#pause_btn' + randID).fadeIn(250);
					        else
							     $('#play_btn' + randID).fadeIn(250);
							showtext($('li:eq(' + (curr-1) + ') p', obj).html());
							//$('#thumbs' + randID + ' div').bind('mouseover', thumbclick).css({ 'cursor': 'pointer' });
						});
                    }
					
					//alert('after ' + curr);					
					$('#thumb' + randID + '_' + curr).css({ 'background-position': '0 ' + getBgPosition(curr) });						
                }
            });
        }
    });
})(jQuery);