var spacing = 152;
var iconBorder = 10;
var left_1 = -(iconBorder+spacing);
var left0 = iconBorder;
var left1 = left0-left_1;
var left2 = left1-left_1;
var left3 = left2-left_1;
var iconsA;
var arrowLeftSide;
var arrowRightSide;
var leftRollover;
var rightRollover;
var enlargeRollover;
var playButton;
var scrolling;
var bkgImgH = 675;
var bkgImgW = 900; /* override if necessary */
var bkgImgL = 0; // increases if window.width > bkgImgW to centre horizontally;
var bkgImgT = 0; // increases if window.height > bkgImgH to centre vertically;
var bkgBorder = 30; // from top-left-bottom-right of background image
var bigPictureHeight; // width idem, and used for bigText too
var langScript;
var inLangChange = false;
var lastLang = 'fr-FR';
var replaceText;
var replaceLangTexts;
var menu1Array = new Array();
var menu2Array = new Array();
//var text1Array;
//var text2Array;
var carousel = '';
var selectionMenu;
var presseMenu;


var Bijoux = new Class({
    Implements: [Options, Events]
});


window.addEvent('domready', function(){

    // remove static elements inserted for non-javascript browsers
    $('icons').dispose();
    $('carousel').setStyle('left','auto');
    $('langSelector').setStyle('left','auto');

    MooTools.lang.addLanguage('en-UK');
    MooTools.lang.addLanguage('es-ES');
    MooTools.lang.addLanguage('fr-FR');
    MooTools.lang.set('en-UK', 'cascade', ['en', 'en-US']);

    new Request.HTML({
        url:'data/params.csv',
        onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript){
            fillParamArrays(responseHTML);
            createCarousel();
            fillMenu1();
            fillIconDiv();
            addEventsToMenus();
        }
    }).send();
    //  alert('the end')




    $$('#langSelector img').each(function(el) {
        el.setStyle('opacity','0.3'),
        el.addEvents({
            click:function() {
                if (this.get('ID').test('lang-'+lastLang))
                    return;
                restoreFrenchTexts();
                MooTools.lang.setLanguage(this.get('ID').replace('lang-',''));
            //        alert('clicked on '+this.get('ID').replace('lang-',''));
            //        alert('language is now '+MooTools.lang.getCurrentLanguage())
            },
            mouseenter:function() {
                this.set('src',this.get('src').replace('-grey',''));
                this.setStyle('opacity','1')
            },
            mouseleave:function() {
                this.set('src',this.get('src').replace('\.','-grey.'));
                this.setStyle('opacity','0.3')
            }
        })
    });

    showBigText = function(url){
        $('bigText').setStyles({
            'opacity':'0.001',
            'z-index':'20',
            'width':bigPictureHeight,
            'height':bigPictureHeight
        });
        new Request.HTML({
            url:url,
            async:false,
            update:$('bigText')
        }).send();
        //      onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript){
        showBigPicture('images/fond-contact.jpg');
        //    showBigPicture('unpetitmot2.jpg');
        
        $('bigText').tween('opacity',0,1);
        $('bigText').show();
        
        $$('#bigText pre span.email').each(function(el) {
            new Element('a', {
                href: 'mailto:' + el.get('rel').replace('_arobase_','@'),
                'text': el.get('text').replace('_arobase_','@')
            }).replaces(el);
        });
      
    };

    $('credits').addEvent('click',function(event) {
        //    $('bigText').load('data/le-petit-mot.html',{'async':'false'});
        event.preventDefault();
        switch (lastLang) {
            case 'en-UK':
                showBigText('data/a-wee-word.html');
                break;
            default:
                showBigText('data/le-petit-mot.html');
                break;
        }


    });

    $('expos').addEvent('click',function(event) {
        //    $('bigText').load('data/le-petit-mot.html',{'async':'false'});
        event.preventDefault();
        switch (lastLang) {
            case 'en-UK':
                showBigText('data/expos.html');
                break;
            default:
                showBigText('data/expos.html');
                break;
        }


    });

    $('contact').addEvent('click',function(event) {
        event.preventDefault();
        showBigText('data/contact.html');
    });

    $('bigPictureCloser').addEvents({
        mouseenter:function() {
            this.set('src','./images/close-negative.jpg');
        //      this.setStyle('opacity','1')
        },
        mouseleave:function() {
            this.set('src','./images/close.gif');
        //      this.setStyle('opacity','0.3')
        }
    });
    $('bigPictureCloser').setStyles({
        'cursor':'pointer',
        'opacity':'0.25',
        'z-index':'30'
    });
    $('bigText').fade('out');

    $('bigPicture').addEvent('click',function(){
        hideBigPicture();
    });

    window.addEvent('resize',function() {
        repositionAll()
    });

    //  window.onload = windowReady;

    $('modalPage').setStyles({
        'position':'absolute',
        'top':'0px',
        'height':'100%',
        'width':'100%',
        'z-index':'99997',
        'opacity':'0.01', /* don't darken rest of page, just prevent clicks */
        'display':'none'
    });

    $$('#bigPictureHolder, #texteLong').setStyles({
        'position':'absolute',
        'z-index':'99998'
    });
    bigPictureHeight = bkgImgH*0.7;
    $('bigPicture').setStyle('height',bigPictureHeight+'px'); // width will follow

    $('bigPictureTexteLong').setStyle('width',bigPictureHeight+'px');
    //  $('langSelector').empty();
    //  $('langSelector').load('lang/googletranform.html');

    MooTools.lang.addEvent('onLangChange', function() {
        //    alert('changing from '+lastLang+' to '+MooTools.lang.getCurrentLanguage());
        if (inLangChange || (lastLang == MooTools.lang.getCurrentLanguage())) return;
        inLangChange = true;
        //    if (MooTools.lang.getCurrentLanguage().test(/^en/)) {
        //    alert('about to load lang/Bijoux.'+MooTools.lang.getCurrentLanguage()+'.js into langScript!');
        langScript = new Asset.javascript('lang/Bijoux.'+MooTools.lang.getCurrentLanguage()+'.js', {
            id: 'langScript',
            onload: function(){
                //        alert('lang/Bijoux.'+MooTools.lang.getCurrentLanguage()+'.js is loaded into langScript!');
                //        alert('or__argent___rubis => '+Bijoux.getMsg('or__argent___rubis'));
                replaceLangTexts();
            }
        }
        );
        //    }
        inLangChange = false;
        lastLang = MooTools.lang.getCurrentLanguage();
    });

//  alert('OK, lang = '+lastLang);

});

/*
 * create carousel
 */
createCarousel = function() {
    var myCarousel = new Element('div', {
        'id':'icons'
    });
    imageArray.each(function(item, index){
        if ((item > '') && ('fichier' != item)) {
            var classes = '';
            menu1Array.each(function(itm,ix){
                if (itm[index]){
                    classes += 'm'+ix.toString()+' ';
                }
            })

            var myTmpElementA = new Element('a', {
                'href':'images/'+item+'.jpg',
                'title':text1Array[index],
                'class':classes
            });
            var myTmpElementImg = new Element('img', {
                'src':'images/'+item+'-icon.jpg',
                'alt':text2Array[index],
                'longdesc':texteLongArray[index]
            });
            myTmpElementA.grab(myTmpElementImg);
            myCarousel.grab(myTmpElementA);
        }
    });
    myCarousel.inject($('carousel'));
//  alert('OK');
}

var splitter = /[\s]*\|[\s]*/; // used in more than one function
//var splitter = /((?<=[\d,^])|"),("|(?<=[\d,$]))|\s*\|\s*/im; // for pipe or "," separators
  
fillParamArrays = function(text) {
    var myParamArray = text.split(/\s*"{0,1}[\r\n]{1,2}"{0,1}/);
    myParamArray.each(function(item, index){
        //    alert(index + " = " + item.split(splitter)[0]);
        switch (item.split(splitter)[0]) {
            case 'fichier':
                imageArray = item.split(splitter);
                //        alert(imageArray);
                break
            case 'texte1':
                text1Array = item.split(splitter);
                //        alert(text1Array);
                break
            case 'texte2':
                text2Array = item.split(splitter);
                break
            case 'texteLong':
                texteLongArray = item.split(splitter);
                break
            case 'menu1':
                menu1Index = index;
                //        alert(menu1Array);
                break
            case 'menu2':
                menu2Index = index;
                //        alert(menu2Array);
                break
        }
    });
    var regTest = /(\|[^\|]|,[^,])/;
    var i;
    for (i=menu1Index+1;i<menu2Index;i++){
        //    if (myParamArray[i].test(/\|[^\|]/)){
        if (myParamArray[i].test(regTest)){
            menu1Array.push(myParamArray[i].split(splitter));
        //      alert('menu1 line '+i.toString()+' = '+menu1Array[menu1Array.length-1].toString());
        }
    }
    //  alert(menu1Array);
    for (i=menu2Index+1;i<myParamArray.length;i++){
        //    alert(myParamArray[i].split(splitter));
        if (myParamArray[i].test(regTest)){
            menu2Array.push(myParamArray[i].split(splitter));
        //      alert('menu2 line '+(menu2Array.length-1).toString()+' = '+menu2Array[menu2Array.length-1].toString());
        }
    }
//  alert(menu2Array);
};

fillMenu1 = function(){
    myMenu1 = new Element('div');
    var myToggler;
    menu1Array.each(function(item, index){
        //    alert(index+item[1]+' myToggler = '+myToggler);
        if (item[1] > '') {
            if (myToggler) {
                myMenu1.adopt([myToggler,myElement])
            }
            myToggler = new Element('h3',{
                'id':'m'+index.toString(),
                'class':'toggler',
                'text':item[1]
            });
            myElement = new Element('div',{
                'class':'element'
            });
            // if this toggler selects images, add class choice
            for(var i=4;i<item.length;i++){
                if (item[i]) {
                    myToggler.addClass('choice');
                }
            }

        }
        if (item[2] > '') {
            myChoice = new Element('p',{
                'id':'m'+index.toString(),
                'class':'choice',
                'text':item[2]
            });
            myElement.grab(myChoice);
        }
    })
    myMenu1.adopt([myToggler,myElement])
    $('menu1').adopt(myMenu1.getChildren())
}
/* fillIconDiv. 
 *
 * Requires presence of 800x800px full-size images and 150x150px icons
 * in the /images folder.
 * e.g. images/IMGP3009.jpg and images/IMGP3009-icon.jpg.
 *
 * allows user to create list of jpg filenames with 1st and second lines of
 * description to be shown when each image is magnified:
 *
 */
fillIconDiv = function() {
    function addControls() {
        function createControl(src,ctrlName,title,classname,cursor,opacity1,opacity2) {
            if (!(cursor > "")) cursor = 'pointer';
            if (!(opacity1 > "")) opacity1 = '0.001';
            if (!(opacity2 > "")) opacity2 = '0.4';
            if (!(classname > "")) classname = 'control';
            return new Element('img',{
                'src':src,
                'id':ctrlName,
                'title':title,
                'class':classname,
                'styles':{
                    'opacity':opacity1,
                    'display':'block',
                    'border':'0',
                    'margin':'0',
                    'padding':'0',
                    'z-index':'10',
                    'cursor':cursor
                },
                'events':{
                    'mouseenter': function(evt) {
                        if ((classname != 'arrow') || (iconsA.length > 3))
                            evt.target.setStyle('opacity',opacity2);
                    },
                    'mouseleave': function(evt) {
                        //            if (evt.target != enlargeRollover)// cacher la loupe
                        evt.target.setStyle('opacity',opacity1);
                    }
                }
            })
        }


        arrowLeftSide = createControl('images/arrowleftside.gif','arrow1','défiler','arrow','','0.2','1');
        arrowLeftSide.inject(document.body);
        arrowRightSide = createControl('images/arrowrightside.gif','arrow2','défiler','arrow','','0.2','1');
        arrowRightSide.inject(document.body);

        leftRollover = createControl('images/petite-loupe.gif','control1','agrandir');
        leftRollover.inject(document.body);
        rightRollover = createControl('images/petite-loupe.gif','control3','agrandir');
        rightRollover.inject(document.body);
        enlargeRollover = createControl('images/petite-loupe.gif','control2','agrandir');
        enlargeRollover.inject(document.body);
    }

    addControls();

    $('carousel').setStyles({
        'position':'absolute',
        'width': left3,
        'height': '150px',
        'overflow':'hidden'
    });
    iconsA = $('icons').getElements('a');

    iconsA.setStyles({
        'float':'none',
        'position':'absolute',
        'left':left3+'px',
        'border':'0',
        'margin':'0',
        'padding':'0',
        'border-style':'none'
    });

    setupIcons(iconsA);

    //  leftRollover.setStyles({'left':left0+'px','top':'125px','height':'25px'});
    /*  leftRollover.setStyles({
    'left':left0+'px'
  });
  enlargeRollover.setStyle('left',left1+'px');
  rightRollover.setStyle('left',left2+'px');
   */
    iconsA.removeEvents('click');

    arrowLeftSide.addEvent('click',function (){
        scrollRight();
    });

    arrowRightSide.addEvent('click',function (){
        scrollLeft();
    });

    leftRollover.addEvent('click',function (evt){
        evt.target.tween('opacity','0.15');
        showBigPicture(iconsA[0].getProperty('href'),iconsA[0].getProperty('title'),
            iconsA[0].getElements('img')[0].getProperty('alt'),
            iconsA[0].getElements('img')[0].getProperty('longdesc'));
    });

    rightRollover.addEvent('click',function (){
        rightRollover.tween('opacity','0.15');
        showBigPicture(iconsA[2].getProperty('href'),iconsA[2].getProperty('title'),
            iconsA[2].getElements('img')[0].getProperty('alt'),
            iconsA[2].getElements('img')[0].getProperty('longdesc'));
    });
    enlargeRollover.addEvent('click',function (evt){
        evt.target.tween('opacity','0.001');
        showBigPicture(iconsA[1].getProperty('href'),iconsA[1].getProperty('title'),
            iconsA[1].getElements('img')[0].getProperty('alt'),
            iconsA[1].getElements('img')[0].getProperty('longdesc'));
    });
    $('carousel').adopt($$('img.control'));
    leftRollover.setStyles({
        'left':'0',
        'top':'0',
        'width':$('carousel').getWidth()/3+'px',
        'height':$('carousel').getHeight()+'px'
    });
    rightRollover.setStyles({
        'right':'0',
        'top':'0',
        'width':$('carousel').getWidth()/3+'px',
        'height':$('carousel').getHeight()+'px'
    });
    enlargeRollover.setStyles({
        'left':$('carousel').getWidth()/3+'px',
        'width':$('carousel').getWidth()/3+'px',
        'top':'0',
        'height':$('carousel').getHeight()+'px'
    });
    $$('#bigPictureCloser, #bigText').addEvent('click',hideBigPicture);
    repositionAll()

};



showBigPicture = function(pictureUrl,text1,text2,longdesc,bigText) {
    var t1 = text1 && (text1.length > 0);
    var t2 = text2 && (text2.length > 0);
    var t3 = longdesc && (longdesc.length > 0);
    var t4 = bigText && (bigText.length > 0);
    $('bigPicture').setProperty('src','');//.setStyle('opacity',0);
    $('bigPictureCaption').set('html','');
    $('bigPictureTexteLong').set('html','');
    $('bigPicture').setProperty('src',pictureUrl);
    if(t1 && t2) $('bigPictureCaption').set('html',text1+"<BR>"+text2)
    else if(t1) $('bigPictureCaption').set('html',text1)
    else if(t2) $('bigPictureCaption').set('html',text2);
    $('bigPictureTexteLong').set('html', longdesc); // always to empty if necessary
    repositionBigPicture(true);
    $('modalPage').removeClass('hidden');
    $$('#bigPictureHolder, #bigPictureTexteLong').setStyles({
        "opacity":"0"
    });
    $$('#bigPictureHolder, #bigPictureTexteLong').show();
    //  $('bigPictureHolder').setStyle('visibility','visible');
    $$('#bigPictureHolder, #bigPictureTexteLong').tween('opacity',1);
// $('modalPage').show();  // Nathalie et sa copine plasticienne ne comprenaient pas 02/11/09
}
/*
 *$('fxTarget').set('tween',{
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut,
	link: 'chain'
});
$('fxTarget').tween('width', 0).tween('width', 100);
 */
hideBigPicture = function(){
    $('modalPage').hide();
    $('bigPictureTexteLong').set('tween',{
        link: 'chain'
    });
    $$('#bigPictureTexteLong, #bigPictureHolder, #bigText').tween('opacity',0);//.set('html','');
//  $('bigPictureHolder').tween('opacity',0);//.chain( function() {
//    //    $('bigPictureTexteLong').set('html','');
//    $('bigPicture').setProperty('src','');
//    $('bigPictureCaption').set('html','');
//  });
};

Bijoux.getMsg = function(key){
    return MooTools.lang.get('Bijoux', key);
};

repositionBigPicture = function(){
    $('bigPictureHolder').setStyles({
        'left':(bkgImgL+bkgImgW*0.27).toInt()+'px',
        'top':(bkgImgT+bkgImgH-bkgBorder-(bkgImgH*0.7)-31).toInt()+"px"
    });
    $('bigPictureTexteLong').setStyles({
        'left':(bkgImgL+bkgImgW*0.27).toInt()+'px',
        'bottom':window.getHeight() - $('bigPictureHolder').getStyle('top').toInt()
    });
};

replaceText = function(elt,elProp) {
    var key = '';
    var msg = '';
    var regexp = /[^0-9a-zA-Z_]/g;// /\W/g;
    key = elt.get(elProp);
    elt.addClass('restoretext');
    elt.store('frenchText',key);
    key = key.replace(regexp, '_');
    if (key) {
        msg = Bijoux.getMsg(key);
        if (msg) {
            //        alert('key:'+key.replace(regexp, '_')+'. msg = "'+msg+'"');
            elt.set(elProp,msg);
        }
    }
};

replaceLangTexts = function() {
    //  alert("before choices");
    //  alert("in replaceTexts: $$('.choice').length = "+$$('.choice').length);
    $$('.toggler, .choice').each(function(el) {
        //    alert(el.get('text'));
        replaceText(el,'text')
    })
    //    alert("in replaceTexts: $$('#carousel #icons a').length = "+$$('#carousel #icons a').length)
    $$('#carousel #icons a').each(function(el) {
        replaceText(el,'title')
    });

    //    alert("in replaceTexts: $$('#carousel #icons a img').length = "+$$('#carousel #icons a img').length)
    $$('#carousel #icons a img').each(function(el) {
        replaceText(el,'alt')
    });
    $$('#otherPictures a').each(function(el) {
        replaceText(el,'title')
    });

    $$('#otherPictures a img').each(function(el) {
        replaceText(el,'alt')
    });

};

restoreFrenchTexts = function() {
    $$('img.restoretext').each(function(el) {
        el.removeClass('restoretext');
        el.set('alt',el.retrieve('frenchText'));
        el.eliminate('frenchText');
    })
    $$('a.restoretext').each(function(el) {
        el.removeClass('restoretext');
        el.set('title',el.retrieve('frenchText'));
        el.eliminate('frenchText');
    })
    $$('.restoretext').each(function(el) {
        el.removeClass('restoretext');
        el.set('text',el.retrieve('frenchText'));
        el.eliminate('frenchText');
    })
}

repositionAll = function() {
    var posV, posH;  // for background image
    bkgImgL = (window.getWidth() - bkgImgW)/2; // idem right
    bkgImgT = (window.getHeight() - bkgImgH)/2; // idem bottom

    if(bkgImgL < 0) {
        bkgImgL = 0;
        posH = 'left'
    } else {
        posH = 'center'
    }
    if(bkgImgT < 0) {
        bkgImgT = 0;
        posV = 'top'
    } else {
        posV = 'center'
    }
    $(document.body).setStyle('background-position',posV+' '+posH);
    posV = bkgImgT+380+'px'; // for top of carousel and menu1
    $$('.leftText').setStyle("left",bkgImgL+bkgBorder+"px");
    $('carousel').setStyles({
        'right':30+bkgImgL+'px',
        'top':posV
    });
    //  alert($('langSelector').getStyle('left'));
    $('langSelector').setStyles({
        'right':30+bkgImgL+'px',
        'top':bkgImgT+bkgBorder
    });
    //  alert($('langSelector').getStyle('left'));
    $('arrow1').setStyles({
        'top':$('carousel').getTop()+'px',
        'left':$('carousel').getLeft()-33-1+'px' // arrow image width = 33
    });
    $('arrow2').setStyles({
        'top':$('carousel').getTop()+'px',
        'left':$('carousel').getLeft()+$('carousel').getWidth()+1+'px'
    });
    $('iconCountText').setStyles({
        'top':$('carousel').getTop()+$('carousel').getHeight()+5+'px',
        'left':$('carousel').getLeft()+'px',
        'width':$('carousel').getWidth()+'px'
    });
    $('menu1').setStyle('top',posV);
    $('menu2').setStyle('top',bkgImgT+500-$('menu2').getHeight()+172+'px');

    if ($('bigPictureHolder').getStyle('visibility') == 'visible') {
        repositionBigPicture(true);
    }
};

setupIcons = function(icons) {
    icons.setStyle('left',left3+'px');
    if (icons[0]) icons[0].setStyle('left',left0+'px');
    if (icons[1]) icons[1].setStyle('left',left1+'px');
    if (icons[2]) icons[2].setStyle('left',left2+'px');
}

scrollLeft = function() {
    if (iconsA.length <= 3)
        return;
    iconsA[0].tween('left',left_1+'px');
    iconsA[1].tween('left',left0+'px');
    iconsA[2].tween('left',left1+'px');
    if (iconsA.length > 3) iconsA[3].tween('left',left3+'px',left2+'px')
    else iconsA[0].tween('left',left3+'px',left2+'px');

    iconsA.push(iconsA.shift()); // place 1st icon at end

}

scrollRight = function() {
    if (iconsA.length <= 3)
        return;
    iconsA.unshift(iconsA.pop()); //place last icon at front
    iconsA[0].tween('left', left_1+'px',left0+'px');
    iconsA[1].tween('left',left1+'px');
    iconsA[2].tween('left',left2+'px');
    if (iconsA.length > 3) iconsA[3].tween('left',left3+'px');
}

rotateIcons = function() {
    scrollRight();
    scrolling = scrollRight.periodical(3000);
    playButton.setProperty('src','images/controlstop.png');
}

addEventsToMenus = function(){
    /*  selectionMenu = new Accordion($$('.toggler'), $$('.element'), $('menu1'), { */
    selectionMenu = new Accordion($$('#menu1 h3'), $$('#menu1 div'), {
        display: -1,
        alwaysHide: true,
        onActive: function(toggler){
            toggler.setStyle('color', '#BBBBBB');
        },
        onBackground: function(toggler){
            toggler.setStyle('color', '#888888');
        }
    })

    presseMenu = new Accordion($$('#presseMenu h3'), $$('#presseMenu div'), {
        display: -1,
        onActive: function(toggler){
            toggler.setStyle('color', '#BBBBBB');
        },
        onBackground: function(toggler){
            toggler.setStyle('color', '#888888');
        }
    })

    $$('.choice').addEvent('click',function(evt){
        $('otherPictures').adopt($('icons').getChildren('a'));
        $('otherPictures').getChildren().fade('out');
        $('icons').adopt($$('#otherPictures .'+evt.target.getProperty('id')));
        //$('icons').adopt($$('#otherPictures .control'));
        iconsA = $('icons').getElements('a');
        setupIcons(iconsA);
        iconsA.fade('in');
        var nbIcons = iconsA.length;
        //    if (nbIcons>3) $$('.arrow').fade(1);
        //    else $$('.arrow').fade(.3);
        $('iconCountText').set('text',evt.target.getProperty('text'));
    })

}