window.addEvent('domready', function() {
    images = new Array();
    for (i = 1; i < 18; i++) {
        images.push('../images/couleurs/Granit/' + i + '.jpg'); 
    }
    
    for (i = 1; i < 35; i++) {
        images.push('../images/couleurs/Satine/' + i + '.jpg'); 
    }
    
    new Asset.images(images, {
        onComplete: function(){
            //console.log('loaded');
        }
    });
    
    $('GranitMap').getElements('area').addEvent('mouseenter', displayGranit);
    $('GranitMap').getElements('area').addEvent('mouseleave', displayDefault);
    $('SatineMap').getElements('area').addEvent('mouseenter', displaySatine);
    $('SatineMap').getElements('area').addEvent('mouseleave', displayDefault);
    
    function displayGranit(event) {
        var event = new Event(event);
        element = event.target;
        $('colorImg').setProperty('src', '../images/couleurs/Granit/' + element.hash.substr(1) + '.jpg');
        //console.log( element.hash.substr(1));
    }
    
    function displaySatine(event) {
        var event = new Event(event);
        element = event.target;
        $('colorImg').setProperty('src', '../images/couleurs/Satine/' + element.hash.substr(1) + '.jpg');
        //console.log( element.hash.substr(1));
    }
    
    function displayDefault() {
        $('colorImg').setProperty('src', '../images/fenetre_exemple.jpg');
    }
});