Event.observe(window, 'load', function(loadEvent) {
  $$('div#error a', 'div#notice a').each(function(element) {
    //element.setStyle( { cursor: 'pointer' } );
    element.observe('click', function(e) {
      Effect.Fade(element.up('div'));
    });
  });


  file_upload = $('file_upload');
  if(file_upload) {
    file_upload.observe('click', function(clickEvent) {

      showPopup.delay(0.2, 'file_selector');

    });

    file_upload.observe('focus', function(focusEvent) {
      file_upload.blur();
    });
  }
});


function showPopup(popup_element, noCoverAbort) {
  popup           = $(popup_element);
  coverDiv        = $('cover');
  bodyElement     = $$("body").first();

  if(!coverDiv) {
    $$("body").first().insert({ top: '<div id="cover" style="display: none;">&nbsp;</div>'});
    coverDiv = $('cover');
  }

  dimensions      = bodyElement.getDimensions(); 
  viewport        = document.viewport.getDimensions();
  scrollOffset      = document.viewport.getScrollOffsets();

  if(dimensions.width < viewport.width)   dimensions.width = viewport.width;
  if(dimensions.height < viewport.height) dimensions.height = viewport.height;

  popupOffsetLeft = (dimensions.width - popup.getWidth()) / 2;

  if(Prototype.Browser.IE) {
    coverDiv.setStyle( { left: '0px' } );
  }

  coverDiv.setStyle( { width: dimensions.width + 'px', height: dimensions.height + 'px' } );
  coverDiv.setOpacity(0.0);

  if(!noCoverAbort) {
    coverDiv.observe('click', function(clickEvent) {
      hidePopup(popup);
    });
  }


  popup.setStyle( { top:  (200 + scrollOffset.top) + 'px', left: popupOffsetLeft + 'px' } );
  popup.setOpacity(0.0);

  new Effect.Parallel(
    [ Effect.Appear(coverDiv, { from: 0.0, to: 0.5 } ),
      Effect.Appear(popup) ],
    { duration: 1.0 }
  );
  
  return popup.visible();
}

function hidePopup(popup_element) {
  popup           = $(popup_element);
  coverDiv        = $('cover');

  new Effect.Parallel(
    [ Effect.Fade(coverDiv, { from: 0.5, to: 0.0 }),
      Effect.Fade(popup) ],
    { duration: 1.0, afterFinish: function() {
        coverDiv.remove();  
      }
    }
  );
}


function selectFile() {
  hidePopup('file_selector');


  fileSep = (navigator.platform.indexOf('Win') >= 0) ? "\\" : "/";

  oldFile = $F('file_upload');
  filename = oldFile.substring(oldFile.lastIndexOf(fileSep)+1);
  oldName = filename.substr(0, filename.lastIndexOf(".")).gsub(/[^a-zA-Z0-9äöüßÄÖÜ]/, " ").gsub(/\s+/, " ").strip();

  
  file = $F('transformation_input_file')
  $('file_upload').value = file;
  $('file_upload').removeClassName('greyed');

  filename = file.substring(file.lastIndexOf(fileSep)+1);
  name = filename.substr(0, filename.lastIndexOf("."));

  if($F('transformation_name').blank() || $F('transformation_name') == oldName) {
    $('transformation_name').value = name.gsub(/[^a-zA-Z0-9äöüßÄÖÜ]/, " ").gsub(/\s+/, " ").strip();
  }
  
}

function selectMediaFile() {
  hidePopup('media_file_selector');
  fileSep = (navigator.platform.indexOf('Win') >= 0) ? "\\" : "/";

  uploadField = $('media_file_selector').down('input[type=file]');
  file = $F(uploadField)
  
  if(file.blank()) return;
  
  uploadField.writeAttribute('id');
  newUploadField = '<input type="file" id="media_file" name="transformation[media_files][]" size="30" />'
  uploadField.hide();
  uploadField.insert({ after: newUploadField })

  filename = file.substring(file.lastIndexOf(fileSep)+1);
  name = filename.substr(0, filename.lastIndexOf("."));
 
  listElement = '<li><span class="left"><img src="/images/icons/page_white.png" />' + filename + '</span><a href="#" onClick="removeMediaFile(this);" class="right">entfernen</a><div class="clear"></div></li>';

  media_file_list = $('media_files');
  media_file_list.select('.message').invoke('remove');
  media_file_list.insert({ bottom: listElement });
  media_file_list.select('li').last().insert( { top: uploadField });
  
}

function removeMediaFile(element) {
  media_file_list = $('media_files');
  element.up('li').remove();
  if(media_file_list.select('li').size() == 0) {
    media_file_list.insert( { top: '<li class="message">Sie haben noch keine Mediendateien hinzugef&uuml;gt</li>' });
  }
}