var MAX_PER_ROW = 3;
var MAX_ROWS = 3;
var currentPage = 1;
var selectedImage;
var selectedMedia;
var newImageIdCounter = 0;
var pageCounts = Array();
var currentMode = 'all';
pageCounts['all'] = 0;
pageCounts['files'] = 0;
pageCounts['images'] = 0;

// Start with A, end with Z
var jumpLinks = Array();

function clickImage(e) {
  if (document.all) {
    elem = e.srcElement;
  } else {
    elem = e.target;
  }
  
  if (elem.nodeName == 'IMG' && elem.className != 'WikiAnchor' && elem.className != 'WikiMedia') {
    selectImage(elem);
    showImagePropertiesPopup();    
  } else {
    unSelectImage();
    hideImagePropertiesPopup();
  } 

  if (elem.nodeName == 'IMG' && elem.className == 'WikiMedia') {
    selectMedia(elem);
  } else {
    unSelectMedia();
  }

}

function unSelectMedia() {
  selectedMedia = null;
}

function selectMedia(media) {
  unSelectMedia(); // unselect old media first
  selectedMedia = media;
}

var imageListPopupWindow;
function toggleImageEditTool() {
  if (!imageListPopupWindow) {
    imageListPopupWindow = new Window('imageListPopup', {
      minWidth: 300, 
      title: 'Images & Files', 
      resizable: false, 
      maximizable: false,
      className: "wikispaces", 
      showEffect: Element.show, 
      hideEffect: Element.hide});
    imageListPopupWindow.setContent('imageDiv', true, false);
    imageListPopupWindow.setSize(0, Element.getDimensions(imageListPopupWindow.element).height + 10);
    imageListPopupWindow.toFront();

    if (document.all) {
      scrollImagePopup = function() { 
        if (imageListPopupWindow) {
          imageListPopupWindow.element.style.top = document.documentElement.scrollTop + 'px';
        }
      };
      registerOnScroll(scrollImagePopup);
    } else {
      imageListPopupWindow.element.style.position = 'fixed';
    }

    imageListPopupWindow.element.style.top = '0';
    var left = Element.getDimensions(document.getElementsByTagName('body')[0]).width - Element.getDimensions(imageListPopupWindow.element).width - 5;
    imageListPopupWindow.element.style.left = left + 'px';

  }

  if (imageListPopupWindow.element.style.display == 'none') {
    imageListPopupWindow.toFront();
    if (imageListPopupWindow.isMinimized()) {
      imageListPopupWindow.minimize();
    }
    imageListPopupWindow.show();
  } else {
    imageListPopupWindow.hide();
  }
}

function findCenteringElement(element) {
  while (element) {
    if (element.tagName && (element.tagName.toUpperCase() == 'CENTER' || (element.tagName.toUpperCase() == 'DIV' && (element.style.textAlign == 'center' || element.align == 'center')))) {
      return element;
    }
    if (element.parentNode) {
      element = element.parentNode;
    } else {
      return null;
    }
  }
  return null;
}

function getImageAlignment(element) {
  // find centering div or center tag
  var centered = findCenteringElement(element);
  if (centered) {
    return 'center';
  }
  return element.align;
}

function setImageLink(html) {
  document.getElementById('imageLink').innerHTML = html;
  document.getElementById('imageLinkControlsActive').style.display='inline';
  document.getElementById('imageLinkControlsInactive').style.display='none';
}

function unsetImageLink() {
  document.getElementById('imageLink').innerHTML = 'None';
  document.getElementById('imageLinkControlsActive').style.display='none';
  document.getElementById('imageLinkControlsInactive').style.display='inline';
}

function unSelectImage() {
  setSelectedValue(document.imagePropertiesForm.imageAlign, '');
  unsetImageLink();
  selectedImage = null;
}

function selectImage(image) {
  unSelectImage(); // unselect old image first
  selectedImage = image;
  if (currentMode == 'files') {
    setListMode('images');
  }

  setSelectedValue(document.imagePropertiesForm.imageAlign, getImageAlignment(image));
  if (image.parentNode.nodeName == 'A' && image.parentNode.href) {
    setImageLink(image.parentNode.href);
  } else {
    unsetImageLink();
  }
}

function setImageAlignment(align) {
  if (selectedImage) {
    
    if (align == 'center') {
      if (findCenteringElement(selectedImage)) {
        return; // already centered
      } else {
        selectedImage.align = '';

        // center image by adding a div wrapper
        var oRTE = document.getElementById(editorId).contentWindow.document;

        newDiv = oRTE.createElement('div');
        newDiv.style.textAlign = 'center';
        
        imageNode = selectedImage;
        if (selectedImage.parentNode.nodeName == 'A') {
          imageNode = selectedImage.parentNode;
        }

        imageNode.parentNode.appendChild(newDiv);
        imageNode.parentNode.replaceChild(newDiv, imageNode);
        newDiv.appendChild(imageNode);
      }
    } else {
      if (centering = findCenteringElement(selectedImage)) {
        // remove the centering element
        for (i = 0; i < centering.childNodes.length; i++) {
          centering.parentNode.insertBefore(centering.childNodes.item(i), centering);
        }
        centering.parentNode.removeChild(centering);
      }
      selectedImage.align = align;
    }
    showImagePropertiesPopup();
    detectedChange();
  }
}

/* 
 * Call this once to set up the files in the image/file tool
 */
function showFiles() {
  for (i = 0; i < allFiles.length; i++) {
    var mimeType = allFiles[i][1];
    if (isImage(mimeType)) {
      type = 'images';
    } else {
      type = 'files';
    }
    pageCounts[type]++;
  }
  pageCounts['all'] = allFiles.length;


  var table = document.getElementById('imageSection');
  for (i = 0; i < MAX_ROWS; i++) {
    var row = document.createElement('tr');
    for (j = 0; j < MAX_PER_ROW; j++) {
      row.appendChild(document.createElement('td'));
    }
    table.appendChild(row);
  }

  resetPages();
  resetJumpLinks();
  showPage(1);
}

/*
 * Set the current list mode, stored in currentMode global
 */
function setListMode(mode) {
  if (mode == currentMode) {
    return;
  }

  var form = document.forms['listModeForm'];
  for (var i=0; i < form.listMode.length; i++) {
    if (form.listMode[i].value == mode) {
      form.listMode[i].checked = true;
    }
  }

  currentMode = mode;
  resetPages();
  resetJumpLinks();
  showPage(1);
}

function isImage(mimeType) {
  if (mimeType == 'image/png' || mimeType == 'image/x-png' || mimeType == 'image/jpeg' || mimeType == 'image/gif' || mimeType == 'image/jpg' || mimeType == 'image/pjpeg') {
    return true;
  } else {
    return false;
  }
}

/*
 * Get the table cell that a file of position would occupy
 */
function getCell(position) {
  var table = document.getElementById('imageSection');
  var rows = table.getElementsByTagName("tr");
  row = rows[Math.floor(position / MAX_PER_ROW)];
  cells = row.getElementsByTagName("td");
  cell = cells[position % MAX_PER_ROW];

  return cell;
}

/*
 * Empty the cell of given position
 */
function removeFile(position) {
  var cell = getCell(position);

  var td1 = document.createElement("td");
  td1.style.textAlign = 'center';
  td1.style.padding = '5px;';

  cell.parentNode.replaceChild(td1, cell);
}

/* 
 * Add a newly uploaded file to the file array, at the end, and shift the view to that file's page
 */
function addNewFile(fileName, mimeType) {
  var file = new Array();
  file[0] = fileName;
  file[1] = mimeType;
  allFiles[allFiles.length] = file;

  if (isImage(mimeType)) {
    type = 'images';
  } else {
    type = 'files';
  }
  pageCounts[type]++;
  pageCounts['all'] = allFiles.length;

  if (type == 'images' && currentMode == 'files') {
    setListMode('images');
  } else if (type == 'files' && currentMode == 'images') {
    setListMode('files');
  }

  resetPages();
  showLastPage();
}

/*
 * Put a file in a cell
 */
function addFile(fileName, mimeType, position) {
  var cell = getCell(position);

  // determine the type by trying to load the file as an image, is there a better way?
  var type;
  if (isImage(mimeType)) {
    type = 'image';
  } else {
    type = 'file';
  }

  var td1 = document.createElement("td");
  td1.style.textAlign = 'center';
  td1.style.padding = '5px;';
  td1.title = fileName;

  Event.observe(td1, "dblclick", 
                function() {
                  insertImageInEditor(fileName, type);
                }, true);


  var img = document.createElement("img");
  if (type == 'image') {
    img.src = '/space/image/64x64/' + fileName;
    img.width = 64;
    img.height = 64;
  } else {
    loadMimeImage(img, mimeType);
  }
  img.className = 'draggableImage';
  img.id = type + 'Link_' + fileName;

  // disable drag and drop of these images in firefox.
  // Ideally this would happen only in the text editor
  img.onmousedown = function() { return false; }; 

  var trimFileName = fileName;
  if (fileName.length > 10) {
    trimFileName = fileName.substr(0,10) + '...';
  }
  td1.appendChild(img);
  td1.appendChild(document.createElement("br"));
  td1.appendChild(document.createTextNode(trimFileName));

  cell.parentNode.replaceChild(td1, cell);
}

function addFileError(error) {
  alert(error);
}

function getSelectedValue(element) {
  return element[element.selectedIndex].value;
}

function setSelectedValue(element, value) {
  for(i=0; i<element.options.length; i++) {
    if (element[i].value == value) {
      element.selectedIndex = i;
      return;
    }
  }
}

function getPageCount() {
  return Math.ceil(pageCounts[currentMode] / (MAX_ROWS * MAX_PER_ROW));
}

/*
 * Redraw the page bar.  Used when the page info may have changed because of mode switch or new file
 */
function resetPages() {
  var element = document.getElementById('imagePages');
  element.innerHTML = 'Page: ';
  var pages = getPageCount();
  var lastPage = pages;

  var startPage = 1;
  var endPage = pages;
  if (pages > 10) {
    startPage = currentPage - 5;
    if (startPage < 1) {
      startPage = 1;
    }
    endPage = startPage + 10;
    if (endPage > lastPage) {
      endPage = lastPage;
   }
  } 

  if (startPage > 1) {
    addPage(1);
    if (startPage > 2) {
      element.appendChild(document.createTextNode('..'));
    }
  }

  for(i=startPage; i <= endPage; i++) {
    addPage(i);
  }

  if (lastPage > endPage) {
    if (endPage + 1 < lastPage) {
      element.appendChild(document.createTextNode('..'));
    }
    addPage(lastPage);
  }
}

function resetJumpLinks() {
  var currentEntry = '#';
  var page = 1;
  var pageCount = 0;

  var ucaseRegexp = /^[A-Z]$/
  var numberRegexp = /^[0-9]$/

  var entries = Array('#');
  for(i = 65; i < 65+26; i++) {
    entries[entries.length] = String.fromCharCode(i);
  }

  for(i = 0; i < entries.length; i++) {
    jumpLinks[entries[i]] = null;
  }

  for (var i = 0; i < allFiles.length; i++) {
    var fileName = allFiles[i][0];
    var mimeType = allFiles[i][1];
    if (currentMode == 'all' || (currentMode == 'images' && isImage(mimeType)) || (currentMode == 'files' && !isImage(mimeType))) {
      if (pageCount >= (MAX_ROWS * MAX_PER_ROW)) {
        pageCount = 0;
        page++;
      }
      
      if(fileName.substring(0,1).toUpperCase() != currentEntry) {
        currentEntry = fileName.substring(0,1).toUpperCase();
        if (ucaseRegexp.exec(currentEntry)) {
          jumpLinks[currentEntry] = page;
        } else if (numberRegexp.exec(currentEntry)) {
          jumpLinks['#'] = page;
        }
      }
      pageCount++;
    }
  }

  var jumpElement = document.getElementById('imageJumpLinks');
  jumpElement.innerHTML = 'Jump: ';

  for(i = 0; i < entries.length; i++) {
    var jumpLetter = entries[i];
    var number = jumpLinks[jumpLetter];

    if (number) {
      var a = createJumpPage(jumpLetter, number);
      jumpElement.appendChild(a);
      jumpElement.appendChild(document.createTextNode(' '));
    } else {
      jumpElement.appendChild(document.createTextNode(jumpLetter + ' '));
    }
  }
}

function createJumpPage(jumpLetter, number) {
    var a = document.createElement('a');
    a.href = '#';
    a.appendChild(document.createTextNode(jumpLetter));
    Event.observe(a, 'click', function() {showPage(number); void(0); }, false);

    return a;
}
/*
 * Add a new page to the page bar
 */
function addPage(number) {
  var element = document.getElementById('imagePages');
  //  var number = getLastPage() + 1;
  var span = document.createElement('span');
  span.style.textDecoration = 'underline';
  span.style.cursor = 'pointer';

  span.appendChild(document.createTextNode(number));
  element.appendChild(document.createTextNode(' '));
  element.appendChild(span);

  Event.observe(span, 'click', function() { showPage(number); void(0); }, false);
}

/*
 * Switch to another page
 */
function showPage(page) {
  currentPage = page;

  var startAt = (page - 1) * (MAX_PER_ROW * MAX_ROWS);

  var position = 0;
  validCount = 0;
  for (var i = 0; i < allFiles.length; i++) {
    var fileName = allFiles[i][0];
    var mimeType = allFiles[i][1];
    if (currentMode == 'all' || (currentMode == 'images' && isImage(mimeType)) || (currentMode == 'files' && !isImage(mimeType))) {
      if (validCount >= startAt) {
        addFile(fileName, mimeType, position);
        position++;
      }
      validCount++;
    }
    if (position >= (MAX_ROWS * MAX_PER_ROW)) {
      break;
    }
  }

  for (var i = position; i < (MAX_ROWS * MAX_PER_ROW); i++) {
    removeFile(i);
  }

  resetPages();

  // Highlight page
  var pages = document.getElementById('imagePages').getElementsByTagName("span");

  for(var j=0; j < pages.length; j++) {
    if (pages[j].innerHTML == page) {
      pages[j].style.fontWeight = 'bold';
    } else {
      pages[j].style.fontWeight = 'normal';
    }
  }

}

/*
 * Get the number of the current last page
 */
function getLastPage() {
  return getPageCount();
}

/*
 * Switch to the last page
 */
function showLastPage() {
  showPage(getLastPage());
}

function showExternalImage() {
  var url = document.getElementById('externalImageUrl').value;
  var container = document.getElementById('externalImage');

  var kids = container.childNodes;
  for(var i = 0; i < kids.length; i++) {
    container.removeChild(kids[i]);
  }

  var image = new Image();
  var type = 'image';
  image.src = url;
  if (image.height == 0) {
    alert('Please enter the address of an external image.');
    return;
  }

  var img = document.createElement("img");
  img.src = url;
  img.width = 64;
  img.height = 64;
  img.alt = 'external ' + type;
  img.className = 'draggableImage';
  img.id = type + 'Link_' + url;

  container.appendChild(img);

  Event.observe(img, "dblclick", 
                function() {
                  insertImageInEditor(url, type);
                }, true);
}

function loadMimeImage(img, mimeType) {
  // get the corret mime image if it exists
  var mimeImage = new Image();
  mimeImage.src = '/i/mime/64/' + mimeType + '.png';
  if (mimeImage.height > 0) {
    img.src = mimeImage.src;
  } else {
    img.src = '/i/mime/64/empty.png';
  }
  img.width = 64;
  img.height = 64;
}

function startSpinner() {
  var element = document.getElementById('uploadSpinner');
  element.src = '/i/spinner.gif';
}

function stopSpinner() {
  var element = document.getElementById('uploadSpinner');
  element.src = '/i/c.gif';
}

var imagePropertiesPopupWindow;
function showImagePropertiesPopup() {
  if (!imagePropertiesPopupWindow) {
    imagePropertiesPopupWindow = new Window('content_win', {
      minWidth: 250, 
      title: 'Image Properties', 
      resizable: false, 
      className: "wikispaces", 
      minimizable: false,
      maximizable: false,
      showEffect: Element.show, 
      hideEffect: Element.hide});
    imagePropertiesPopupWindow.setContent('imageProperties', true, false);
    imagePropertiesPopupWindow.setSize(0, 75);
  }

  // Shift to correct spot
  Position.prepare();
  var offset = Position.positionedOffset(selectedImage);
  var editorOffset = Position.cumulativeOffset(document.getElementById(editorId));

  var left = offset[0] + editorOffset[0] + Element.getDimensions(selectedImage).width + 7;
  var top = offset[1] + editorOffset[1] + Element.getDimensions(selectedImage).height + 7;

  // check for popup overflowing window
  var windowDimensions = Element.getDimensions(document.getElementsByTagName('body').item(0));
  var popupDimensions = Element.getDimensions(imagePropertiesPopupWindow.element);
  if (left + popupDimensions.width > windowDimensions.width) {
    left = windowDimensions.width - popupDimensions.width;
  }
  if (top + popupDimensions.height > windowDimensions.height) {
    top = windowDimensions.height - popupDimensions.height;
  }
  

  imagePropertiesPopupWindow.toFront(); 
  imagePropertiesPopupWindow.setLocation(top, left);

  if (imagePropertiesPopupWindow.isMinimized()) {
    imagePropertiesPopupWindow.minimize();
  }

  imagePropertiesPopupWindow.show(); 
}

function hideImagePropertiesPopup() {
  if (imagePropertiesPopupWindow) {
    imagePropertiesPopupWindow.hide();
  }
}

function insertImageInVisualEditor(imageName, type) {
  if (type == 'image') {
    if (imageName.substring(0, 'http://'.length) == 'http://' ||
        imageName.substring(0, 'https://'.length) == 'https://' ||
        imageName.substring(0, 'ftp://'.length) == 'ftp://') {
      insertInEditor('<img id="newImage-' + ++newImageIdCounter + '" src="' + imageName + '"' + '/>');
    } else {
      insertInEditor('<img id="newImage-' + ++newImageIdCounter + '" src="/space/showimage/' + imageName + '"' + '/>');
    }
    var oRTE = document.getElementById(editorId).contentWindow.document;
    var imageElement = oRTE.getElementById('newImage-' + newImageIdCounter);
    selectImage(imageElement);
    showImagePropertiesPopup();
  } else {
    insertInEditor('[[file:' + imageName + ']]');
  }
}

function insertImageInTextEditor(imageName, type) {
  insertInEditor('[[' + type + ':' + imageName + ']]');
}