/* SLIDER
--------------------------------------------------------------------------- */
var Slider = new Class({
    initialize : function(initialSlide){
        $("percentloaded").setStyle("display", "none");
        
        if(hasDetail == true) new SliderDetails();;
        if(sliderType == 'contact'){
            $('slider-detail-cont').setOpacity(0).setStyle('display','block');
        };
        
        // Build initial slides
        firstSlide = buildSlide($$('.slide-content').length -1);
        secondSlide = buildSlide(0);
        thirdSlide = buildSlide(1);
        
        // Load initial slides
        
        if (initialSlide == 0)
        {
            injectSlide(thirdSlide);
            injectSlide(secondSlide);
            injectSlide(firstSlide);
        }
        
        if (initialSlide == 1)
        {
            injectSlide(firstSlide);
            injectSlide(thirdSlide);
            injectSlide(secondSlide);
        }
        
        if (initialSlide == 2)
        {
            injectSlide(secondSlide);
            injectSlide(firstSlide);
            injectSlide(thirdSlide);
        }
        
        
        // Set Slider CTLs
        setCtlActions();
        
        // Animations
        $('slider-detail-window').setStyle('background','none');
        slideIn();
        $('carousel').effect('opacity',{duration:550}).start(1);
        if($('detail-ctl-cont')) $('detail-ctl-cont').effect('opacity',{duration:550}).start(1);
        if(sliderType == 'contact') $('slider-detail-cont').effect('opacity',{duration:550}).start(1);
        $('from-left').effect('left',{duration:550}).start(0);
        $('from-right').effect('right',{duration:550}).start(0);
    }
});

/* Base Slider Helpers */
function buildSlide(i, side){
    var img = getImage(i, 'main-image');
    var src = assetPath + img;
    var margin = side == 'right' ? 0 : -550;
    
    var slide = new Element('img',{
        'styles' : {'margin-left' : margin},
        'src'    : src,
        'id'     : 'slide-' + i
    });
    
    return slide;
};

function injectSlide(slide, side){
    if(side != 'right'){
        slide.injectTop('carousel');
    }else{
        slide.injectInside('carousel');
    }
};

function removeSlide(side){
    if(side != 'left'){
        $ES('img','carousel').getLast().remove();
    }else{
        $E('img','carousel').remove();
    }
    setCtlActions();
};

function slideIn(){
    var slides = $ES('img', 'carousel');
    $each(slides, function(slide){
        slide.effect('margin-left').start(0);
    });
    
    setCtls();
}

function slideOut(){
    var slides = $E('img', 'carousel').effect('margin-left').start(-552).chain(function(){
        removeSlide('left');
        setCtls();
    });
}

function setCtls(){
    var numbers = ['', '', ''].map(function(number, i){
        var j = $ES('img','carousel')[i].id.replace('slide-','').toInt();
        return (hasDetail == true || sliderType == 'contact') ? ++j : '';
    });
    
    if(sliderType == 'contact'){
        setContactInfo(numbers[1] -1);
        $ES('span','from-left').setText('');
        $ES('span','from-right').setText('');
    }else{
        $ES('span','from-left').setText(numbers[0]);
        $ES('span','from-right').setText(numbers[2]);
    };
    
    if($('detail-number')) $('detail-number').setText(numbers[1]);
    if($('detail-logo')) setDetailLogo(numbers[1] -1);
    if($('detail-caption')) setDetailCaption(numbers[1] -1);
};

function setCtlActions(){
    $('from-left').addEvent('click', function(){
        removeCtlActions();
        fromLeft();
        // alert('slide in from left');
    });
    $('from-right').addEvent('click', function(){
        removeCtlActions();
        fromRight();
        // alert('slide in from right');
    });
    if($('detail-ctl')){
        $('detail-ctl-cont').addEvent('click', function(){
            removeCtlActions();
            setDetail();
        });
    };
};

function fromLeft(){
    // alert('fromLeft');
    var oldSlide = $E('img','carousel').id.replace("slide-", "").toInt();
    var newSlide = buildSlide((oldSlide -1) < 0 ? $$('.slide-content').length -1 : oldSlide -1);
    injectSlide(newSlide);
    slideIn();
    removeSlide.delay(500);
};

function fromRight(){
    // alert('fromRight');
    var oldSlide = $$('#carousel img').getLast().id.replace("slide-", "").toInt();
    var newSlide = buildSlide(++oldSlide > $$('.slide-content').length -1 ? 0 : oldSlide, 'right');
    injectSlide(newSlide, 'right');
    slideOut();
};

/* SLIDER DETAIL
--------------------------------------------------------------------------- */
var SliderDetails = new Class({
    initialize : function(){
        buildDetailCtls();
        $ES('.slide-content').setStyle('overflow','hidden').setOpacity(0);
        $('slider-detail-cont').setStyle('display','block');
    }
});

function buildDetailCtls(){
    var container = new Element('div',{'id':'detail-ctl-cont'}).setOpacity(1);
    
    new Element('span',{'id':'detail-number'}).injectInside(container);
    new Element('img',{'id':'detail-logo'}).injectInside(container);
    var ctl = new Element('div',{'id':'detail-disc'});
    
    if(sliderType == 'full'){
        new Element('a',{
            'id'   : 'detail-ctl',
            'href' : 'javascript:void(0);'
        }).setText(' » view case study «').injectInside(ctl);
        
        new Element('ul',{'id':'rotator-ctls'}).setOpacity(0).injectInside(ctl);
        
        new Element('a',{
            'id'     : 'hide-detail',
            'styles' : {'opacity':'0'},
            'events' : {
                'click' : function(){
                    hideDetail();
                }
            },
            'href'   : 'javascript:void(0);'
        }).injectInside('slider-detail-window');
    }else{
        new Element('span',{'id':'detail-caption'}).injectInside(ctl);
    };
    
    ctl.injectInside(container);
    
    container.injectInside('slider-detail-window');
};

function setDetail(){
    if($ES('li', 'rotator-ctls')) {
        $each($ES('li', 'rotator-ctls'), function(el){
            el.remove();
        });
    };
    
    var cont = getCurrentDetail();
    setDetailContent(cont);
    Rotators.buildCtls($(cont));
//    $ES('.detail-images li', cont).setOpacity(0);
//    $E('.detail-images li', cont).setOpacity(1);
    
    var swfCtrl = document.getElementsByName(cont + "_swf")[0];
    swfCtrl.Play();
    swfCtrl.style.zIndex = +1;
    showDetail(cont);
};

function resetDetail(cont){
    var myFx = new Fx.Styles(cont);
    $('detail-ctl-cont').effect('top').start(265);
    
    myFx.start({'height':349}).chain(function(){
        showHideBackground(1);
        myFx.start({'opacity':0});
    }).chain(function(){
        setCtlActions();
    });
};

function showDetail(cont){
    var myFx = new Fx.Styles(cont);
    var contentHeight = $E('.detail-content',cont).getCoordinates().height;
    var newHeight =  contentHeight < 150 ? 499 : contentHeight + 349;
    
    myFx.start({'opacity':1}).chain(function(){
        showHideBackground(0.1);
        myFx.start({'height':newHeight});
        $('detail-ctl-cont').effect('top').start(369);
    }).chain(function(){
        showHideDetailContent(cont, 1);
        Rotators.initLoop($(cont));
    });
};

function hideDetail(){
    var cont = getCurrentDetail();
    Rotators.clearLoop($(cont));
    showHideDetailContent(cont,0);
    resetDetail.delay(500, '', cont);
};

function setDetailContent(cont){
    $E('.detail-images',cont).setOpacity(0);
    $E('.detail-content',cont).setOpacity(0);
    $E('.detail-attachement',cont).setOpacity(0);
};

function showHideDetailContent(cont, opacity){
    var detailItems = ['detail-images','detail-content','detail-attachement'];
    $each(detailItems, function(item){
        $E('.' + item,cont).effect('opacity').start(opacity);
    });
    $('hide-detail').effect('opacity').start(opacity);
    $('rotator-ctls').effect('opacity').start(opacity);
    
};

function getCurrentDetail(){
    var i = $ES('img','carousel')[1].id.replace('slide-','').toInt();
    return $ES('.slide-content')[i].id;
};


/* ROTATORS
--------------------------------------------------------------------------- */
var Rotators = {
    fadeOut : function(el) {
        el.effect("opacity", {duration: 10}).start(1,0);        
    },
    fadeIn : function(el) {
        g_fadeFlag = true;
        el.effect("opacity", {duration: 10}).start(0,1).chain(function() {
            g_fadeFlag = false;
        });
    },
    buildCtls : function(div) {
        var items = div.getElements("img");
        var count = items.length;
        
        items.each(function(li, i) {
            var li = new Element("li").injectInside("rotator-ctls");
            li.addEvent("click", function(){
                if(this.hasClass("on")) return;
                Rotators.clearLoop(div);
                Rotators.rotate(div, i);
            });
            
            if(i == 0) {
                li.addClass("on").setStyle("background-image", "url(" + basePath + "images/utility/case-study-ctl-on.gif)");
            } else {
                li.setStyle("background-image", "url(" + basePath + "images/utility/case-study-ctl.gif)");
            }
        });
    },
    initLoop : function(div) {        
        div.periodical = Rotators.loop.periodical(500000000, div);
    },
    loop : function() {        
        var j;
        var div = this;
        var lis = $ES('.detail-imagesNULL li', div);
        $each(lis, function(li, i) {            
            if(li.getStyle("opacity") == "0") return;
            j = [++i == lis.length ? 0 : i];
            if(j == 0) Rotators.clearLoop(div);
        });
        Rotators.rotate(div, j);
    },
    clearLoop : function(div) {
        $clear(div.periodical);
    },
    ctlSelect : function(div, i) {
        var ctls = $$("#rotator-ctls li");
        
        ctls.each(function(ctl){
            ctl.removeClass("on").setStyle("background-image", "url(" + basePath + "images/utility/case-study-ctl.gif)");
        });
        ctls[i].addClass("on").setStyle("background-image", "url(" + basePath + "images/utility/case-study-ctl-on.gif)");
    },
    rotate : function(div, i) {
        var hideMe;
        var lis = $ES('.detail-images li', div);
        $each(lis, function(li, i) {            
            if(li.getStyle("opacity") == "0") return;
            hideMe = li;
        });
        
        if (!g_fadeFlag){                        
            Rotators.fadeOut(hideMe); 
            Rotators.fadeIn(lis[i]);
            Rotators.ctlSelect(div, i);
        }
    }
};

/* GENERAL HELPERS
--------------------------------------------------------------------------- */
function getImage(i, type){
    var slideContentId = $$('.slide-content')[i].id;
    return $E('.assets .' + type, slideContentId).getText();
}

function setDetailLogo(i){
    var img = getImage(i, 'logo');
    var src = assetPath + img;
    $('detail-logo').setProperty('src', src);
};

function setDetailCaption(i){
    var txt = getImage(i, 'caption');
    $('detail-caption').setText(txt);
};

function removeCtlActions(){
    $ES('a','slider-ctls').removeEvents("click");
    if($('detail-ctl')) $('detail-ctl-cont').removeEvents("click");
};

function showHideBackground(opacity){
    var containers = ['cont-header','cont-content-top','carousel','cont-content-bottom','cont-footer'];
    var detailCltOpacity = opacity < 1 ? 0 : 1;
    $each(containers, function(cont){
            $(cont).effect('opacity').start(opacity);
        });
    $('detail-ctl').effect('opacity').start(detailCltOpacity);
};

function setContactInfo(i){
    $ES('.slide-content','slider-detail-cont').setOpacity(0);
    $ES('.slide-content','slider-detail-cont')[i].setOpacity(1);
};