var visiofiche = null, realisation_data = new Hash();
var width_img = 0, height_img = 0;

window.addEvent('domready', function() {
    if($chk($$('h2.realisation_plus'))){
        $$('h2.realisation_plus').each(function(item){
            item.addEvent('click',function(){
                var h2_id = item.get('id').replace('realisation_','');
                init_visiofiche(realisation_data.get(h2_id));
            });        
        });
    }
    if($chk($$('.slide-box-item img'))){
        $$('.slide-box-item img').each(function(item){
            item.addEvent('click',function(){
                var h2_id = item.getParent('li').getElement('h2.realisation_plus').get('id').replace('realisation_','');
                init_visiofiche(realisation_data.get(h2_id));
            });        
        });
    }



    /*********************************** Page Métiers ***********************************/

    var ar_presta = {0: 'st', 1: 'web', 2: 'dg', 3: 'pv'};

    if($(document.body).getElementById('tab-clients-list')){
        var slideContent = new Fx.Slide('tab-clients-list', {duration: 500});
        slideContent.hide();
    }
    $$('#tab-clients-list-content ul').tween('opacity', '0');

    var opened = false;

    $$('#tab-clients-bt a').each(function(item, index){
        item.addEvent('click', function(e){
            e.stop();
            $$('#tab-clients-bt a').removeClass('tab-clients-bt-active');
            this.addClass('tab-clients-bt-active');

            $$('#tab-clients-list-content ul').removeClass('presta-visible').tween('opacity', '0');
            $$('#tab-clients-list-content ul')[index].addClass('presta-visible').tween('opacity', '1');

            $$('#tab-clients-list-content').setProperty('class', 'clearfix list-client-'+ar_presta[index]);

            $$('#tab-client-caption p').set('text', ar_titles[index]);

            if(!opened){
                if(Browser.ie8){
                    slideContent.show();
                    $$('#tab-clients-list').getParent('div').setStyle('height', $$('#tab-clients-list').height);
                    $$('#tab-client-caption').setStyle('padding-bottom', '28px');
                } else if(Browser.ie9){
                    $$('#tab-client-caption').setStyle('padding-bottom', '28px');
                } else {
                    slideContent.slideIn();
                }

                opened = true;
            }
        });
    });

    $$('#tab-client-caption a').addEvent('click', function(e){
        e.stop();
        $$('#tab-clients-bt a').removeClass('tab-clients-bt-active');

        var $div_content = $$('#tab-clients-list-content');

        $div_content.getElement('.presta-visible').removeClass('presta-visible');
        $div_content.setProperty('class', 'clearfix');

        slideContent.slideOut();

        $$('#tab-clients-list-content ul').tween('opacity', '0');

        opened = false;
    });

    if($chk($('locauxbg'))){
        redimensionnement('locauxbg', width_img, height_img);

        window.addEvent('resize',function(){
            redimensionnement('locauxbg', width_img, height_img);
        });
    }

});


function init_visiofiche(data){
    if($chk($('visio-fiche'))){
        $('visio-fiche').empty();
        visiofiche = new Slideshow('visio-fiche', data, { 
            preload  : true,
            paused: false, //
            //            transition: 'fade', 
            thumbnails: false, 
            loader: false, 
            delay: 5000, 
            duration: 1000, 
            captions: true, 
            width: 710, 
            height: 492 
        });
    }
}

function move_to(id){
    new Fx.Scroll(window,{duration:1000}).toElement($(id));
}

function redimensionnement(id, width_img, height_img){ 
    // -- l'element à redimensionner
    var img = $(id);

    // -- on récupére et on place dans des variable la largeur et la hauteur de l'id donné
    var image_width = width_img; 
    var image_height = height_img;

    // -- on calcul le ratio entre la largeur et la hauteur de l'image que l'on place dans deux variables
    var over = image_width / image_height; 
    var under = image_height / image_width; 

    // -- on récupére également la largeur et la hauteur de l'écran
    var body_width = $(window).getSize().x;
    var body_height = $(window).getSize().y-170;


    if (body_width / body_height >= over && Math.ceil(under * body_width)<body_height) { 
        // -- Si la largeur de l'écran divié par la hauteur de ce dernier est supérieur ou égal au ratio largeur/hauteur de l'id 
        // -- on applique :
        // --       la largeur de l'écran à l'id
        // --       un calcul pour la hauteur ;)
        // --       une positon left à zéro
        // --       un calcul très savant pour le top Xp

        img.setStyles({ 
            'width': body_width + 'px', 
            'height': Math.ceil(under * body_width) + 'px',
            'left': 0
        });
    }  

    else { 
        // -- Sinon,
        // -- on applique :
        // --       un calcul pour la largeur ;)
        // --       la hauteur de l'écran à l'id
        // --       une positon top à zéro
        // --       un calcul très savant pour le left Xp

        img.setStyles({ 
            'width': Math.ceil(over * body_height) + 'px', 
            'height': body_height + 'px',
            'left': ( Math.ceil(over * body_height) < body_width ? Math.ceil(Math.abs((over * body_height) - body_width) / 2) :0) + 'px' 
        });
    } 
}