function makeImg(img)
{
  var style = '';
  var id = '';
  var extra = '';

  if ( img.width )
    style += 'width:' + img.width + 'px;';
  if ( img.height )
    style += 'height:' + img.height + 'px;';
  if ( img.style )
    style += img.style;

  if ( img.id )
    id = 'id="' + img.id + '"';

  if ( img.extra )
    extra = img.extra;

  if ( /MSIE (5\.5|6\.)/.test(navigator.userAgent) && /\.png$/.test(img.src) )
  {
    return '<img ' + id + ' style="' + style + 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + 
      img.src + '\', sizingMethod=\'scale\')" src="img/blank.gif" ' + img.extra + '/>';
  }
  else
  {
    return '<img ' + id + ' style="' + style + '" src="' + img.src + '" ' + extra + '/>';
  }
}

function putImg(img)
{
  document.write(makeImg(img));
}

function initMenu(obj, index)
{
  $('b' + obj.id).FX = $('b' + obj.id).effect('opacity', {wait: false, duration: 300}).set(0);
  obj.addEvent('mouseover', function(event) {
    $('b' + obj.id).FX.start(1);
  });
  obj.addEvent('mouseout', function(event) {
    $('b' + obj.id).FX.start(0);
  });
}

MyFx = Fx.Base.extend({

  initialize: function (img, bar, options) {
    this.img = img;
    this.bar = bar;
    this.setOptions(options);
  },

  increase: function() {
    this.img.setStyle('opacity', this.now);
    this.bar.setStyle('width', Math.round(25 * this.now));
  }
});

opacities = new Array(0.38, 0.25, 0.13, 0.02);

function adjust()
{
  var x1 = $('frame').getPosition().x;
  var size = $('frame').getSize().size;
  var x2 = x1 + size.x;
  var h = size.y;
  var i;

  for ( i = 1; i < 5; i++ )
  {
    $('shl' + i).setStyle('height', h);
    $('shl' + i).setStyle('left', x1 - i);
    $('shl' + i).setStyle('opacity', opacities[i-1]);
    $('shr' + i).setStyle('height', h);
    $('shr' + i).setStyle('left', x2 + i - 1);
    $('shr' + i).setStyle('opacity', opacities[i-1]);
  }
}

function initMenu(obj, index)
{
  obj.childNodes[0].childNodes[1].FX = new MyFx($(obj.childNodes[0].childNodes[1]), $(obj.childNodes[0].childNodes[2]), {wait: false, duration: 300, fps: 25}).set(0);
  obj.addEvent('mouseover', function(event) {
    $('i' + obj.id).FX.start(0, 1);
  });
  obj.addEvent('mouseout', function(event) {
    $('i' + obj.id).FX.start(1, 0);
  });
}

function onReady()
{
  adjust();
  window.addEvent('resize', adjust);
  $$('div.menuItem').forEach(initMenu);
  
  $$('img.thumb').each( function(elem)
  {
    $(elem).addEvent('mouseover', function(event)
    {
        $(this).setStyle('background-color','#CCC');
    });
    $(elem).addEvent('mouseout', function(event)
    {
        $(this).setStyle('background-color','#FFF');
    });
  }); 
}