// $Id$


var Bg = {

   TT : '<a href="works.html"><img id="bg-image" src="#{url}" /></a>',
   w : undefined,
   h : undefined,


   init : function(url) {
	var urls = ['images/img2.jpg','images/img1.jpg','images/img3.jpg','images/img4.jpg','images/img5.jpg'];
	var url = urls[Math.floor(Math.random()*urls.length)];
      $('bg').hide();
      $('white').hide();
      $('bg').innerHTML = new Template(Bg.TT).evaluate({url:url});
      Event.observe(window,'resize',Bg.resize);
      Event.observe('bg-image','load',Bg.onload);
//       Event.observe(window,'mousedown', Bg.showhite);
//       Event.observe(window,'mouseup', Bg.hidewhite);
   },
   showwhite : function() {
      $('white').show();
   },
   hidewhite : function() {
      $('white').hide();
   },
   onload : function() {
      var image = new Image();
      image.src = $('bg-image').src;
      Bg.w = image.width;
      Bg.h = image.height;
      Bg.resize();
      $('bg').show();
   },
   resize : function() {
      var w,h,l,t;
      var sw = Stage.getWidth();
      var sh = Stage.getHeight();

      if(Bg.w/Bg.h < sw/sh) {
         w = sw; h = sw*Bg.h/Bg.w;
      } else {
         h = sh; w = sh*Bg.w/Bg.h;
      }
      $('bg-image').width = w;
      $('bg-image').height = h;
      l = Math.round((sw-w)/2);
      t = Math.round((sh-h)/2);
      var para = {
         'left'   : l+'px',
         'top'    : t+'px',
         'width'  : (sw-l)+'px',
         'height' : (sh-t)+'px'
      };
      $('bg').setStyle($(para));
      $('white').setStyle($(para));
   }
};