var gallerieAccueil = function( width, height, thumbWidth, thumbHeight ){
  
  var width = 990 ; // largeur d'une image
  var height = 301 ; // hauteur d'une image
  var thumbWidth = 68 ; // largeur d'une miniature pour l'index
  var thumbHeight = 50 ; // hauteur d'une miniature pour l'index 
  var incThumbWidthOver = 30 ; // au survol on agrandit la largeur miniature en px
  var incThumbHeightOver = 20 ; // au survol on agrandit la hauteur miniature en px
  var nbThumbsInIndex = 12 ; // nombre d'images dans l'index

  // dynamiques
  var images = false ; // chargée en ajax/JSON
  var nbImages = false ; // renseignée avec ^
  var fullWidth ; // avec le nombre d'images
  var left = ( $( 'body' ).width( ) - width ) / 2 ; // la marge de gauche pour allez dans le design.
  var currentBwLeft ;
  var currentFocusLeft ;
  var currentIndex = 1 ;
  var thumbIndexWidth = false ;
  var thumbOverlayWidth = thumbWidth * nbThumbsInIndex ;
  var thumbsMoving = false ;
  var dirThumbs = false ;
  var goonThumbs = false ;
  
  // recupérer la liste d'images :  
  $.ajax( {
    type: "POST",
    url: "gallerie_accueil.php",
    dataType: 'json' } )
    .success( function( data ){ 
      images = data ; 
      nbImages = images.length ; } )
    .error( function( ){ alert( 'error gallerieAccueil' ) ; $( '#banner' ).remove( ) ; return false ; } ) 
    .complete( function( ){ 
      createStructure( ) ;
      fillTheImages( images ) ; 
      assignFunc( ) ;
    } ) ;
  
  var createStructure = function( ){
    fullWidth = width * nbImages ;
    $( '#loaderGallerie' ).remove( ) ;
    // le background tank
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_bwTank' ;
    $( div ).css( { 'width': fullWidth + ( 2 * width ) + 'px', 'height': height + 'px', 'left': - width + left + 'px' } ) ;
    currentBwLeft = - width + left ;
    $( '#gallerieAccueil' ).append( div ) ;
    // le focus tank
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_focusOverlay' ;
    $( div ).css( { 'width': width + 'px', 'height': height + 'px', 'left': left +'px' } ) ;
    $( '#gallerieAccueil' ).append( div ) ;
    // overlay
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_focusTank' ;
    $( div ).css( { 'width': fullWidth * 2 + 'px', 'height': height + 'px' } ) ;
    currentFocusLeft = 0 ;
    $( '#gallerieAccueil_focusOverlay' ).append( div ) ;
    // prevImage
    var spanPrevImage = document.createElement( 'span' ) ;
    spanPrevImage.id = 'gallerieAccueil_prevImage' ;
    $( spanPrevImage ).html( ' ' ).css( { 'background': 'transparent url(img/gallerie/btprev.png) left top no-repeat', 'width':'30px', 'height':'30px', 'display':'block', 'position':'absolute', 'z-index':'7', 'left':'30px', 'top':'135px' } ).addClass( "btCarreHover" ) ;
  /*$( '#gallerieAccueil_focusOverlay' ).append( spanPrevImage ) ;*/
    // nextImage
    var spanNextImage = document.createElement( 'span' ) ;
    spanNextImage.id = 'gallerieAccueil_nextImage' ;
    $( spanNextImage ).html( ' ' ).css( { 'background': 'transparent url(img/gallerie/btnext.png) left top no-repeat', 'width':'30px', 'height':'30px', 'display':'block', 'position':'absolute', 'z-index':'7', 'left': ( width - 60 ) + 'px', 'top':'135px' } ).addClass( "btCarreHover" ) ;
  /*$( '#gallerieAccueil_focusOverlay' ).append( spanNextImage ) ;*/
    // thumb Tank
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_thumbTank' ;
//    $( div ).css( { 'width': width + 'px', 'height': '94px', 'margin': ( height + 2 ) + 'px 0 0 0' } ) ;    
    $( div ).css( { 'width': width + 'px', 'height': '94px', 'margin': ( height ) + 'px 0 0 0' } ) ;    
    $( '#gallerieAccueil' ).after( div ) ;
    // thumb prev •
    var spanPrevThumb = document.createElement( 'span' ) ;
    spanPrevThumb.id = 'gallerieAccueil_prevThumb' ;
    $( spanPrevThumb ).html( ' ' ).css( { 'background': 'transparent url(images/leftNav.png) left top no-repeat', 'width':'29px', 'height':'29px', 'display':'block', 'position':'absolute', 'z-index':'7', 'left':'30px', 'top':'31px' } ).addClass( "btCarreHover" ) ;
    $( '#gallerieAccueil_thumbTank' ).append( spanPrevThumb ) ;
    // thumb next •
    var spanNextThumb = document.createElement( 'span' ) ;
    spanNextThumb.id = 'gallerieAccueil_nextThumb' ;
    $( spanNextThumb ).html( ' ' ).css( { 'background': 'transparent url(images/rightNav.png) left top no-repeat', 'width':'29px', 'height':'29px', 'display':'block', 'position':'absolute', 'z-index':'7', 'left': ( width - 60 ) + 'px', 'top':'31px' } ).addClass( "btCarreHover" ) ;
    $( '#gallerieAccueil_thumbTank' ).append( spanNextThumb ) ;
    // thumb Overlay
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_thumbOverlay' ;
    $( div ).css( { 'width': thumbOverlayWidth + 'px', 'height': thumbHeight + 24 + 'px', 'position':'absolute', 'z-index':'3', 'left':'87px', 'overflow':'hidden' } ) ;
    $( '#gallerieAccueil_thumbTank' ).append( div ) ;
    // thumb Index
    var div = document.createElement( 'div' ) ;
    div.id = 'gallerieAccueil_thumbIndex' ;
    $( div ).css( { 'position':'absolute', 'z-index':'3', 'left':'0', 'height': thumbHeight + 24 + 'px' } ) ;
    $( '#gallerieAccueil_thumbOverlay' ).append( div ) ;
    // adapter la hauteur du content
//    $( '#content' ).height( '805px' ) ;
    // pour le titre de l'image
    var p = document.createElement( 'p' ) ;
    p.id = 'gallerieAccueil_currentTitle' ;
    $( p ).html( 'gallerieAccueil_currentTitle' ) ;
    $( '#gallerieAccueil_focusOverlay' ).append( p ) ;
    // pour l'effet de hover sur les boutons prev et next
    $( '.btCarreHover' ).mouseover( function( ){ $( this ).css( 'background-position','0 -29px' ) ; } ).mouseout( function( ){ $( this ).css( 'background-position','0 0' ) ; } ) ;
  }
  
  var fillTheImages = function( images ){
    $( '#gallerieAccueil_bwTank' ).append( createImage( images[(images.length - 1 )], "bw" ) ) ; // + l'image de la fin en premier pour le bg bw
    for( var i = 0 ; i < images.length ; i++ ){ // on assign les images au div par une boucle
      $( '#gallerieAccueil_thumbIndex' ).append( createImage( images[i], 'thumb' ) ) ; // l'index
      $( '#gallerieAccueil_bwTank' ).append( createImage( images[i], 'bw' ) ) ; // le background
      $( '#gallerieAccueil_focusTank' ).append( createImage( images[i], 'big' ) ) ; } // le focus
    $( '#gallerieAccueil_bwTank' ).append( createImage( images[0], "bw" ) ) ; // + l'image du début à la fin pour le bg bw
    thumbIndexWidth = 84 * images.length + 60 ; // la longueur de l'index
    $( '#gallerieAccueil_thumbIndex' ).css( 'width', thumbIndexWidth + 'px' ) ; // on assign
    $( '.gallerieAccueil_item_thumb' ).css( { 'margin-top':'20px' } ) ;
    setIndexAndTitle( ) ; 
  }
  
  var setIndexAndTitle = function( ){
    $( '.gallerieAccueil_item_selected' ).removeClass( 'gallerieAccueil_item_selected' ) ;
    $( '#gallerieAccueil_currentTitle' ).html( images[currentIndex - 1].ordreRealisation + ' : ' + images[currentIndex - 1].legendeRealisation ) ; // le titre de la première image
    $( '#gallerieAccueil_item_thumb_' + ( currentIndex ) ).addClass( 'gallerieAccueil_item_selected' ) ; /// et la class selected
  }
  
  var createImage = function( image, type ){
    var img = new Image ;
    img.id = 'gallerieAccueil_item_' + type + '_' + image.ordreRealisation ;
    img.src = './img/realisation/' + type + '/' + image.imageRealisation ;
    img.alt = image.legendeRealisation ;
    $( img ).addClass( 'gallerieAccueil_item_' + type ) ;
    return img ;
  }
  
  var assignFunc = function( ){
    $( '#gallerieAccueil_prevImage' ).click( function( ){ 
      var gotoIndex ;
      if( currentIndex == 1 ){ gotoIndex = images.length ; }
      else{ gotoIndex = currentIndex - 1 ; }
      gotoImage( gotoIndex ) ; 
    } ).setCursor( ) ;
    $( '#gallerieAccueil_nextImage' ).click( function( ){ 
      var gotoIndex ;
      if( currentIndex == images.length ){ gotoIndex = 1 ; }
      else{ gotoIndex = parseInt( currentIndex ) + 1 ; }
      gotoImage( gotoIndex ) ; 
    } ).setCursor( ) ;
    $( '#gallerieAccueil_prevThumb' ).mousedown( function( ){ 
      thumbsMoving = true ;
      dirThumbs = 1 ;
      goonThumbs = 1 ;
      moveThumbs( 1, 3 ) ; 
    } ).mouseup( function( ){ stopThumbs( ) ; } ).mouseleave( function( ){ stopThumbs( ) ; } ).setCursor( ) ;
    $( '#gallerieAccueil_nextThumb' ).mousedown( function( ){ 
      thumbsMoving = true ;
      dirThumbs = -1 ;
      goonThumbs = 1 ;
      moveThumbs( 1, 3 ) ; 
    } ).mouseup( function( ){ stopThumbs( ) ; } ).mouseleave( function( ){ stopThumbs( ) ; } ).setCursor( ) ;
    // pour chaque image de l'index thumb
    $.each( $( '.gallerieAccueil_item_thumb' ), function( key, value ){
      $( value ).setCursor( ).click( function( ){
        var gotoIndex = $( this ).attr( 'id' ).split( '_' ).pop( ) ;
        gotoImage( gotoIndex ) ; } ) ; 
      } ) ;
    if( !$.browser.msie ){  
      $( '.gallerieAccueil_item_thumb' ).mouseover( function( ){ 
          $( this ).animate( { width: "+=" + incThumbWidthOver + "px", height: "+=" + incThumbHeightOver + "px", 'margin-top': "-=" + incThumbHeightOver + "px" }, 'fast' ) ;
        } ).mouseout( function( ){ 
          $( this ).animate( { width: "-=" + incThumbWidthOver + "px", height: "-=" + incThumbHeightOver + "px", 'margin-top': "+=" + incThumbHeightOver + "px" }, 'fast' ) ;
        } ) ; }
    
    // A LA PLACE IL VEUT UN LIEN VERS portfolio.php
    $( '#gallerieAccueil_focusTank' ).click( 
      function( ){ $( location ).attr( 'href' , 'http://www.imprimerielaville.com/portfolio.php' ) ; } 
    ).setCursor( ).attr( 'title' , 'Cliquez pour voir le Portfolio' ) ;
        /* ça c'était pour bouger les images interactivement !!! FINALEMENT LE CLIENT IL EN VEUT PLUS 
    $( '#gallerieAccueil_focusTank' ).setCursor( 'col-resize' ).drag( function( ev, dd ){ 
      $( this ).css( { left: dd.offsetX - left } ) ; 
      $( '#gallerieAccueil_bwTank' ).css( { left: dd.offsetX - width } ) ;
    } ).drag( 'end', function( ev, dd ){ 
      if( Math.abs( dd.originalX - dd.offsetX ) >= width / 2 ){
        if( dd.originalX > dd.offsetX ){
          var gotoIndex ;
          if( currentIndex == images.length ){ gotoIndex = 1 ; }
          else{ gotoIndex = parseInt( currentIndex ) + 1 ; } }
        else{
          var gotoIndex ;
          if( currentIndex == 1 ){ gotoIndex = images.length ; }
          else{ gotoIndex = currentIndex - 1 ; } }
        var time = ( ( gotoIndex == images.length && currentIndex == 1 ) || ( currentIndex == images.length && gotoIndex == 1 ) ) ? 1500 : 500 ;
        gotoImage( gotoIndex, time ) ; }
      else{ gotoImage( currentIndex, 500 ) ; }
    } ) ;
    */
  }
  
  var moveThumbs = function( inc, laps ){
    if( Math.abs( inc ) < 4 || goonThumbs == -1 ){ inc = dirThumbs * ( goonThumbs * 0.1 + Math.abs( inc ) ) ; }
    var oleftt = parseInt( $( '#gallerieAccueil_thumbIndex' ).css( 'left' ) ) ;
    var nleftt = oleftt + inc ; 
    $( '#gallerieAccueil_thumbIndex' ).css( { 'left': nleftt } ) ;
    if( dirThumbs == -1 && nleftt <= thumbOverlayWidth - thumbIndexWidth + incThumbWidthOver ){ stopThumbs( ) ; }
    else{ if( dirThumbs == 1 && nleftt >= 0 ){ stopThumbs( ) ; } }
    if( thumbsMoving == true && parseInt( Math.abs( inc ) ) != 0 ){ setTimeout( function( ){ moveThumbs( inc, laps ) ; }, laps ) ; }
    else{ thumbsMoving = false ; }
  }
  
  var stopThumbs = function( ){ goonThumbs = -1 ; }
  
  var gotoImage = function( index, time ){
    if( time == undefined ){ var time = 1500 ; }
    var gotoLeftFocus = - ( index - 1 ) * width ;
    var gotoLeftBw =  left - index * width ;
    $( '#gallerieAccueil_bwTank' ).animate( { left: [gotoLeftBw, 'swing'] }, time, function( ){ 
      currentBwLeft = gotoLeftBw ;
      currentIndex = index ; 
      setIndexAndTitle( ) ; } ) ;
    $( '#gallerieAccueil_focusTank' ).animate( { left: [gotoLeftFocus, 'swing'] }, time ) ;
  }

  $( window ).resize( function( ){
    left = ( $( 'body' ).width( ) - width ) / 2 ;
    if( left >= 0 ){
      $( '#gallerieAccueil_bwTank' ).css( 'left', left - currentIndex * width + 'px' ) ;
      $( '#gallerieAccueil_focusOverlay' ).css( 'left', currentFocusLeft + left + 'px' ) ; }
  } ) ;
}