// ==UserScript==
// @name           Helgon.net top frame landscape
// @namespace      http://www.lysator.liu.se/~jhs/userscript
// @description    Make the top frame somewhat more picturesque
// @include        http://*helgon.net/frameset/top.asp
// @include        http://*helgon.net/main.asp
// ==/UserScript==

if( location.pathname == '/main.asp' ) location.pathname = '/main_old.asp';

var image = 'http://www.lysator.liu.se/~jhs/gfx/helgon.png', i = 0, bg;
var bgs = [ 'http://www.lysator.liu.se/~jhs/gfx/bg/GreenForest.jpg',
	    'http://www.lysator.liu.se/~jhs/gfx/bg/Sunset.jpg',
	    'http://www.lysator.liu.se/~jhs/gfx/bg/HiddenLake.jpg' ];
var left = top.stripestop, right = top[6], main = top.helgonmain;
var below = top.helgonbottom, above = window;
var main = top.helgonmain, menu = top.helgonmeny, mess = top.newmess;
var height, frame, factor = 10;

function next()
{
  loadImage( bgs[i], draw );
  i = (i + 1) % bgs.length;
  return 'Waiting!';
}

function loadImage( href, callback )
{
  bg = new Image();
  bg.onload = callback;
  bg.src = href;
}

function setBg( frame, href, align )
{
  href = 'url("'+ href +'")';
  frame.document.body.style.background = href + ' fixed no-repeat '+ align;
}

function draw()
{
  var styles = { position:'absolute', top:'13px', left:'47px' }, i;
  var backdrop = 'url("'+ bg.src +'") no-repeat ';
  var helgon = document.createElement( 'img' );
  helgon.src = image;
  helgon.onclick = next;
  for( i in styles )
    helgon.style[i] = styles[i];

  while( document.body.firstChild )
    document.body.removeChild( document.body.firstChild );
  document.body.appendChild( helgon );
  // setBg( left,  bg.src, '0% 0' );
  // setBg( above, bg.src, '50% 0' );
  // setBg( right, bg.src, '100% 0' );
  // setBg( below, bg.src, '50% '+ (top.innerHeight-below.innerHeight)+ 'px' );

  height = bg.height - above.innerHeight;
  if( !frame ) frame = 4900; else frame = 0;
  slowPan();
  if( window.picturesque == 'Waiting!' )
    window.picturesque = setInterval( slowPan, 1e3 );
}

function slowPan()
{
  var frames = height * factor;
  frame = (frame + 1) % frames;
  var angle = (frame / frames) * Math.PI * 2;
  var y = Math.round( (0.5 - Math.cos( angle )/2) * height );
  var Y = Math.min( bg.height - left.innerHeight, y );
  var l = -left.innerWidth, m = l - menu.innerWidth, r = m - main.innerWidth;
  var b = Math.min( bg.height - below.innerHeight,
		    y + top.innerHeight - below.innerHeight );
  var M = Math.min( y + above.innerHeight, bg.height - above.innerHeight );
  setBg( left,  bg.src, '0% -'+ Y +'px' );
  setBg( above, bg.src, '50% -'+ y + 'px' );
  setBg( right, bg.src, '100% -'+ Y +'px' );
  setBg( below, bg.src, '50% -'+ b +'px' );
  /*
  setBg( menu,  bg.src, l +'px -'+ M +'px' );
  setBg( main,  bg.src, m +'px -'+ M +'px' );
  setBg( mess,  bg.src, r +'px -'+ M +'px' );

  var page, i, j, tables, sheet, pages = [menu, mess], rules = [0,2,3,6,11];
  for( i=0; i<pages.length; i++ )
  {
    page = pages[i];
    tables = page.document.getElementsByTagName( 'table' );
    for( j=0; j<tables.length; j++ )
      tables[j].setAttribute( 'background', '' );
    sheet = page.document.styleSheets[0];
    for( j=0; j<rules.length; j++ )
      sheet.cssRules[rules[j]].style.backgroundColor = 'transparent';
    sheet.cssRules[1].style.border = '0';
  }
  */
}

if( typeof window.picturesque == 'undefined' )
  window.picturesque = next();