var border = 20;

var totalWidth;
var totalHeight;
var imgCount;

var colCount;
var rowCount;

function performLayout() {
  var wallXY = Ext.fly('wall').getXY();
  var firstColCount = -1;
  var lastColCount = -1;
  if (rowCount > 1 && (rowCount * colCount) != imgCount) {
    var extremColCount = imgCount - (rowCount -2) * colCount;
    firstColCount = Math.round( extremColCount / 2 );
    if ( firstColCount != Math.round( firstColCount ) ) {
      firstColCount++;
    }
    lastColCount = extremColCount - firstColCount;
  }

  var currColCount = colCount;
  var imgIndex = 0;
  for (var rowIndex = 0; rowIndex < rowCount; rowIndex++ )
  {
    if (firstColCount != -1) {
      if (rowIndex === 0) {
         currColCount = firstColCount;
      }
      else if (rowIndex == (rowCount-1)) {
         currColCount = lastColCount;
      }
      else {
        currColCount = colCount;
      }
    }

    for (var colIndex = 0; colIndex < currColCount; colIndex++)
    {
      var img = document.createElement("img");
      var data = mediaDatas[imgIndex];
      var imgIndexTemp = 0;
      for (var key in mediaDatas) {
				if (key != 'remove' && key != 'indexOf') {
	        if (imgIndexTemp == imgIndex) {
	          data = mediaDatas[key];
	          break;
	        }
	        imgIndexTemp++;
				}
      }
      var item = data.dir || data.images[0];

      // dimensions
      item.width_tn = item.width_tn || item.width;
      item.height_tn = item.height_tn || item.height;

      var a = (totalWidth / currColCount) / item.width_tn;
      var b = (totalHeight / rowCount) / item.height_tn;
      var width  = 0;
      var height = 0;
      if (b > a) {
        width = Math.round( (0.5 + Math.random()/2 ) * (totalWidth / currColCount) );
        height = Math.round( item.height_tn / item.width_tn * width);
      }
      else {
        height = Math.round( (0.5 + Math.random()/2 ) * (totalHeight / rowCount) );
        width = Math.round( item.width_tn / item.height_tn * height);
      }

      // url
      var url = null;
      if (data.dir == null) {
        if (item.url_tn == null) {
          if (item.width <= 270 && item.height <= 150) {
            item.url_tn = item.url;
          }
          else  {
            item.url_tn = item.url.replace(/.jpg/i, '_tn.jpg');
          }
        }
        url = item.url_tn;
      }
      else {
        if (data.dir.url_tn == null) {
          data.dir.url_tn = data.dir.url + '/' + data.dir.url + '.jpg';
        }
        else {
          data.dir.url_tn = data.dir.url + '/' + data.dir.url_tn;
        }
        url = data.dir.url_tn;
      }

      // position
      var left = Math.round( colIndex * (totalWidth / currColCount)  + Math.random() * ( (totalWidth / currColCount)  - width - border) +  border/2 );
      var top = Math.round( rowIndex * (totalHeight / rowCount) + Math.random() * ( (totalHeight / rowCount) - height - border) +  border/2  );

      img.detail = data.label;
      img.title = data.label;
      img.src = url;
      img.width = width;
      img.height = height;
      img.style.position = 'absolute';
      img.style.left = wallXY[0] + border + left + 'px';
      img.style.top  = wallXY[1] + border + top + 'px';
/*
alert('coord: ' + left + '[' + Math.round( colIndex * (totalWidth / currColCount)) + '-' + Math.round( (1+colIndex) * (totalWidth / currColCount)) + '],' +
                + top  + '[' + Math.round( rowIndex * (totalHeight / rowCount))    + '-' + Math.round( (1+rowIndex) * (totalHeight / rowCount)) + ']'
      );
*/
      var styleClass;
      if (data.dir) {
        styleClass = document.createAttribute("class");
        styleClass.nodeValue = "dir";
        img.setAttributeNode(styleClass);
        var link = document.createElement("a");
        link.url = 'url'+imgIndex;
        link.href = data.dir.url;
        link.appendChild( img );
        Ext.fly('wall').appendChild( link );
      }
      else {
        var detail = document.createAttribute("detail");
        detail.nodeValue = data.label;
        img.setAttributeNode(detail);
        styleClass = document.createAttribute("class");
        styleClass.nodeValue = "pointer";
        img.setAttributeNode(styleClass);
        Ext.fly('wall').appendChild( img );
      }
      imgIndex++;
    }
  }
}

function computeLayout() {
  var wallSize = Ext.fly('wall').getSize();
//  alert("wall : width=" + wallSize.width + ", height=" + wallSize.height);
  totalWidth = wallSize.width - 2 * border;
  totalHeight = wallSize.height - 2 * border;
  imgCount = 0;
  for (var key in mediaDatas) {
		if (key != 'remove' && key != 'indexOf') {
	    imgCount++;
		}
  }

  var pixelsParVignette = Math.round( totalWidth * totalHeight / imgCount );
  var widthParVignette  = Math.round( totalWidth  * Math.sqrt( pixelsParVignette ) / totalHeight );

  var heightParVignette = Math.round( totalHeight * Math.sqrt( pixelsParVignette ) / totalWidth );

  colCount = Math.round( 0.5 + totalWidth / widthParVignette );
  rowCount = Math.round( 0.5 + totalHeight / heightParVignette );

  // reduction
  if ( ((rowCount - 1) * colCount) >= imgCount &&
       ((colCount - 1) * rowCount) >= imgCount
      ) {
    if (((rowCount - 1) * colCount) <= ((colCount - 1) * rowCount)) {
      colCount--;
    }
    else {
      rowCount--;
    }
  }
  else if ( ((rowCount - 1) * colCount) >= imgCount ) {
    rowCount--;
  }
  else if ( ((colCount - 1) * rowCount) >= imgCount ) {
    colCount--;
  }
//  alert('Table=' + colCount + '*' + rowCount );
}

function buildMediaDatas() {
  if (typeof dataImages == 'undefined') {
    alert('buildMediaDatas> dataImages does not exist');
    return;
  }

  if (typeof dataShuffle == 'undefined' ||
      dataShuffle !== false) {
    dataImages.sort( function() { return 0.5 - Math.random(); } );
  }


  mediaDatas = [];
  for (var i=0;i<dataImages.length;i++) {
    var dataImage = dataImages[i];
    var mediaData = {};
    dataImage.dir = dataImage.dir || false;
    if (dataImage.dir) {
      mediaData.label = dataImage.url;
      mediaData.dir = {};
      mediaData.dir.url = dataImage.url;
      mediaData.dir.width = dataImage.width;
      mediaData.dir.height = dataImage.height;
    }
    else {
      mediaData.label = dataImage.label || dataImage.url;
      dataImage.video = dataImage.video || null;
      if ( (dataImage.videotype || null) != 'dailymotion' ) {
        mediaData.images = [];
        mediaData.images[0] = {};
        mediaData.images[0].url = dataImage.url;
        mediaData.images[0].width = dataImage.width;
        mediaData.images[0].height = dataImage.height;
      }

      if (dataImage.video != null) {
        mediaData.label = mediaData.label || dataImage.video;
        mediaData.video = {};
        mediaData.video.url = dataImage.video.replace(/.avi/i, '');
        mediaData.video.width = dataImage.width;
        mediaData.video.height = dataImage.height;
        mediaData.video.type = dataImage.videotype || 'avi';
      }
      if ( (dataImage.images || null) != null) {
        mediaData.images = mediaData.images.concat( dataImage.images );
      }
    }
    mediaDatas[mediaData.label] = mediaData;
  }
}

function applyCopyright() {
  if (typeof wallCopyright == 'string') {
    Ext.fly('wallCopyright').dom.innerHTML = wallCopyright;
  }
}

Ext.onReady(function() {
  if (typeof mediaDatas == 'undefined') {
    buildMediaDatas();
  }
  if (typeof placeThumb == 'undefined' ||
      placeThumb !== false) {
    computeLayout();
    performLayout();
  }
  applyCopyright();
	autoDisplay();
});