$(function(){
	var crIndex = 0;
	var container = document.getElementById("carousel_first");
	if(!container) return;
	var ul = container.getElementsByTagName("ul")[0];
	var li = ul.getElementsByTagName("li");
	var liGroupLength = Math.ceil(li.length / 12);
	var ulGroup = [];
	var newli = [];
	for (var i = 0; i < liGroupLength; i ++){
		newli[i] = document.createElement("li");
		ulGroup[i] = document.createElement("ul");
		for (var i2 = i * 12; i2 < (i + 1) * 12; i2 ++){
			if(li[i2]) ulGroup[i].appendChild(li[i2].cloneNode(true));
		}
		newli[i].appendChild(ulGroup[i]);
		container.parentNode.appendChild(newli[i]);
	};
	container.parentNode.removeChild(container);
	$('#carousel').each(function(){
		var carouselWidth = $(this).width();
		var carouselHeight = $(this).height();
		$(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
		$(this).children('ul#carousel_base').wrapAll('<div id="carousel_wrap"></div>');
		$('ul#carousel_base').children('li').addClass('base_list');

		var prevSize = $('#carousel_prev').width();
		var nextSize = $('#carousel_next').width();

		$('#carousel_wrap').css({
			width: (carouselWidth),
			height: (carouselHeight),
			position: 'relative',
			overflow: 'hidden'
		});

		var listWidth = $('#carousel_wrap').children('ul#carousel_base').children('li').width();
		var listCount = $('#carousel_wrap').children('ul#carousel_base').children('li').length;
		$('#carousel_wrap ul#carousel_base').css({
			top: '0',
			left: '0',
			width: (listWidth)*(listCount),
			position: 'absolute'
		});
		carouselPosition();

		$('#carousel_prev').click(function(){
			$('#carousel_pagination a').stop().animate({opacity:'0.5'},300);
			$('#carousel_wrap ul#carousel_base:not(:animated)').animate({left: '+=' + (listWidth)},1000,"easeInOutExpo",function(){
				$("#carousel_pagination a.active").prev('a').addClass('active').siblings().removeClass('active');
				controlOpacity();
				carouselPosition();
			});
		});

		$('#carousel_next').click(function(){
			$('#carousel_pagination a').stop().animate({opacity:'0.5'},300);
			$('#carousel_wrap ul#carousel_base:not(:animated)').animate({left: '-=' + (listWidth)},1000,"easeInOutExpo",function(){
				$("#carousel_pagination a.active").next('a').addClass('active').siblings().removeClass('active');
				controlOpacity();
				carouselPosition();
			});
		});

		function carouselPosition(){
			var ulLeft = $('#carousel_wrap ul#carousel_base').css('left');
			var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
			if(carouselWidth >= ((listWidth)*(listCount))) {
				$('#carousel_prev').css({display:'none'});
				$('#carousel_next').css({display:'none'});
			} else if(ulLeft == 0+'px') {
				$('#carousel_prev').css({display:'none'});
				$('#carousel_next').css({display:'block'});
			} else if(ulLeft == (maskWidth)+'px') {
				$('#carousel_prev').css({display:'block'});
				$('#carousel_next').css({display:'none'});
			} else {
				$('#carousel_prev').css({display:'block'});
				$('#carousel_next').css({display:'block'});
			};
		};

		var caroselPagination = $('<div id="carousel_pagination"></div>');
		$(this).append(caroselPagination);
		$('#carousel_wrap ul#carousel_base li.base_list').each(function(){
			caroselPagination.append('<a href="javascript:void(0);"></a>');
		});

		$('#carousel_pagination a').each(function(i){
			$(this).attr('class','control_btn' + (i+1)).css({opacity:'0.5'});
		});
		$('#carousel_pagination a:first').each(function(i){
			$(this).addClass('active').stop().animate({opacity:'1'},300);
		});

		var controlCount = $('#carousel_pagination').children('a').length;

		$('#carousel_pagination a').click(function(){
			var connectCont = $("#carousel_pagination a").index(this);// 0 START

			$('#carousel_pagination a').removeClass('active').css({opacity:'0.5'});
			$(this).addClass('active').css({opacity:'1'});;

			$('#carousel_wrap ul#carousel_base').animate({left: '-' + ((listWidth)*(connectCont))},1000,function(){
				carouselPosition();
			});
		});

		$('#carousel_pagination a:not(.active)').hover(function(){
			$(this).not('.active').stop().animate({opacity:'1'},300);
		}, function(){
			$(this).not('.active').stop().animate({opacity:'0.5'},300);
		});

		function controlOpacity(){
			$('#carousel_pagination a').each(function(){
				if ($(this).hasClass('active')) {
					$(this).stop().animate({opacity:'1'},300);
				} else {
					$(this).stop().animate({opacity:'0.5'},300);
				};
			});
		};

	});
});