$(document).ready(function() {

var carousel = $(".carousel"),
    currdeg = 0;
var totalItems = 5;
var degStep = 360 / totalItems;
var allItems = document.getElementById("ccarousel").children;
console.log("rawrwarawr");
console.log(allItems.length);
var currItem = 0;

for (i = 0; i < allItems.length; i++) {
    allItems[i].style.opacity = 0.2;
}
allItems[currItem].style.opacity = 1;

$(".next").click(function() {
    rotate("n");
});
$(".prev").click(function() {
    rotate("p");
});
$("body").keydown(function(e) {
    if (e.keyCode == 37) { // left
        rotate("p");
    } else if (e.keyCode == 39) { // right
        rotate("n");
    }
});
$(".carousel").on("swipeleft", function() {
    rotate("p");
});

$(".carousel").on("swiperight", function() {
    rotate("n");
});

var fadeOutItem = 0;

function rotate(e) {
    console.log("CIICK");
    if (e == "n") {
        currdeg = currdeg - degStep;
    }
    if (e == "p") {
        currdeg = currdeg + degStep;
    }
    var rawr = ((currdeg * (-1)) % 360) + 360;
    currItem = (rawr / degStep) % totalItems;

    if (e == "n") {
        fadeOutItem = (currItem + totalItems - 1) % totalItems;
    }
    if (e == "p") {
        fadeOutItem = (currItem + totalItems + 1) % totalItems;
    }
    console.log(currItem);
    carousel.css({
        "-webkit-transform": "rotateY(" + currdeg + "deg)",
        "-moz-transform": "rotateY(" + currdeg + "deg)",
        "-o-transform": "rotateY(" + currdeg + "deg)",
        "transform": "rotateY(" + currdeg + "deg)"
    });
    fadeOut(allItems[fadeOutItem]);

    fadeIn(allItems[currItem]);
}

function fadeOut(element) {
    var op = 1; // initial opacity
    var timer = setInterval(function() {
        if (op <= 0.2) {
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 20);
}

function fadeIn(element) {
    var op = 0.2; // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function() {
        if (op >= 1) {
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}

});