/**
 * 
 */

$.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 = Math.ceil( $wrapper.innerWidth()	/ singleWidth), 
		real_visible = Math.floor( $wrapper.innerWidth()	/ singleWidth), 
		// note: doesn't include padding or border
		currentPage = 1,
		pages = Math.ceil($items.length / visible);

		// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
		if (($items.length % visible) != 0) {
			$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
			$items = $slider.find('> li');
		}

		// 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(-visible).clone().addClass('cloned') );
		$items.filter(':last').after( $items.slice(0,visible).clone().addClass('cloned'));
		// reselect
		$items = $slider.find('> li');

//		$items.find('> a').each( function () {
//			$(this).click( function () {
//				$.infiniteCarousel.show( $(this) );
//				return false;
//			});
//		});
		
		// 3. Set the left position to the first 'real' item
		$wrapper.scrollLeft(singleWidth * visible);

		/**
		 * @method gotoPage
		 * @param {Object}
		 *            page
		 * 
		 * Переход к странице
		 * 
		 */
		// 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() {
						if (page == 0) {
							$wrapper.scrollLeft(singleWidth * visible * pages);
							page = pages;
						}
						else if (page > pages) {
							$wrapper.scrollLeft(singleWidth * visible);
							// reset back to start position
							page = 1;
						}
						currentPage = page;
					});
			return false;
		}

		$.infiniteCarousel = {};
		$.infiniteCarousel.show = function ( e ) {
			_overShow( e );
			return false;
		}
		
		function _overShow ( e ) {
			out = "";
			out += "<div id='ic_over'></div><div id='ic_img'> </div>";
			$('body').append(out);
			$('div#ic_over').css({'opacity':0, 'height':  $(window).height() });
			$('div#ic_img').css({'opacity':0 });
			$('div#ic_over').show().fadeTo('fast', 0.60, function () {
				$('div#ic_img').css({ 'height': 100, 'opacity': 1 }).text( e.attr('href') );
				$('div#ic_img').html("<img id='ic_image' src='' />").find('>img').hide();
				$('div#ic_img>img').load( function() {
					$('div#ic_img').css({
						'background-image': 'none',
						'width': $(this).width(),
						'height': $(this).height(),
						'margin-left': '-' + $(this).width() /2 + 'px',
						'margin-top': '-' +  $(this).height() / 2 + 'px'
					});
					$(this).fadeIn();
				}).attr( 'src', e.attr('href') );
			});
			$('div#ic_over').click( function () {
				_overHide();
			});
			$('div#ic_img').click( function () {
				_overHide();
			});
		}

		function _overHide () {
			$('div#ic_img').fadeOut( function() {
				$(this).remove()
				$('div#ic_over').fadeOut( function () { $(this).remove() } );
			});
			return false;
		}
		
		$wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
		// 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); });
		// create a public interface to move to a specific page
		$(this).bind('goto', function(event, page) { gotoPage(page); });

	});
};