$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            singleWidth = $single.outerWidth(), 
            visible = 1; //Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1;
            pages = Math.ceil($items.length / visible); 
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
		$items.filter(':first').before($items.slice((pages-3), pages).clone().addClass('cloned'));        
		$items.filter(':last').after($items.slice(0, 3).clone().addClass('cloned'));        
        $items = $slider.find('> li'); // reselect
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
             //going back 
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
			//going forward                    
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });  
            
            if (page > pages || page == 0) {
                
            }
       		if (page == 0) {
				pageIndicators = pages;
			} else if (page > pages) {
				pageIndicators = 1;	
			} else {
				pageIndicators = page;	
			}
			 
			        
			html = changePageIndicator(pageIndicators, pages);
            return false;
        }
        $wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>');
        html = changePageIndicator(currentPage, pages);
        $('.pageIndicator').append(html);
/*
* DYNAMICALLY ASSIGNS EVENTS TO EACH POSITION-INDICATOR AT THE BOTTOM OF THE HOMEPAGE
*/    
		var arr = new Array();
		for (var x=1; x < pages+1; x++) {
		 	arr[x] = '#imageWindow_'+x;
	    }	
		 if (navigator.appName == "Microsoft Internet Explorer") {
		var className = "className";
	 } else var className = "class";		          
		$.each(arr, function(arrKey, arrValue) { 
			$(arrValue).bind('click', function (event, page) {
			    for (var x=1; x < pages+1; x++) {
		 			if (x == arrKey) {
		 				document.getElementById("imageWindow_"+x).setAttribute(className, 'selectedImageBox');
		 			} else {
						document.getElementById("imageWindow_"+x).setAttribute(className, 'imageBox');	
					}
	    		}
	    		gotoPage(arrKey);
			});
		 });
		 		        
// 5. Bind to the forward and back buttons

        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        }); 
/*
*
*/	 		      
    });    
//attach events to the position-indicators at the bottom
	function changePageIndicator (pageIndicator, pages, scroller) {
	 if (navigator.appName == "Microsoft Internet Explorer") {
		var className = "className";
	 } else var className = "class";
	 	var html = '';
	 	var windowID = '';
	 	for (var x=1; x < pages+1; x++) {
	 	  windowID = "imageWindow_"+x;
	 	  if (document.getElementById("imageWindow_"+x) == undefined) {	 	  
		 	  if (x == pageIndicator) { 
		 	   html += "<span id='"+windowID+"' class='selectedImageBox'>&nbsp;</span>";
		 	  } else {html += "<span id='"+windowID+"' class='imageBox'>&nbsp;</span>";}
	 	  } else {
	 	    if (x == pageIndicator) { 
			var title = 'title_'+(x-1);
		    if (document.getElementById(title) == undefined) {
				title = 'title_'+(pages);
			}
			
			var title = document.getElementById(title).innerHTML;	 	     
			document.getElementById("galleryArticleTitle").innerHTML = title;
			document.getElementById("imageWindow_"+x).setAttribute(className, 'selectedImageBox');	
			} else {
				document.getElementById("imageWindow_"+x).setAttribute(className, 'imageBox');	
			}
		  }		  
		}
		return html;
	}  			 	   	    
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});