/*
* 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: 0,
			   displayThumbnailBackground: 1,
			   thumbnailWidth: '20px',
			   thumbnailHeight: '10px',
			   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 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>');
                $(obj).append('<div id="progress' + randID + '" style="position:absolute;bottom:0px;background:#bbb;left:0px;right:0px"></div>');
               $('#progress' + randID).width(imgWidth).height(6).css('opacity', '.8');
            }

            // 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 at top left and moving down
            $(obj).append('<div id="textholder' + randID + '" class="textholder" style="position:absolute;top:0px;margin-top:' + -imgHeight * o.textholderHeight + 'px;left:' + $(obj).css('paddingLeft') + ';Color:#fff"></div>');
            var correctTHWidth = parseInt($('#textholder' + randID).css('paddingBottom') - 222);
            var correctTHHeight = parseInt($('#textholder' + randID).css('paddingRight'));
            $('#textholder' + randID).width(imgWidth - 242).height((imgHeight * o.textholderHeight) - (correctTHHeight * 2)).css({ 'backgroundColor': '#000', 'opacity': '0.5' });
            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="../images/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="../images/lt.png" /></a></div>';
            //$(obj).append(html);

            // Pause/play button(img)	
            html = '<a href="javascript:void(0);"><img id="pause_btn' + randID + '" src="../images/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="../images/play.png" style="position:absolute;top:3px;right:3px;border:none;display:none;" alt="Play" /></a>';
            $(obj).append(html);
            // ///////////jun added news room button
            html = '<div id="dvNRM" style="position:absolute;right:0px;top:' + ((imgHeight / 2) - 155) + 'px"><a href="svcs.php"><img style="border:none;margin-right:2px;width:88px" src="imgs/btnfm.jpg" alt="News Room" /></a></div>';
            $(obj).append(html);
            $('#dvNRM').css('opacity', '.5').hover(function() { $(this).animate({ opacity: '1' }, 660) }, function() { $(this).animate({ opacity: '.5' }, 450) });
            showNRM($('#dvNRM', obj).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(6); }, 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:-25px;"></div>');
               //jun changed the thumbs position
               $(obj).append('<div id="thumbs' + randID + '" style="position:absolute;left:728px;top:' + ((imgHeight / 2) + 166) + 'px"></div>');
               $('#thumbs' + randID).width(imgWidth);
               //jun add this line for thumbnails
               var arythbg = new Array('#ffde00', '#d60000', '#7b21ad', '#009c51');
               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>');
                  //jun changed this for thumbnails background
                  $('#thumbs' + randID).append('<div class="thumb" id="thumb' + randID + '_' + (i + 1) + '" style="cursor:pointer;background-color:' + arythbg[i] + ';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;-moz-border-radius: 3px;text-shadow:0 0 3px #fff">' + (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({ marginTop: '30px' }, 500); // drop down textholder
                  //showminmax();
               }
            }
            function showNRM(btnImg) {
               // the text will always be the text of the second list item (if it exists)
               if (btnImg != null) {
                  $('#dvNRM').html(btnImg).animate({ marginRight: '50px' }, 500); // drop down textholder
                  //showminmax();
               }
            }
            function showminmax() {
               if (!autopilot) {
                  html = '<img style="position:absolute;bottom:2px;right:18px;display:none;cursor:pointer" src="../images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;bottom:2px;right:18px;display:none;cursor:pointer" src="../images/up.png" title="Maximize" alt="maximize" id="max" />';
                  html += '<img style="position:absolute;bottom:2px;right:6px;display:none;cursor:pointer" src="../images/close.png" title="Close" alt="close" id="close" />';
                  $('#textholder' + randID).append(html);
                  $('#min').fadeIn(250).click(function() { $('#textholder' + randID).animate({ marginTop: '0px' }, 500, function() { $("#min,#max").toggle(); }); });
                  $('#max').click(function() { $('#textholder' + randID).animate({ marginTop: '30px' }, 500, function() { $("#min,#max").toggle(); }); });
                  $('#close').fadeIn(250).click(function() { $('#textholder' + randID).animate({ marginTop: '0px' }, 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({ marginTop: (-imgHeight * o.textholderHeight) - (correctTHHeight * 2) + '0px' }, 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(6);
								      $('#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);