// carousel.js

/*
 copyright:  bpm consult ag, CH-Birsfelden
 contact:    webdev@bpm.ch
 license:    restricted
 version history:
 2.7.0-0  09.01.2010  sb  initial release
 usage:
 carousel([firstCover[, maxCover[, reflect]]]);
 firstCover:  Number of the first displayed cover image beginning with 0
 default: 0 (max. maxCover)
 maxCover:    Maximum number of visible covers within the carousel
 default: 13 (must be odd, min. 5, max. 13)
 reflection:  1 = show refected images
 default: 0
 */
function carousel(firstCover, maxCover, reflect){

    // check values
    if (firstCover) {
        if (firstCover > maxCover) firstCover = maxCover;
    }
    else {
        var firstCover = 0;
    }
    if (maxCover) {
        if (maxCover < 5) maxCover = 5;
        if (maxCover == 6) maxCover = 7;
        if (maxCover == 8) maxCover = 9;
        if (maxCover == 10) maxCover = 11;
        if (maxCover > 11) maxCover = 13;
    }
    else {
        var maxCover = 13;
    }
    var lastCover = (maxCover - 1) / 2;
    if (reflect == 0) reflect = false;

    // put content in stage and presentation area
    Ext.select('.carousel').each(function(e){
        var linkId = 0;
        var stage = e.select('.carouselStage').item(0);
        var presentation = e.select('.carouselPresentation').item(0);
        e.select('.carouselItem').each(function(item){
            var cover = item.first(); // the link element around the image
            var image = item.select('img').item(0); // the image element
            cover.set({
                name: linkId,
                href: 'javascript:void(0)',
                rel: cover.getAttribute('href')
            });
            if (reflect) {
                // create the reflection, which creates additional elements
                Reflection.add(image.dom, {
                    height: 1 / 4
                });
            }
            else {
                // otherwise add a div element between link and image
                var dh = Ext.get(document.createElement('div'));
                dh.appendChild(image);
                cover.appendChild(dh);
            }
            stage.appendChild(cover);
            item.last().addClass('article' + linkId);
            presentation.appendChild(item.last());
            linkId = linkId + 1;
        });
    });
    
    // change positioning
    Ext.select('.carousel').each(function(e){
        var stage = e.select('.carouselStage').item(0);
        
        // positioning of each image
        function carouselSetPos(cover, position, init, ignoreKnob){
            if (typeof ignoreKnob == "undefined") {
                ignoreKnob = false;
            }
            var helper = cover.first(); // the div element within the link element
            var image = cover.select('img').item(0); // the image element
            cover.setStyle('display', 'none');
            if ((position < -lastCover) || (position > lastCover))                 
                return;
            cover.setStyle('display', 'block');
            var large = 1;
            
            for (var i = large; i <= 5; i = i + 0.1) {
                if (image.getWidth() > (image.getHeight() / 1.2 * i)) {
                    large = i;
                }
                else {
                    break;
                }
            }
            if (position >= 0) {
                var coverHeight = stage.getHeight(true) / ((lastCover + 1) / (lastCover + 1 - position)) / large;
				helper.parent().setStyle('zIndex', 20 - position); // zindex have to be set in parent to work in IE7
            }
            else {
                var coverHeight = stage.getHeight(true) / ((lastCover + 1) / (lastCover + 1 + position)) / large;
				helper.parent().setStyle('zIndex', 20 + position);
            }
            var coverWidth = image.getWidth() / image.getHeight() * coverHeight;
            var top = stage.getHeight(true) - coverHeight;
            var minLeft = stage.getWidth(true) / 300;
            
            if (position < 0) {
                var stepWidth = Math.pow(2, (6 - (6 / -lastCover * position)));
                left = minLeft * stepWidth;
            }
            if (position > 0) {
                var stepWidth = Math.pow(2, (6 - (6 / lastCover * position)));
                left = stage.getWidth(true) - (minLeft * stepWidth) - coverWidth;
            }
            if (position == 0) var left = (stage.getWidth(true) / 2) - (coverWidth / 2);
            if (init == true) {
                var duration = 0;
                image.parent().setStyle('background-color', stage.getStyle('background-color'));
            }
            else {
                var duration = 0.7;
            }
            if (reflect) {
                // with reflection
                helper.shift({
                    x: left + stage.getX(),
                    y: top + stage.getY(),
                    width: coverWidth,
                    height: coverHeight / 4 * 5,
                    duration: duration,
                    concurrent: true
                });
                helper.last().shift({
                    width: coverWidth,
                    height: coverHeight / 4,
                    duration: duration,
                    concurrent: true
                });
            }
            else {
                // without reflection
                helper.shift({
                    x: left + stage.getX(),
                    y: top + stage.getY(),
                    width: coverWidth,
                    height: coverHeight,
                    duration: duration,
                    concurrent: true
                });
            }
            image.shift({
                width: coverWidth,
                height: coverHeight,
                duration: duration,
                concurrent: true,
				callback:function(){
					image.setStyle('visibility','visible');
				}
            });
			
            if (position == 0) {
                var linkId = cover.getAttribute('name');
                e.select('.carouselItemText').each(function(textElement){
                    if (textElement.hasClass('article' + linkId)) {
                        textElement.fadeIn({
                            duration: duration
                        });
                    }
                    else {
                        textElement.setStyle('display', 'none');
                    }
                });
                if (ignoreKnob != null) {
                    var knob = e.select('.carouselNavigationSliderKnob').item(0);
                    var slider = e.select('.carouselNavigationSlider').item(0);
                    var items = e.select('.carouselItemCover').getCount() - 1;
                    var sliderSlice = slider.getWidth(true) / items;
                    var knobPos = slider.getX() + (sliderSlice * linkId) - (knob.getWidth() / 2);
                    knob.setX(knobPos);
                }
            }
        }
        
        // move carousel
        function moveCover(init, ignoreKnob){
            var pos = position;
            e.select('.carouselItemCover').each(function(cover){
                carouselSetPos(cover, pos, init, ignoreKnob);
                pos = pos + 1;
            });
        }
        
        // initial positioning
        e.select('.carouselItemCover').each(function(cover){
            var image = cover.select('img').item(0);
            var initTop = stage.getBottom() - image.getHeight();
            if (reflect) {
                image.parent().last().setWidth(50);
                initTop = stage.getBottom() - (image.getHeight() / 4 * 5);
            }
            cover.setStyle({
                left: stage.getRight() - image.getWidth() + 'px',
                top: initTop + 'px',
                display: 'none'
            });
        });
        var position = -firstCover;
        Ext.getBody().on('load', moveCover(true));
        
        // on window resize
        window.onresize = function(){
            moveCover();
        }
        
        // click on back button
        e.select('.carouselNavigationPrev').item(0).on('click', function(){
            if (position < 0) {
                position = position + 1;
                moveCover();
            }
        });
        
        // click on forward button
        e.select('.carouselNavigationNext').item(0).on('click', function(){

            if (position > -(e.select('.carouselItemCover').getCount() - 1)) {
                position = position - 1;
                moveCover();
            }
        });
        
        // click on cover image
        e.select('.carouselItemCover').each(function(cover){
            cover.on('click', function(event, target){
                coverId = Ext.get(target).parent().parent().getAttribute('name');
                coverPos = position + parseInt(coverId);
                if (coverPos == 0) {
                    var href = Ext.get(target).parent().parent().getAttribute('rel');
                    if (href != "undefined") document.location.href = href;
                }
                while (coverPos < 0) {
                    position = position + 1;
                    coverPos = coverPos + 1;
                    moveCover();
                }
                while (coverPos > 0) {
                    position = position - 1;
                    coverPos = coverPos - 1;
                    moveCover();
                }
            });
        });
        
        // move the slider knob
        var slider = e.select('.carouselNavigationSlider').item(0);
        var knob = e.select('.carouselNavigationSliderKnob').item(0);
        var dragObj = null;
        var items = e.select('.carouselItemCover').getCount() - 1;
        var sliderSlice = slider.getWidth(true) / items;
        function drag(){
            dragObj = knob;
        }
        function drop(){
            dragObj = null;
        }
        function moveSlider(event){
            if (dragObj) {
                var firstPos = slider.getXY()[0] - (knob.getWidth() / 2);
                var lastPos = slider.getXY()[0] + slider.getWidth() - (knob.getWidth() / 2);
                var knobPos = event.getXY()[0] - (knob.getWidth() / 2);
                if (knobPos < firstPos) knobPos = firstPos;
                if (knobPos > lastPos) knobPos = lastPos;
                for (var i = 0; i <= items; i = i + 1) {
                    var knobPosCatch = slider.getX() + (sliderSlice * i) - knob.getWidth();
                    if (knobPos > knobPosCatch) {
                        coverPos = position + i;
                    }
                }
                if (coverPos < 0) {
                    position = position + 1;
                    coverPos = coverPos + 1;
                    moveCover(null, true);
                }
                if (coverPos > 0) {
                    position = position - 1;
                    coverPos = coverPos - 1;
                    moveCover(null, true);
                }
                dragObj.setX(knobPos);
            }
        }
        slider.on('mousedown', drag);
        slider.on('mouseleave', drop);
        slider.on('click', function(event){
            drag();
            moveSlider(event);
            drop();
        });
        Ext.getBody().on('mouseup', drop);
        Ext.getBody().on('mousemove', function(event){
            moveSlider(event);
        });
		
		// resize and hide invisible items
        stage.select('.carouselItemCover').each(function(cover){
			cover.setStyle('visibility','visible');
            if (cover.getStyle('display') == 'none') {
				var image=cover.select('img').item(0);
				image.setWidth(20);
                image.setStyle('height', 'auto');
				image.setStyle('visibility','hidden');
            }
        });
		
    });
    
}