var Coverflow = {

    root_id: 'Coverflow',    //id of the coverflow root item
    prev_id: 'CoverflowPrev', //id of the previous link
    next_id: 'CoverflowNext', //id of the next link
    inner_id: 'CoverflowInner',
    image_offset: '-125px',         //offset of the images
    firstoffset: '0px',
    firstinneroffset: 0,
    inneroffsetvalue: 125,
    useprotocol: false,
    timeanimation: 500,
    imagewidth: 125,
    activitemwidth: '100%',
    nextitemwidth: '85%',
    afternextitemwidth: '50%',
    defaultitemwidth: '50%',


    index: 1,              //current index
    root: null,           //root element of the coverflow
    inner: null,           //DOM inner element
    items: null,           //DOM elements
    images: null,           //DOM images
    length: 0,               //amount of elements
    inneroffset: 0,          //current offset of the inner container
    currentimagewidth: 0,
    nextimagewidth: 0,
    afternextimagewidth: 0,
    defaultimagewidth: 0,
    animation: true
};
function iniateCoverflow() {
    Coverflow.root = document.getElementById(Coverflow.root_id);
    Coverflow.inner = document.getElementById(Coverflow.inner_id);
    Coverflow.items = Coverflow.root.getElementsByTagName('li');
    Coverflow.images = Coverflow.root.getElementsByTagName('img');
    Coverflow.length = Coverflow.items.length;
    Coverflow.currentimagewidth = parseInt(Coverflow.imagewidth * (parseInt(Coverflow.activitemwidth) / 100)) + 'px';
    Coverflow.nextimagewidth = parseInt(Coverflow.imagewidth * (parseInt(Coverflow.nextitemwidth) / 100)) + 'px';
    Coverflow.afternextimagewidth = parseInt(Coverflow.imagewidth * (parseInt(Coverflow.afternextitemwidth) / 100)) + 'px';
    Coverflow.defaultimagewidth = parseInt(Coverflow.imagewidth * (parseInt(Coverflow.defaultitemwidth) / 100)) + 'px';
    Coverflow.image_offset = '-' + parseInt(Coverflow.imagewidth / 2) + 'px';
    Coverflow.root.className = 'animation';

    Coverflow.inner.style.width = Coverflow.imagewidth * Coverflow.length + 'px';
    //Coverflow.inner.style.paddingLeft = Coverflow.imagewidth;

    Coverflow.inner.style.left = Coverflow.inneroffset - Coverflow.firstinneroffset + 'px';
    Coverflow.animation = false;

    for (var i = 0; i < Coverflow.length; i++) {
        if (Coverflow.index - 1 == i) {
            setItemValues(i, Coverflow.nextimagewidth, '10px', 0, '5');
        } else if (Coverflow.index == i) {
            if (Coverflow.index == 0) {
                setItemValues(i, Coverflow.currentimagewidth, 0, Coverflow.image_offset, '10');
                Coverflow.items[i].style.marginLeft = '-' + parseInt(parseInt(Coverflow.currentimagewidth) / 2) + 'px';
            } else {
                setItemValues(i, Coverflow.currentimagewidth, 0, Coverflow.image_offset, '10');
            }
            Coverflow.items[i].className = 'current';
        } else if (Coverflow.index + 1 == i) {
            setItemValues(i, Coverflow.nextimagewidth, '10px', Coverflow.image_offset, '5');
        } else {
            setItemValues(i, Coverflow.defaultimagewidth, '15px', 0, '1');
        }
        Coverflow.items[i].style.width = Coverflow.imagewidth + 'px';
    }

    //button events
    document.getElementById(Coverflow.prev_id).onclick = function() {
        prevCoverflow();
    };
    document.getElementById(Coverflow.next_id).onclick = function() {
        nextCoverflow();
    };

    //protocol
    if (Coverflow.useprotocol) {
        document.write('Index:<span id="CoverflowTestIndex">' + Coverflow.index + '</span><br/>');
        document.write('InnerOffset:<span id="CoverflowTestInnerOffset">' + Coverflow.inneroffset + '</span><br/>');
        document.write('Item.length:<span>' + Coverflow.length + '</span><br/>');
        document.write('CurrentImageWidth:<span>' + Coverflow.currentimagewidth + '</span><br/>');
        document.write('NextImageWidth:<span>' + Coverflow.nextimagewidth + '</span><br/>');
        document.write('AfterNextImageWidth:<span>' + Coverflow.afternextimagewidth + '</span><br/>');
        document.write('DefaultImageWidth:<span>' + Coverflow.defaultimagewidth + '</span><br/>');
    }
    setTimeout('Coverflow.animation=true;updateCoverflowProtocol();', Coverflow.timeanimation + 100);
}
function setItemValues(index, imageWidth, imageMarginTop, itemMarginLeft, itemZIndex) {
    Coverflow.images[index].style.width = imageWidth;
    Coverflow.images[index].style.marginTop = imageMarginTop;
    Coverflow.items[index].style.marginLeft = itemMarginLeft;
    Coverflow.items[index].style.zIndex = itemZIndex;
}
function nextCoverflow() {
    moveInnerCoverflow(-1);
}
function prevCoverflow() {
    moveInnerCoverflow(1);
}
function moveInnerCoverflow(offset) {
    var cacheoffset = 0;
    if (Coverflow.animation) {
        Coverflow.index = Coverflow.index + (offset * (-1));
        if (Coverflow.index < 0) {
            Coverflow.index = 0;
        } else if (Coverflow.index > Coverflow.length - 1) {
            Coverflow.index = Coverflow.length - 1;
        } else {
            Coverflow.animation = false;
            if (Coverflow.index == 0) {
                Coverflow.inneroffset = Coverflow.inneroffset + (Coverflow.inneroffsetvalue * offset)
                cacheoffset = Coverflow.inneroffset - Coverflow.firstinneroffset + 'px';
            } else {
                cacheoffset = Coverflow.inneroffset = Coverflow.inneroffset + (Coverflow.inneroffsetvalue * offset);
            }
            $(Coverflow.inner).animate({
                left: cacheoffset
            }, Coverflow.timeanimation, function() { });

            //LEFT 3
            animateItem(Coverflow.index - 3, 0, Coverflow.defaultimagewidth, 15, 1);

            //LEFT 2
            animateItem(Coverflow.index - 2, 0, Coverflow.afternextimagewidth, 15, 1);

            //LEFT 1
            animateItem(Coverflow.index - 1, 0, Coverflow.nextimagewidth, 10, 5);
            if (Coverflow.index - 1 >= 0) {
                Coverflow.items[Coverflow.index - 1].className = '';
            }

            //MIDDLE
            animateItem(Coverflow.index, Coverflow.image_offset, Coverflow.currentimagewidth, 0, 10);
            Coverflow.items[Coverflow.index].className = 'current';

            //RIGHT 1
            animateItem(Coverflow.index + 1, Coverflow.image_offset, Coverflow.nextimagewidth, 10, 5);
            if (Coverflow.index + 1 < Coverflow.length) {
                Coverflow.items[Coverflow.index + 1].className = '';
            }
            //RIGHT 2
            animateItem(Coverflow.index + 2, 0, Coverflow.afternextimagewidth, 15, 1);

            //RIGHT 3
            animateItem(Coverflow.index + 3, 0, Coverflow.defaultimagewidth, 15, 1);

            document.getElementById(Coverflow.prev_id).className = 'activ';
            document.getElementById(Coverflow.next_id).className = 'activ';

            if (Coverflow.index == 0) {
                document.getElementById(Coverflow.prev_id).className = 'inactiv';
            } else if (Coverflow.index == Coverflow.length - 1) {
                document.getElementById(Coverflow.next_id).className = 'inactiv';
            }

            setTimeout('Coverflow.animation=true;updateCoverflowProtocol();', Coverflow.timeanimation + 100);

        }
    }
}
function animateItem(index, itemMarginLeft, imageWidth, imageMarginTop, zIndex) {
    if (index >= 0 && index < Coverflow.length) {
        Coverflow.items[index].style.zIndex = zIndex;

        $(Coverflow.items[index]).animate({
            marginLeft: itemMarginLeft
            //,marginRight: '-'+parseInt(itemMarginLeft),
        }, Coverflow.timeanimation, function() { });

        $(Coverflow.images[index]).animate({
            width: imageWidth,
            marginTop: imageMarginTop
        }, Coverflow.timeanimation, function() { });
    }
}
function updateCoverflowProtocol() {
    if (Coverflow.useprotocol) {
        document.getElementById('CoverflowTestIndex').innerHTML = Coverflow.index;
        document.getElementById('CoverflowTestInnerOffset').innerHTML = Coverflow.inneroffset;
    }
}