/*
This script works with a preloaded variable "mediaDatas", which is an (associative ?) array of
{
  currImg: 0,            // default, transient
  videoSelection: false, // default, transient

  dir: { url: '20070823', width: 200,  height: 150 },
  label: 'toto',
  images: [ {
      url   : 'AudreyVernon@MadameDeGoal-20090109.jpg',    width   : 916, height   : 516,
      url_tn: 'AudreyVernon@MadameDeGoal-20090109_tn.jpg', width_tn: 916, height_tn: 516
    }
  ],
  video: {
    url:'AudreyVernon@MadameDeGoal-20090109.avi', width: 916, height: 516, type:''
  }
}
*/
var mediaDatas;
var mediaAutoDisplay;
var mediaAutoDisplayMode;
var mediaAutoDisplayImage;

var MEDIA = {
  // constants
  DISPLAY_MODE : { IMAGE:{}, VIDEO:{} },
  THUMB_MAX_COUNT : 5,
  WINDOW_WIDTH_OFFSET : 7+7,
  WINDOW_HEIGHT_OFFSET_IMG : 25+7,
  WINDOW_HEIGHT_OFFSET_AVI : 25+48,
  WINDOW_HEIGHT_OFFSET_THUMB : 16,
  WIN_HEIGHT_OFFSET_VIDEO_AVI : 20,
  WIN_HEIGHT_OFFSET_VIDEO_DAILYMOTION : 20,
  WIN_HEIGHT_OFFSET_VIDEO_YOUTUBE : 25,
  WINDOW_MAX_WIDTH : 916,
  WINDOW_MAX_HEIGHT : 600,
  MEDIA_PANEL_ID : 'mediaPanel',
  IMAGE_MODE_BUTTON_ID : 'imgModeButton',
  DL_LINK_ID : 'downloadLink',

  // variables
  win : null,
  data : null,
  detailImageMode : true
};

var currNav;
var imageTitle = '';
var win = null;
var thumbDisplay;
var firstDisplay;

function updateThumbLabel(id, imgName, currImg, select) {
  if (imgName != null) {
    var name = imgName.replace(/\.jpg/,'_tn.jpg');
    Ext.fly('thumbLabel'+id).dom.innerHTML = '<img id="thumbImg' + id + '" class="thumb' + (select?' select':' unselect') + '" src="' + name + '" title="' + imgName + '" width="64" height="48">';
    Ext.fly('thumbLabel'+id).setVisible(true);
    Ext.getCmp('thumbLabel'+id).currImg = currImg;
  }
  else {
    Ext.fly('thumbLabel'+id).dom.innerHTML = '';
    Ext.fly('thumbLabel'+id).setVisible(false);
  }
}

function updateThumbs(currCenter) {
  var currImg, imgName, i;
  if (MEDIA.DISPLAY_MODE.value == MEDIA.DISPLAY_MODE.IMAGE && thumbDisplay) {
    // si on est en mode custom, on affiche les thumbs
    if (MEDIA.data.images.length < MEDIA.THUMB_MAX_COUNT) {
      // si on a moins de MEDIA.THUMB_MAX_COUNT thumbs, on affiche tout sans les fleches de navigations
      Ext.fly('prevButton').setVisible(false);
      Ext.fly('nextButton').setVisible(false);

      for (i=0; i<MEDIA.THUMB_MAX_COUNT; i++) {
        if (i < MEDIA.data.images.length) {
          // si y a des thumbs a afficher
          currImg = i;
          imgName = MEDIA.data.images[currImg].url;

          updateThumbLabel(i, imgName, currImg, currImg == MEDIA.data.currImg);
        }
        else {
          // on a deja tout affiche, alors on masque les thumbs restants
          updateThumbLabel(i);
        }
      }
    }
    else {
      // si on a plus de MEDIA.THUMB_MAX_COUNT thumbs, on affiche les fleches de navigations
      Ext.fly('prevButton').setVisible(true);
      Ext.fly('nextButton').setVisible(true);

      if (currCenter < (MEDIA.THUMB_MAX_COUNT+1)/2 ) {
        // on affiche les MEDIA.THUMB_MAX_COUNT premiers
        for (i=0; i<MEDIA.THUMB_MAX_COUNT; i++) {
          // cas des autres thumbs custom
          currImg = i;
          imgName = MEDIA.data.images[currImg].url;

          updateThumbLabel(i, imgName, currImg, currImg == MEDIA.data.currImg);
        }
        Ext.getCmp('prevButton').setDisabled(true);
        Ext.getCmp('nextButton').setDisabled(false);
      }
      else if (currCenter > MEDIA.data.images.length-1-(MEDIA.THUMB_MAX_COUNT+1)/2) {
        // on affiche les MEDIA.THUMB_MAX_COUNT derniers
        for (i=0; i<MEDIA.THUMB_MAX_COUNT; i++) {
          currImg = MEDIA.data.images.length-MEDIA.THUMB_MAX_COUNT+i;
          imgName = MEDIA.data.images[currImg].url;

          updateThumbLabel(i, imgName, currImg, currImg == MEDIA.data.currImg);
        }
        Ext.getCmp('prevButton').setDisabled(false);
        Ext.getCmp('nextButton').setDisabled(true);
      }
      else {
        // on affiche les MEDIA.THUMB_MAX_COUNT centres sur currImg
        for (i=0; i<MEDIA.THUMB_MAX_COUNT; i++) {
          currImg = currCenter-(MEDIA.THUMB_MAX_COUNT-1)/2+i;
          imgName = MEDIA.data.images[currImg].url;

          updateThumbLabel(i, imgName, currImg, currImg == MEDIA.data.currImg);
        }
        Ext.getCmp('prevButton').setDisabled(false);
        Ext.getCmp('nextButton').setDisabled(false);
      }
    }
  } else {
    for (i=0; i<MEDIA.THUMB_MAX_COUNT; i++) {
      Ext.fly('thumbLabel'+i).dom.innerHTML = '';
      Ext.fly('thumbLabel'+i).setVisible(false);
    }
  }
}

function getReducedSize(imgWidth,imgHeight) {
  var newImgWidth, newImgHeight;
  var newSize = { width:imgWidth, height:imgHeight, reduced: false };
  if (newSize.width > MEDIA.WINDOW_MAX_WIDTH) {
    newImgWidth = MEDIA.WINDOW_MAX_WIDTH;
    newImgHeight = Math.round( newImgWidth * newSize.height / newSize.width );
    newSize.width = newImgWidth;
    newSize.height = newImgHeight;

    newSize.reduced = true;
  }
  if (newSize.height > MEDIA.WINDOW_MAX_HEIGHT) {
    newImgHeight = MEDIA.WINDOW_MAX_HEIGHT;
    newImgWidth = Math.round( newImgHeight * newSize.width / newSize.height );
    newSize.width = newImgWidth;
    newSize.height = newImgHeight;
    newSize.reduced = true;
  }
  return newSize;
}

function updateBottomBar() {
  if (MEDIA.DISPLAY_MODE.value == MEDIA.DISPLAY_MODE.IMAGE) {
    Ext.fly('videoUrl').setVisible(false);
  }
  else {
    Ext.fly('videoUrl').setVisible(MEDIA.data.video.type == 'avi');
    Ext.fly('prevButton').setVisible(false);
    Ext.fly('nextButton').setVisible(false);
    Ext.fly('thumbLabel1').setVisible(false);
  }
}

function displayImage() {
  var imgTitle = null;
  var imgName = null;
  var imgWidth = null;
  var imgHeight = null;
  var imgHTML = null;
  var currImg = 0;

  var titleSuffix = '';
  currImg = MEDIA.data.currImg;

  imgName = MEDIA.data.images[currImg].url;
  imgTitle = (MEDIA.data.images.length > 1) ? imgName : MEDIA.data.label;
  imgWidth  = MEDIA.data.images[currImg].width  || 720; // Rozebud's default caps width
  imgHeight = MEDIA.data.images[currImg].height || 405; // Rozebud's default caps height


  var size = getReducedSize(imgWidth,imgHeight);
  imgWidth = size.width;
  imgHeight = size.height;
  titleSuffix = (size.reduced?' (réduit)':'');

  imgHTML = '<img width="' + imgWidth + '" height="' + imgHeight + '" src="' + imgName + '" title="' + imgTitle + '"/>';
  if (size.reduced) {
    imgHTML = '<a href="' + imgName + '" target=_blank>' + imgHTML + '</a>';
  }

  imgTitle = imgTitle + titleSuffix;
  currNav = currImg;

  win.setTitle(imgTitle);
  firstDisplay = false;
  Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.width = imgWidth;
  Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.height = imgHeight;
  Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.innerHTML = imgHTML;
  Ext.fly('videoUrl').dom.innerHTML = '';

  win.setWidth(imgWidth+MEDIA.WINDOW_WIDTH_OFFSET);
  var winHeight = imgHeight+MEDIA.WINDOW_HEIGHT_OFFSET_AVI+((!firstDisplay&&thumbDisplay)?MEDIA.WINDOW_HEIGHT_OFFSET_THUMB:0);
  win.setHeight(winHeight);

  updateBottomBar();
  updateThumbs(currImg);
  win.getBottomToolbar().setVisible(thumbDisplay || ((MEDIA.data.video||null) != null));
  win.syncSize();
  win.center();
}

function displayVideo() {
  win.setTitle(MEDIA.data.label);
  firstDisplay = true;
  if (MEDIA.data.video.type == 'avi') {
    Ext.fly('videoUrl').dom.innerHTML = '<a href="' + MEDIA.data.video.url + '.avi">Cliquez ici pour télécharger la vidéo</a>';
    Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.innerHTML =
      '<object width="'+MEDIA.data.video.width+'" height="'+(MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_AVI)+'" classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"> ' +
      '<param name="previewImage" value="' + MEDIA.data.label + '" /> ' +
      '<param name="src" value="' + MEDIA.data.video.url.replace(/@/,"%40") + '.avi" /> ' +
      '<param name="custommode" value="none" /> ' +
      '<param name="autoPlay" value="false" /> ' +
      '<embed src="' + MEDIA.data.video.url.replace(/@/,"%40") + '.avi" previewImage="' + MEDIA.data.video.url.replace(/@/,"%40") + '.jpg" width="'+MEDIA.data.video.width+'" height="'+(MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_AVI)+'" ' +
      'type="video/divx" custommode="none" autoPlay="false" pluginspage="http://go.divx.com/plugin/download/">' +
      '</embed>';
  } else if (MEDIA.data.video.type == 'dailymotion') {
    Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.innerHTML =
      '<object width="' + MEDIA.data.video.width + '" height="' + (MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_DAILYMOTION) + '">' +
      '<param name="movie" value="' + MEDIA.data.video.url + '"></param>' +
      '<param name="allowFullScreen" value="true"></param>' +
      '<param name="allowScriptAccess" value="always"></param>' +
      '<embed src="' + MEDIA.data.video.url + '" type="application/x-shockwave-flash" width="' + MEDIA.data.video.width + '" height="' + (MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_DAILYMOTION) + '" allowFullScreen="true" allowScriptAccess="always"></embed>' +
      '</object>';
  } else if (MEDIA.data.video.type == 'youtube') {
    Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.innerHTML =
      '<object width="' + MEDIA.data.video.width + '" height="' + (MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_YOUTUBE) + '">' +
      '<param name="movie" value="' + MEDIA.data.video.url + '"></param>' +
      '<param name="allowFullScreen" value="true"></param>' +
      '<param name="allowScriptAccess" value="always"></param>' +
      '<embed src="' + MEDIA.data.video.url + '" type="application/x-shockwave-flash" width="' + MEDIA.data.video.width + '" height="' + (MEDIA.data.video.height+MEDIA.WIN_HEIGHT_OFFSET_VIDEO_YOUTUBE) + '" allowFullScreen="true" allowScriptAccess="always"></embed>' +
      '</object>';
  } else if (MEDIA.data.video.type == 'html') {
    Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.innerHTML = MEDIA.data.video.url;
  }

  var currImg = MEDIA.data.currImg || 0;

  win.setWidth( MEDIA.data.video.width + MEDIA.WINDOW_WIDTH_OFFSET);
  var winHeight = MEDIA.WINDOW_HEIGHT_OFFSET_AVI+
    MEDIA.data.video.height +
    ((MEDIA.data.video.type == 'avi')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_AVI:0) +
    ((MEDIA.data.video.type == 'dailymotion')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_DAILYMOTION:((MEDIA.data.video.type == 'youtube')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_YOUTUBE:0)) +
    (thumbDisplay?MEDIA.WINDOW_HEIGHT_OFFSET_THUMB:0);
  win.setHeight( winHeight );
  Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.width = MEDIA.data.video.width;
  Ext.fly(MEDIA.MEDIA_PANEL_ID).dom.height =
    MEDIA.data.video.height +
    ((MEDIA.data.video.type == 'avi')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_AVI:0) +
    ((MEDIA.data.video.type == 'dailymotion')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_DAILYMOTION:((MEDIA.data.video.type == 'youtube')?MEDIA.WIN_HEIGHT_OFFSET_VIDEO_YOUTUBE:0));

  updateBottomBar();
  updateThumbs(currImg);
  win.getBottomToolbar().setVisible(thumbDisplay || ( ((MEDIA.data.images||null) != null)) && MEDIA.data.video.type != 'html' );
  win.syncSize();
  win.center();
}

function displayImageFromIndex( event, element ) {
  var thumbLabel = Ext.getCmp( 'thumbLabel' + element.id.substr(8) ); // 8 = 'thumbImg'
  if (MEDIA.data.currImg != thumbLabel.currImg) {
    MEDIA.data.currImg = thumbLabel.currImg;
    displayImage();
  }
}

function navigateImage(button, event) {
  if (button.getId() == 'prevButton') {
    currNav = Math.min(currNav,MEDIA.data.images.length-1-(MEDIA.THUMB_MAX_COUNT+1)/2) - MEDIA.THUMB_MAX_COUNT;
  }
  else if (button.getId() == 'nextButton') {
    currNav = Math.max(currNav,(MEDIA.THUMB_MAX_COUNT-1)/2) + MEDIA.THUMB_MAX_COUNT;
  }
  updateThumbs( currNav );
}

function toggleDetailModeFromId(id, state) {
  var newDisplayMode = MEDIA.DISPLAY_MODE.IMAGE;
  if (state) {
     newDisplayMode = (id == 'imgButton') ? MEDIA.DISPLAY_MODE.IMAGE : MEDIA.DISPLAY_MODE.VIDEO;
  }
  else {
     newDisplayMode = (id == 'imgButton') ? MEDIA.DISPLAY_MODE.VIDEO : MEDIA.DISPLAY_MODE.IMAGE;
  }

  if (newDisplayMode == MEDIA.DISPLAY_MODE.value) {
    return;
  }

  MEDIA.DISPLAY_MODE.value = newDisplayMode;

  if (MEDIA.DISPLAY_MODE.value == MEDIA.DISPLAY_MODE.IMAGE) {
    displayImage();
  }
  else {
    displayVideo();
  }
}

function toggleDetailMode(button, state) {
  toggleDetailModeFromId(button.getId(), state);
}
function createWin() {
  firstDisplay = true;
  win = new Ext.Window({
    id: 'detailWindow',
    closable: true,
    modal: true,
    resizable: false,
    border:false,
    plain:true,
    items: {
     id: 'mediaPanel'
    },
    bbar : [{
        xtype: 'label',
        id: 'videoUrl',
        visible: false,
        style: 'margin-left: 10px;',
        anchor: '50%'
        },{
        xtype: 'button',
        id: 'prevButton',
        tooltip: 'Image précédente',
        tooltipType: 'title',
        icon: '/core/images/prev.png',
        scale: 'large',
        handler: navigateImage
      },{
        xtype: 'label',
        id: 'thumbLabel0',
        visible: false,
        anchor: '50%'
      },{
        xtype: 'label',
        id: 'thumbLabel1',
        visible: false,
        anchor: '50%'
      },{
        xtype: 'label',
        id: 'thumbLabel2',
        visible: false,
        anchor: '50%'
      },{
        xtype: 'label',
        id: 'thumbLabel3',
        visible: false,
        anchor: '50%'
      },{
        xtype: 'label',
        id: 'thumbLabel4',
        visible: false,
        anchor: '50%'
      },{
        xtype: 'button',
        id: 'nextButton',
        tooltip: 'Image suivante',
        tooltipType: 'title',
        icon: '/core/images/next.png',
        scale: 'large',
        style: 'margin-left: 10px;',
        handler: navigateImage

      },'->',{
        xtype: 'button',
        id: 'imgButton',
        text: 'Images',
        tooltip: 'Mode images',
        tooltipType: 'title',
        icon: '/core/images/img.png',
        scale: 'large',
        enableToggle: true,
        toggleGroup: 'detailMode',
        allowDepress: false,
        toggleHandler: toggleDetailMode,
        pressed: true
      },{
        xtype: 'button',
        id: 'vidButton',
        text: 'Vidéos',
        tooltip: 'Mode vidéos',
        tooltipType: 'title',
        icon: '/core/images/vid.png',
        scale: 'large',
        enableToggle: true,
        toggleGroup: 'detailMode',
        allowDepress: false,
        toggleHandler: toggleDetailMode
      }
    ]
  });
}

function displayMediaWindow(detailData, displayMode, currImageName) {
  MEDIA.data = mediaDatas[detailData];
  if (MEDIA.data != null)
  {
    // default values
    MEDIA.data.currImg = 0;
    var imageDisplay = ( (MEDIA.data.images || null) != null ) &&
                       ( ( (MEDIA.data.video || null) == null) ||
                         ( (MEDIA.data.video.type || null) != 'html') );
    thumbDisplay = imageDisplay && (MEDIA.data.images.length > 1);

    var videoDisplay = (MEDIA.data.video || null) != null;

    createWin();
    win.show();

    Ext.fly('imgButton').setVisible(imageDisplay && videoDisplay);
    Ext.fly('vidButton').setVisible(imageDisplay && videoDisplay);
    Ext.fly('videoUrl').setVisible(false);
    if ( !thumbDisplay ) {
      Ext.fly('prevButton').setVisible(false);
      Ext.fly('nextButton').setVisible(false);
    }
    else {
      Ext.getCmp('prevButton').disable();
    }
    if ( imageDisplay &&
        ( !videoDisplay ||
          displayMode != MEDIA.DISPLAY_MODE.VIDEO )
        ) {
      MEDIA.DISPLAY_MODE.value = MEDIA.DISPLAY_MODE.IMAGE;
      if (currImageName != null) {
        for (var i=0; i<MEDIA.data.images.length; i++) {
          if (MEDIA.data.images[i].url == currImageName) {
            MEDIA.data.currImg = i;
            break;
          }
        }
      }
      displayImage();
    }
    else if (videoDisplay) {
      MEDIA.DISPLAY_MODE.value = MEDIA.DISPLAY_MODE.VIDEO;
      displayVideo();
      Ext.getCmp('imgButton').toggle(false, false);
      Ext.getCmp('vidButton').toggle(true, false);
    }

    for (var thumbLabelIndex=0;thumbLabelIndex<MEDIA.THUMB_MAX_COUNT;thumbLabelIndex++) {
      Ext.fly('thumbLabel' + thumbLabelIndex).on('click', displayImageFromIndex, this);
    }
  }
}

function displayMediaWindowFromClick(t) {
  if (t.attributes.detail != null) {
    // retrieve day ID
    displayMediaWindow( t.attributes.detail.value );
  }
}

function autoDisplay() {
  mediaAutoDisplay = (mediaAutoDisplay || null);
  mediaAutoDisplayMode = (mediaAutoDisplayMode || null);
  mediaAutoDisplayImage = (mediaAutoDisplayImage || null);
  displayMediaWindow( mediaAutoDisplay, mediaAutoDisplayMode, mediaAutoDisplayImage );
}

Ext.onReady(function() {
  Ext.getBody().on('click',function(e, t){
    displayMediaWindowFromClick(t);
  });
});