/*
  Dog Biscuit's "Yes & Led Zeppelin Trading Pages"
  Artwork preview script
  Rev. 1.022 : 11 October 2004
  Copyright (C) 2001-2004 by JMK
  All rights reserved worldwide

  NOTES
  =====
*/

var IE   = !!document.all;
var IE4  = IE;
var IE55 = IE4;
var NS   = !IE;

actInitialize = 1;
actSelectAll  = 2;
actInvertSel  = 3;
actCheck      = 4;
actPrint      = 5;

shFront =  0;
shTray  =  1;
shTray2 =  2;
shDVD   =  3;
shDVD2  =  4;
shBook  =  5;
shBook2 =  6;

stWide = 'wide';
stHigh = 'high';

var arts, shapes, timeoutID, timeoutCount = 0;

buttons = ['ZoomMin', 'ZoomOut', 'ZoomIn', 'Top', 'Up', 'Down', 'Bottom', 'Left', 'Right', 'Remove'];

function adjust_aspect(aType, aNumber)
{
  if (fixed_aspect(aNumber))
    with (arts[aNumber])
      if (aType == stWide)
        set_spinedit_value(stHigh, aNumber, get_spinedit_value(stWide, aNumber) * cy / cx);
      else
        set_spinedit_value(stWide, aNumber, get_spinedit_value(stHigh, aNumber) * cx / cy);
}

function apply_rotation(aNumber)
{
  if (IE55)
    get_span(aNumber).style.filter = get_rotation(aNumber);
}

function apply_scale(aNumber)
{
  apply_spinedit(stWide, aNumber);
  apply_spinedit(stHigh, aNumber);
  update_buttons(aNumber);
}

function apply_shape(aNumber)
{
  var w, h;
  with (shapes[get_cbFormat(aNumber).selectedIndex])
  {
    w = width;
    h = height;
  }
  with (arts[aNumber])
  {
    if (!w)
      w = h * width / height;
    if (!h)
      h = w * height / width;
    set_spinedit_value(stWide, aNumber, w);
    set_spinedit_value(stHigh, aNumber, h);
    cx = w;
    cy = h;
  }
}

function apply_spinedit(aType, aNumber)
{
  var n = arts[aNumber].scale * get_spinedit_value(aType, aNumber);
  with (get_art(aNumber))
    if (aType == stWide)
      width = n;
    else
      height = n;
}

function Art(aTitle, aUrl, aNote)
{
  this.title  = aTitle;
  this.url    = aUrl;
  this.note   = aNote;
  this.width  = 121;
  this.height = 121;
  this.loaded = false;
  this.cx     = 121;
  this.cy     = 121;
  this.scale  = 1;
  this.rotate = 0;
}

function comments_1()
{
  return '<p align="justify">Thanks to everyone who has returned feedback on this utility. The general concensus seems to be that it doesn\'t work! ' +
    'At least, not when printing out more than one, maybe two, artwork images at a time. Both Internet Explorer and Firefox seem to have a ' +
    'habit of leaving out the first of three images (it just appears blank). Worse, Firefox splits images across pages. ' +
    'Since publishing this utility, I too have seen both of these types of failure. The problems appear to be with the browsers themselves&nbsp;- ' +
    'the type of printer makes no difference to the outcome. Still, at least there were no reports of artworks coming out incorrectly sized, ' +
    'so I\'ll leave this page up for the moment, while looking into possible solutions and workarounds.</p>';
}

function comments_2()
{
  return '<hr><table width="100%" cellpadding="8"><tr>' +
    '<td width="25%" valign="top">' +
    '<p align="justify">You can add artwork to the print set by typing or pasting its URL into the box above ' +
    '(or by clicking the <i>Browse</i> button to locate art on your own PC) and then clicking <i>Add Now</i>.</p>' +
    '<p align="justify">Once each graphic preview finishes downloading, the drop-down selector on the left changes to reflect ' +
    'what the picture appears to represent, such as a CD front cover or tray inlay, a DVD cover, and so on. A "dagger" symbol ' +
    '("†") is added to that option for future reference, and the dimension boxes are populated with the suggested print sizes in millimetres.</p>' +
    '<p align="justify">Select which artworks to print using the checkboxes on the left, and adjust their dimensions by selecting ' +
    'another format with the drop-down, by clicking on the dimension box arrows, or by typing directly into these boxes then clicking outside.</p>' +
    '<p align="justify">Uncheck the <i>Lock</i> checkbox if you want to adjust the width & height independently, otherwise they will be kept in proportion.</p>' +
    '</td><td width="35%" valign="top">' +
    '<p align="justify">' + new_rollover('ZoomMin') + new_rollover('ZoomOut') + new_rollover('ZoomIn') + ' The <i>Zoom</i> buttons ' +
    'don\'t affect the size of the final printout, they\'re only provided to let you visually inspect the preview images more closely. ' +
    'These buttons adjust the number of screen pixels per millimetre used to display the artwork. The default is the minimum, one pixel per millimetre.</p>' +
    '<p align="justify">' + new_rollover('Top') + new_rollover('Up') + new_rollover('Down') + new_rollover('Bottom') + ' The <i>Move</i> buttons ' +
    'can be used to change the order of the artworks in the output, e.g. to move two smaller images together so they print on the same page. ' +
    'Do this first if needed, since these operations (together with <i>Remove</i>, discussed below) force the page to be reloaded, ' +
    'and will therefore cause any other customizations, such as size adjustments and rotations, to be discarded.</p>' +
    '<p align="justify">' + new_rollover('Left') + new_rollover('Right') + ' The <i>Rotate</i> buttons rotate the selected artwork image through 90° ' +
    'to the left (i.e., anticlockwise) or right (clockwise). These buttons are only available to users of Microsoft Internet Explorer 5.5 and above.</p>' +
    '<p align="justify">' + new_rollover('Remove') + ' The <i>Remove</i> button removes the selected single artwork from the print set. ' +
    'Notice that both <i>Move</i> and <i>Remove</i> operations treat any comment appearing <i>below</i> an artwork as relating to that artwork, ' +
    'even though such comments more usually refer to the artwork(s) <i>below the comment</i>. This is a bug I\'ve had to decide to live with!</p>' +
    '</td><td width="30%" valign="top">' +
    '<p align="justify">When you click the <i>Print Selected</i> button, a new window appears, containing full-size copies of your selections. ' +
    'That new window, and not this one, is where you can check the final output (using <i>File/Print Preview</i>), ' +
    'change the paper orientation, margins, or other printer settings (<i>File/Page Setup</i>), and finally print your artwork (<i>File/Print</i>).</p>' +
    '<p align="justify">Often it will be safe to print this new page immediately, for example if the artwork consists of just a standard CD front cover and tray inlay. ' +
    'But in some cases, you may first want to use Print Preview, for example to check the combined output layout, or to ensure that no images have been ' +
    'clipped or split across two pages.</p>' +
    '<p align="justify">The <i>Check Sizes</i> button operates similarly to <i>Print Selected</i>, but replaces the artworks with a simple test pattern ' +
    'allowing you to double-check the printer output, using a minimum quantity of ink (and draft quality paper).</p>' +
    '<p align="justify"><a title="email me" href="mailto:yesman_AT_ntlworld_DOT_com?subject=Trade (Artwork)"><img border="0" src="images/icons/Mail.gif" align="left" width="24" height="24"></a>' +
    'I\'d like to hear any suggestions you may have for improving this utility; please click on the envelope icon to email me. ' +
    'Leave the word "Trade" in the Subject line, it\'ll guarantee your message safe passage through my spam filters.</p>' +
    '</td></tr></table><hr>';
}

function constrain_size_value(aValue)
{
  if (isNaN(aValue = parseInt(aValue)))
    aValue = 121;
  return aValue < 0 ? 0 : aValue > 999 ? 999 : aValue;
}

function document_body()
{
  return new_header(true) + new_ads() + '<br><br>' +
    '<font size="4">Print Artwork...</font><br><br>' +
    comments_1() +
    '<form name="searchform" onReset="return false;" onSubmit="return false;">' +
    '<table border="0" cellpadding="4" cellspacing="4" width="100%" id="ArtworkPreview">' +
    enum_artwork(actInitialize) + '</table>' +
    '<div align="left">Add a new image (URL or file name):<br>' +
    '<input type="file" name="inputFile" size="60"><br>' +
    new_button('Add Now') + '<br><br>' +
    new_button('Select All') + '&nbsp;' +
    new_button('Invert Selection') + '&nbsp;' +
    new_button('Check Sizes') + '&nbsp;' +
    new_button('Print Selected') +
    '</div></form>' +
    comments_2() +
    new_footer(true);
}

function enum_artwork(anAction)
{
  function add_note(aNote)
  {
    return aNote && aNote.length > 1 ? '<tr><td colspan="2"><b>' + aNote.replace(/^\s*/, '') + '</b></td></tr>' : '';
  }

  var result = anAction == actInitialize ? add_note(arts.title) : '';
  for (var n = 0; n < arts.length; n++)
    switch (anAction)
    {
      case actInitialize:
      {
        var url = arts[n].url;
        var s = 'span' + n;
        var i = 'img' + n;
        result += '<tr>' +
          '<td valign="top" width="2%" nowrap>' + new_controls(n, '<strong>' + arts[n].title + '</strong>') + '</td>' +
          '<td><span name="' + s + '" id="' + s + '" style="height:121; filter:' + get_rotation(n) + '">' +
          '<a title=' + url + ' alt=' + url + '>' +
          '<img src=' + url + ' name="' + i + '" id="' + i + '" border="1" height="121" ' +
          'onLoad="onload_image(' + n + ')"></a>' +
          '</span></td></tr>' + add_note(arts[n].note);
        break;
      }
      case actSelectAll:
      {
        get_cbSelect(n).checked = true;
        update_selection(n);
        break;
      }
      case actInvertSel:
      {
        with (get_cbSelect(n))
          checked = !checked;
        update_selection(n);
        break;
      }
      case actCheck:
      case actPrint:
      {
        if (get_cbSelect(n).checked)
        {
          var w = get_spinedit_value(stWide, n);
          var h = get_spinedit_value(stHigh, n);
          var s = 'width:' + w / 10 + 'cm; height:' + h / 10 + 'cm; ';
          var i = s + 'border-style: solid; border-color: black; border-width: 1';
          s += 'padding: 1mm;';
          if (IE55 && shapes[n].rotate != 0)
            s += ' filter:' + get_rotation(n);
          result += '<div style="' + s + '"><img style="' + i + '" src=' +
            (anAction == actPrint ? arts[n].url : "images/PrintCheck.gif") +
            '></div>\r\n';
        }
        break;
      }
    }
  return result;
}

function fixed_aspect(aNumber)
{
  return get_control('cbAspect' + aNumber).checked;
}

function get_art(aNumber)
{
  return get_image('img', aNumber);
}

function get_cbFormat(aNumber)
{
  return get_control('cbFormat' + aNumber);
}

function get_cbSelect(aNumber)
{
  return get_control('cbSelect' + aNumber);
}

function get_control(aName)
{
  var f = get_form();
  if (f)
    return f[aName];
  return null;
}

function get_description(aURL)
{
  var result = '';
  if (aURL)
  {
    var d = aURL.match(/[^\/\\]+(\.[^\/\\\.]*)$/);
    result = d[0];
    if (d[1])
      result = result.slice(0, -d[1].length);
  }
  return result;
}

function get_form()
{
  return window.document.forms[0];
}

function get_image(aPrefix, aNumber)
{
  return window.document.images[aPrefix + (aNumber == undefined ? '' : aNumber)];
}

function get_inputFile()
{
  return get_control('inputFile').value;
}

function get_nearest_shape(aWidth, aHeight)
{
  var r = aWidth / aHeight, s, w, h;
  for (var n in shapes)
  {
    with (shapes[n])
    {
      w = width;
      h = height;
    }
    if (w && h)
    {
      s = w / h / r - 1;
      if ((s > 0 ? s : -s) < 0.05)
        return n;
    }
    else if (!w && r > 1 || !h && r < 1)
      return n;
  }
}

function get_rotation(aNumber)
{
  return IE55 ? 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + arts[aNumber].rotate + ')' : '';
}

function get_shape_caption(aNumber)
{
  with (shapes[aNumber])
  {
    var w = width, h = height;
    return caption + (w || h ? ' (' + (w && h ? w + ' x ' + h + ' mm' : w ? w + ' mm ' + stWide : h + ' mm ' + stHigh) + ')' : '');
  }
}

function get_span(aNumber)
{
  if (IE)
    return window.document.all['span' + aNumber];
}

function get_spinedit(aType, aNumber)
{
  return get_control(get_spinedit_name(aType, aNumber));
}

function get_spinedit_name(aType, aNumber)
{
  return 'spinedit' + aType + aNumber;
}

function get_spinedit_value(aType, aNumber)
{
  return constrain_size_value(get_spinedit(aType, aNumber).value);
}

function main(aQuery)
{
  function extract(a, b)
  {
    if (aQuery)
    {
      var match = aQuery.match(a);
      if (match)
        return match.join('').replace(b, '').split('>');
    }
    return new Array();
  }

  params = new Object();
  consolidate_params();
  if (!aQuery)
    aQuery = unescape(window.location.search);
  aQuery = aQuery.charAt(0) == '?' ? aQuery.substring(1) : aQuery;
  var titles = extract(/>[^<]*<\/a>/gi, /^>|<\/a>/gi);
  var urls = extract(/<a href=[^>]*>/gi, /<a href=|>$/gi);
  var notes = extract(/(^|<\/a>)[^<]*(<|$)/gi, /\xA0|<<\/a/gi);
  if (notes[0] == 'undefined')
    notes[0] = 'New Print Set';
  arts = new Array();
  arts.title = notes[0];
  for (var n = 0; n < titles.length; n++)
    arts.push(new Art(titles[n], urls[n], notes[n + 1]));
  document.write(document_body());
}

function new_button(aCaption)
{
  var name = 'btn' + aCaption.split(' ')[0];
  return '<button name="' + name + '" onClick="onclick_' + name + '()">' + aCaption + '</button>';
}

function new_controls(aNumber, aLabel)
{
  var result;

  function new_rollover_btn(aCaption, aGraphic, aHandler, aDelta)
  {
    return '<a href="javascript:' + aHandler + '(' + aNumber + ',' + aDelta + ')" ' +
      'title="' + aCaption + '">' + new_rollover(aGraphic, aNumber) + '</a>';
  }

  function new_checkbox(aName, aLabel, aChecked)
  {
    var id = aName + aNumber;
    return '<input type="checkbox" name="' + id + '" id="' + id + '" ' +
      (aChecked ? 'checked ' : '') +
      'onClick="onclick_' + aName + '(' + aNumber + ');">' +
      '<label for="' + id + '">' + aLabel + '</label></input>\r\n';
  }

  function new_spinedits()
  {
    function new_spinedit(aType)
    {
      function new_mouse(aDelta)
      {
        function new_mousedown(aRepeat)
        {
          return '"onmousedown_spin(\'' + aType + '\', ' + aNumber + ', ' + aDelta + ', ' + aRepeat + ');" ';
        }
        return 'onMouseDown=' + new_mousedown('true') + (IE ? 'onDblClick=' + new_mousedown('false') : '') +
          'onMouseOut="onmouseup_spin();" onMouseUp="onmouseup_spin();">';
      }
      var s = get_spinedit_name(aType, aNumber);
      return '<input type="text" name="' + s + '" id="' + s + '" size="3" value="121" ' +
        'onChange="onchange_spinedit(\'' + aType + '\', ' + aNumber + ')"></input>' +
        '<img src="images/buttons/ud0.bmp" border="0" style="position: relative; top: 4;" usemap="#' + s + '"' +
        '><map name="' + s + '">' +
        '<area shape="rect" coords="0, 0,10,10" ' + new_mouse(+1) +
        '<area shape="rect" coords="0,11,10,21" ' + new_mouse(-1) +
        '</map> mm ' + aType;
    }
    return '<div style="margin-top: 4">' + new_spinedit(stWide) + '&nbsp;by&nbsp;' + new_spinedit(stHigh)  + '&nbsp;</div>';
  }

  var cbf = 'cbFormat' + aNumber;
  var w, h;
  result = new_checkbox('cbSelect', aLabel, true) +
    '<div style="margin-left: 16; margin-top: 4">' +
    '<select name="' + cbf + '" id="' + cbf + '" onChange="onchange_shape(' + aNumber + ')">';
  for (var n in shapes)
    result += '<option value="' + n + '">' + (n > 0 ? get_shape_caption(n) : 'Loading, please wait ...') + '\r\n';
  result +=
    '</select>&nbsp;' + new_checkbox('cbAspect', 'Lock', true) +
    new_spinedits() +
    '<div style="margin-top:8">' +
    new_rollover_btn('Zoom Min'        , 'ZoomMin', 'set_scale'   ,  0) +
    new_rollover_btn('Zoom Out'        , 'ZoomOut', 'set_scale'   , -1) +
    new_rollover_btn('Zoom In'         , 'ZoomIn' , 'set_scale'   , +1) + '&nbsp;' +
    new_rollover_btn('Move to Top'     , 'Top'    , 'rearrange'   , -2) +
    new_rollover_btn('Move Up'         , 'Up'     , 'rearrange'   , -1) +
    new_rollover_btn('Move Down'       , 'Down'   , 'rearrange'   , +1) +
    new_rollover_btn('Move to Bottom'  , 'Bottom' , 'rearrange'   , +2) + '&nbsp;' +
    new_rollover_btn('Rotate 90° Left' , 'Left'   , 'set_rotation',  3) +
    new_rollover_btn('Rotate 90° Right', 'Right'  , 'set_rotation',  1) + '&nbsp;' +
    new_rollover_btn('Remove'          , 'Remove' , 'rearrange'   ,  0) +
    '</div></div>\r\n';
  return result;
}

function new_print_doc(aPrint)
{
  return '<html>\r\n<head>\r\n<title>' + arts.title + '</title>\r\n</head>\r\n<body>\r\n' +
    enum_artwork(aPrint ? actPrint : actCheck) +
    '</body>\r\n</html>\r\n';
}

function new_rollover(aGraphic, aNumber)
{
  var u = aNumber == undefined;
  var n = u ? '' : aNumber;
  var s = '(\'' + aGraphic + '\'' + (u ? '' : ',' + n) + ');" ';
  return '<img name="' + aGraphic + n + '" width="16" height="16" border="0" src="images/buttons/' +
    (n.length < 1 ? 'a' : 'd') + aGraphic + '.bmp" ' +
    'onMouseOver="onmouseover_btn' + s + 'onMouseOut="onmouseout_btn' + s + '>';
}

function onchange_shape(aNumber)
{
  apply_shape(aNumber);
}

function onchange_spinedit(aType, aNumber)
{
  apply_spinedit(aType, aNumber);
  adjust_aspect(aType, aNumber);
}

function onclick_btnAdd()
{
  var url = get_inputFile();
  if (!!url)
  {
    if (url.search(/^[a-zA-Z]{3,}:/i) < 0)
      url = (url.search(/\\/) < 0 ? 'http' : 'file') + '://' + url;
    arts.push(new Art(get_description(url), '"' + url + '"', ''));
    redisplay();
  }
}

function onclick_btnCheck()
{
  print_selected(false);
}

function onclick_btnInvert()
{
  enum_artwork(actInvertSel);
}

function onclick_btnPrint()
{
  print_selected(true);
}

function onclick_btnSelect()
{
  enum_artwork(actSelectAll);
}

function onclick_cbAspect(aNumber)
{
  if (fixed_aspect(aNumber))
    with (arts[aNumber])
    {
      cx = get_spinedit_value(stWide, aNumber);
      cy = get_spinedit_value(stHigh, aNumber);
    }
}

function onclick_cbSelect(aNumber)
{
  update_selection(aNumber);
}

function onload_image(aNumber)
{
  if (!arts[aNumber].loaded)
  {
    with (get_art(aNumber))
    {
      w = width;
      h = height;
    }
    with (arts[aNumber])
    {
      width = w;
      height = h;
      loaded = true;
    }
    with (get_cbFormat(aNumber))
    {
      options[0].text = get_shape_caption(0);
      selectedIndex = get_nearest_shape(w, h);
      options[selectedIndex].text += ' †';
    }
    apply_shape(aNumber);
    w = get_spinedit_value(stWide, aNumber);
    h = get_spinedit_value(stHigh, aNumber);
    if (IE55 && w >= 200 && h < 200)
      arts[aNumber].rotate = 1;
    apply_rotation(aNumber);
    update_selection(aNumber);
    update_buttons(aNumber);
  }
}

function onmousedown_spin(aType, aNumber, aDelta, aRepeat)
{
  if (timeoutCount && timeoutCount % 20 == 0)
    aDelta *= 2;
  set_spinedit_value(aType, aNumber, get_spinedit_value(aType, aNumber) + aDelta);
  adjust_aspect(aType, aNumber);
  if (aRepeat)
    timeoutID = window.setTimeout('onmousedown_spin(\'' + aType + '\', ' + aNumber + ', ' + aDelta + ', true)', 500 / ++timeoutCount);
}

function onmouseout_btn(aGraphic, aNumber)
{
  rollover_button(aGraphic, aNumber, false);
}

function onmouseover_btn(aGraphic, aNumber)
{
  rollover_button(aGraphic, aNumber, true);
}

function onmouseup_spin()
{
  clearTimeout(timeoutID);
  timeoutCount = 0;
}

function preload()
{
  var i = new Image(16, 16);
  for (var n in buttons)
    for (var c in ['a', 'h', 'd'])
      i.src = 'images/buttons/' + c + buttons[n] + '.bmp';
}

function print_selected(aPrint)
{
  if (selection_empty())
    alert('You have not selected any artworks to print.');
  else
    with (window.open('', 'Print', ''))
    {
      with (document)
      {
        open();
        writeln(new_print_doc(aPrint));
        close();
      }
      opener = null;
      print();
    }
}

function rearrange(aNumber, aDelta)
{
  var lastIndex = arts.length - 1;
  var newIndex = [0, Math.max(aNumber - 1, 0), -1, Math.min(aNumber + 1, lastIndex), lastIndex][aDelta + 2];
  if (newIndex == aNumber)
    return;
  var art = arts[aNumber];
  arts.splice(aNumber, 1);
  if (aDelta)
    arts.splice(newIndex, 0, art);
  redisplay();
}

function redisplay()
{
  var page = (window.location.href + '#').match(/[^#\?]*[#\?]/)[0].slice(0, -1);
  var href = arts.title;
  for (var n = 0; n < arts.length; n++)
    with (arts[n])
      href += '<a href=' + url + '>' + title + '</a>' + note;
  window.location = page + '?' + escape(href);
}

function rollover_button(aGraphic, aNumber, aHot)
{
  get_image(aGraphic, aNumber).src = 'images/buttons/' + (rollover_enabled(aGraphic, aNumber) ? aHot ? 'h' : 'a' : 'd') + aGraphic + '.bmp';
}

function rollover_enabled(aGraphic, aNumber)
{
  if (aNumber != undefined)
    switch (aGraphic)
    {
      case 'ZoomMin':
      case 'ZoomOut':
        return arts[aNumber].scale > 1;
      case 'Top':
      case 'Up':
        return aNumber > 0;
      case 'Down':
      case 'Bottom':
        return aNumber < arts.length - 1;
      case 'Left':
      case 'Right':
        return IE55;
    }
  return true;
}

function selection_empty()
{
  for (var n = 0; n < arts.length; n++)
    if (get_cbSelect(n).checked)
      return false;
  return true;
}

function set_rotation(aNumber, aDelta)
{
  if (IE55)
  {
    with (arts[aNumber])
      rotate = (rotate + aDelta) % 4;
    apply_rotation(aNumber);
  }
}

function set_scale(aNumber, aDelta)
{
  with (arts[aNumber])
    scale = Math.max(aDelta ? scale + aDelta : 1, 1);
  apply_scale(aNumber);
}

function set_spinedit_value(aType, aNumber, aValue)
{
  get_spinedit(aType, aNumber).value = constrain_size_value(aValue);
  apply_spinedit(aType, aNumber);
}

function Shape(aWidth, aHeight, aCaption)
{
  this.width   = aWidth;
  this.height  = aHeight;
  this.caption = aCaption;
}

function Size(aWidth, aHeight)
{
  this.width  = aWidth;
  this.height = aHeight;
  this.loaded = false;
  this.cx     = aWidth;
  this.cy     = aHeight;
  this.scale  = 1;
  this.rotate = 0;
}

function update_buttons(aNumber)
{
  for (var n in buttons)
    rollover_button(buttons[n], aNumber, false);
}

function update_selection(aNumber)
{
  var cbSel = get_cbSelect(aNumber);
  var opacity = cbSel && !cbSel.checked ? 0.25 : 1.00;
  var style = get_art(aNumber).style;
  style['filter'] = 'alpha(opacity=' + 100 * opacity + ')';
  style['opacity'] = opacity;
  style['-moz-opacity'] = opacity;
}

shapes = new Array();

shapes[shFront] = new Shape(121, 121, 'Front'      );
shapes[shTray ] = new Shape(151, 118, 'Tray'       );
shapes[shTray2] = new Shape(118, 151, 'Tray/90°'   );
shapes[shDVD  ] = new Shape(273, 184, 'DVD'        );
shapes[shDVD2 ] = new Shape(184, 273, 'DVD/90°'    );
shapes[shBook ] = new Shape(  0, 121, 'Booklet'    );
shapes[shBook2] = new Shape(121,   0, 'Booklet/90°');

preload();