var tooltip=function(){
    var id = 'tt';
    var top = 3;
    var left = -200;
    var maxw = 300;
    var speed = 10;
    var timer = 50;
    var endalpha = 95;
    var alpha = 0;
    var tt,t,c,b,h;
    var ua = navigator.userAgent.toLowerCase(); 
    var ie = document.all ? true : false;
    return{

	show:function(v,w){
	    if(tt == null){
		tt = document.createElement('div');
		tt.setAttribute('id',id);
		t = document.createElement('div');
		t.setAttribute('id',id + 'top');
		c = document.createElement('div');
		c.setAttribute('id',id + 'cont');
		b = document.createElement('div');
		b.setAttribute('id',id + 'bot');
		tt.appendChild(t);
		tt.appendChild(c);
		tt.appendChild(b);
		document.body.appendChild(tt);
		tt.style.opacity = 0;
		tt.style.filter = 'alpha(opacity=0)';
		document.onmousemove = this.pos;
	    }
	    tt.style.display = 'block';
	    c.innerHTML = v;
	    // c.innerHTML = ua;
	    tt.style.width = w ? w + 'px' : 'auto';
	    if(!w && ie){
		t.style.display = 'none';
		b.style.display = 'none';
		tt.style.width = tt.offsetWidth;
		t.style.display = 'block';
		b.style.display = 'block';
	    }
	    if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
	    h = parseInt(tt.offsetHeight) + top;
	    clearInterval(tt.timer);
	    tt.timer = setInterval(function(){tooltip.fade(1)},timer);
	},

	pos:function(e){
	    var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
	    var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
	    tt.style.top = (u - h) + 'px';
	    tt.style.left = (l + left) + 'px';
	},

	fade:function(d){
	    var a = alpha;
	    if((a != endalpha && d == 1) || (a != 0 && d == -1)){
		var i = speed;
		if(endalpha - a < speed && d == 1){
		    i = endalpha - a;
		}
		else if(alpha < speed && d == -1){
		    i = a;
		}
		alpha = a + (i * d);
		tt.style.opacity = alpha * .01;
		tt.style.filter = 'alpha(opacity=' + alpha + ')';
	    }else{
		clearInterval(tt.timer);
		if(d == -1){tt.style.display = 'none'}
	    }
	},
	hide:function(){
	    clearInterval(tt.timer);
	    tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
	}
    };
}();

var root = '\'http://www.cs.man.ac.uk/~ramsay/TENNIS/WEBSHADOW/photos/';
root = '\'file:photos/';
root = '\'http://www.buxtontennisclub.co.uk/photos/';

function insertpic(pic, msg){
    var s;
    s = '<img id="NARROW" class="hotspot"'
	+'onmouseover="tooltip.show(\''+msg+'<br>(click to enlarge)\');"'
	+'onmouseout="tooltip.hide();"'
	+'onclick="tooltip.hide(); window.open('+root+pic+'\', \'_self\');"'
	+'alt="'+msg+'" src="photos/'+pic+'"><p>';
    return s;
}

function insertpics(pics){
    topright();
    for(i in pics){
	pic = pics[i];
	document.write(insertpic(pic[0], pic[1]));
    }
    bottomright();
}

links = [['HOME', 'index'], 
	 ['JOIN US', 'membership'], 
	 ['PLAYING ARRANGEMENTS', 'arrangements'], 
	 ['HISTORY', 'history']];

function link(p, y){
    document.write(p+'<a href="'+y[1]+'.html">'+y[0]+'<a/>');
}

function menu(){
    document.write('\
      <td id="LEFTCOLUMN" style="vertical-align: top">\
	<table class="TALL" style=" text-align: left;" cellpadding="2" cellspacing="2">\
	  <tbody>\
	    <tr>\
	      <td class="SHORT" style=" vertical-align: top;"><img style=" width: 150px; height: 141px;" alt="logo" src="logo.gif">\
	      </td>\
	    </tr>\
	    <tr class="BOLD" class="SHORT">\
	      <td style="vertical-align: top;" id="BXMENU">');
    for(x in links){
	link('<p>', links[x]);
    } 
    document.write('<p><a href="mailto:contact@buxtontennisclub.co.uk">Contact us</a>\
	      </td>\
	    </tr>\
	  </tbody>\
	</table>\
      </td>\
      <td id="WHITEBAR" style="vertical-align: top">\
	<table class="TALL" style=" text-align: left;" cellpadding="2" cellspacing="2">\
	  <tbody>\
	    <tr>\
	    </tr>\
	  </tbody>\
	</table>\
	<br>\
      </td>');
}

function header(){
    s = '<tr>\
            <td id="TITLE" style=" vertical-align: top;">\
		<table class="TALL" style=" text-align: left; width:\
		  100%;" cellpadding="2" cellspacing="2">\
		  <tbody>\
		    <tr>\
		      <td style="vertical-align: top;">\
			<img style="width: 554px;" alt="title" src="title2.gif"><p>\
			<img alt="" src="banner.jpg" width="525px">\
		      </td>\
		      <td id="NARROW" style="vertical-align: top;">\
		      <div class="BOLD" align="right">\
			BuxtonTennis Club <br>\
			Park Road, Buxton SK17 6SF';
    s = s+insertpic('large_map.gif', 'How to find us');
    s = s+'</div>\
		      </td>\
<td>\
<br>\
</td>\
		    </tr>\
		  </tbody>\
		</table>\
	      </td>\
</tr>';
    document.write(s);
}

function topright(){
    s = '<td id="NARROW" style="vertical-align: top;">\
				<table class="TALL" style=" text-align:\
				  left; width: 100%;" cellpadding="2" cellspacing="2">\
				  <tbody>\
				    <tr>\
				      <td style="vertical-align:\
top;">';
    document.write(s);
}

function bottomright(){
    s = '\
					<br>\
				      </td>\
				    </tr>\
				    <tr>\
				      <td class="TALL"\
					style="vertical-align: top;">\
					<br>\
				      </td>\
				    </tr>\
				  </tbody>\
				</table>\
				<br>\
</td>';
    document.write(s);
}