jQuery(function($) {
    var ITEM_SIZE;

    var ITEM_RECTS;

	var CAROUSEL_WIDTH;

	var CAROUSEL_HEIGHT;



    var _currentIndex = -1;

    var _settings;



    function setupVars(ref, settings)

    {

        _settings = $.extend({

            items: new Array(),

            itemSize: 256,
			
			itemWidth: 400,
			
			itemHeight: 300

        },

        settings || {});



        ITEM_SIZE = _settings.itemSize;
		
		ITEM_WIDTH = _settings.itemWidth;
		
		ITEM_HEIGHT = _settings.itemHeight;

        CAROUSEL_WIDTH = ref.width();

        CAROUSEL_HEIGHT = ref.height();

        ITEM_RECTS = preCalculateRects(_settings.items.length);

    }



    $.fn.carousel = function(settings)

    {

        var refCarousel = $(this);

        setupVars(refCarousel, settings);



     

        for (var i = 0; i < _settings.items.length; i++)

        {



            var wrapper = createItem(i);


			
            wrapper.click(function(event)

            {

                var newIndex = $(this).attr("itemIndex");

                if (newIndex == _currentIndex)

                {

                  

                }

                else

                {

					select(newIndex);

					

                    event.preventDefault();

                }

                

            });



            refCarousel.append(wrapper);

        }



     
		select(0);



		$(".c-button#next").click(function(){ 
		
			var index = _currentIndex + 1;

			if (index >= _settings.items.length) index = 0;

			select(index);

		});

		$(".c-button#prev").click(function(){ 

			var index = _currentIndex - 1;

			if (index < 0) index = _settings.items.length - 1;

			select(index);

		});

        return this;

    };



	function select(index)

	{

		beforeSelectionStarts();



		_currentIndex = index;



		layout(index);

	}



	function showProjectInfo()

	{

        $("#item-title").attr("href", _settings.items[_currentIndex].url);

        $("#item-title").html(_settings.items[_currentIndex].title);



        $("#item-description").text(_settings.items[_currentIndex].description);

	}

	

	function beforeSelectionStarts()

	 {

		if (_currentIndex != -1)

		{

			$("#item_" + _currentIndex).removeClass("item-selected");

		}

	 }



	function selectionCompleted(wrapper)

	 {

		showProjectInfo();

		wrapper.addClass("item-selected");

	 }



    function preCalculateRects(count)

    {

        var rectList = new Array();

        for (var i = 0; i < count; i++)

        {

            var rect = calculateRect(i, count);

            rectList.push(rect);

        }



        return rectList;

    }



    function createItem(index)

    {

        var img = $("<img class='front' src='" + _settings.items[index].image + "' />");

        var backImg = $("<img class='back' src='" + _settings.items[index].backImage + "' />");

        var front = $("<a class='carousel-link front' href='" + _settings.items[index].url + "'/>").append(img);



		var back = $("<a class='carousel-link back' href='" + _settings.items[index].url + "'/>").append(backImg);



        // Store index of item

		var wrapper = $("<div id='item_" + index + "' class='carousel-wrapper' />");

		wrapper.append(back);

		wrapper.append(front);

        wrapper.attr({itemIndex: index, title: _settings.items[index].title});



        return wrapper;

    }



    function calculateRect(index, count)

    {

        var ratio = (index / count);

        var x = (CAROUSEL_WIDTH * 0.4) * Math.sin(ratio * 2 * Math.PI);

        var z = Math.sin(ratio * Math.PI);



        var scale = 1 / (1 + z);



        var rect = new Object();

        rect.width = ITEM_WIDTH * scale;

        rect.height = ITEM_HEIGHT * scale;



        rect.x = (CAROUSEL_WIDTH - rect.width) * 0.5 + (x * scale);

        rect.z = count - Math.floor(count * z);

        rect.y = scale * (rect.height*-0.3);



        return rect;

    }



    function layout(selectedIndex)

    {

        var itemCount = _settings.items.length;

        for (var i = 0; i < itemCount; i++)

        {

            // Get the rect to be used

            var rectIndex = i - selectedIndex;

            if (rectIndex < 0)

            {

                rectIndex += _settings.items.length;

            }



            var rect = ITEM_RECTS[rectIndex];



            var wrapper = $("#item_" + i);

            wrapper.css("zIndex", rect.z);

            var frontImg = wrapper.find("a.front img");

			var backImg = wrapper.find("a.back img");



            // Animate

            wrapper.animate({

                left: rect.x,
				
				top: rect.y

            }, 

			{	duration: 700,

				complete: function()

				{

					var index = $(this).attr("itemIndex");

					if (index == _currentIndex)
					{
						selectionCompleted($(this));
					}
				}});

			if (i == selectedIndex)	{flip(wrapper, rect);}
			else {	unflip(wrapper, rect);}			

        }

function flip(elt, rect)

		{		
			elt.find("a.front img").css({'padding' : '6px', 'border' : '1px solid #18161b'}).stop().animate({width: rect.width, height: rect.height});
		}



		function unflip(elt, rect)

		{

			elt.find("a.front img").css({'padding' : '6px', 'border' : '1px solid #18161b'}).stop().animate({width: rect.width, height: rect.height});

		}

}



});