// CREDITS:
// MagicPicture 2.0: image fade-in fade-out onmousemove with 2 images
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com/fast/index.html
// info@24fun.com
// 9/21/2000

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a highly visble link to http://www.24fun.com/fast/index.html on your webpage and
// you have to tell us where you are going to place the script info@24fun.com

// CONFIGURATION:
// Go to http://www.24fun.com/fast/index.html, open category 'animation' and download  
// the ZIP-file of this script containing all testimages as well as the HTML-file 
// with colorized step-by-step instructions for easy configuration.

// the URL of your first image
var image_url_1="index_kaart-1955.gif"

// the URL of your second image
var image_url_2="index_kaart-1970.gif"

// The vertical position of the first image (distance to the top border of the webpage, pixels)
var imgpostop1=375

// The horizontal position of the first image (distance to the left border of the webpage, pixels)
var imgposleft1=750

// The vertical position of the second image (distance to the top border of the webpage, pixels)
var imgpostop2=375

// The horizontal position of the second image (distance to the left border of the webpage, pixels)
var imgposleft2=752

// Don't edit the variables below.
img1=new Image()
img1.src=image_url_1
img2=new Image()
img2.src=image_url_2
var i_fadestrength=0
var marginright
var center_x
var distance_x
var imgwidth1
var imgheight1
var imgwidth2
var imgheight2
var i_visible=1

var x,y

function initiate() {
	if (document.all) {
		document.onmousemove = handlerMM;
    	marginright=document.body.clientWidth
		imgwidth1=imgcontainer1.offsetWidth
		imgheight1=imgcontainer1.offsetHeight
		imgwidth2=imgcontainer2.offsetWidth
		imgheight2=imgcontainer2.offsetHeight
		center_x=Math.round(marginright/2)
		imgcontainer1.innerHTML="<img src="+image_url_1+">"
		imgcontainer2.innerHTML="<img src="+image_url_2+">"
		document.all.imgcontainer1.style.posLeft=imgposleft1
		document.all.imgcontainer1.style.posTop=imgpostop1
		document.all.imgcontainer1.style.visibility="visible"
		document.all.imgcontainer2.style.posLeft=imgposleft2
		document.all.imgcontainer2.style.posTop=imgpostop2
		document.all.imgcontainer2.style.visibility="visible"
		changeopacity()
	}
	
}

function changeopacity() {	
	imgcontainer1.filters.alpha.opacity=Math.round(i_fadestrength)
	imgcontainer2.filters.alpha.opacity=100-Math.round(i_fadestrength)
	var timer=setTimeout("changeopacity()",80)	
}

function handlerMM(e){
	x=document.body.scrollLeft+event.clientX
	y=document.body.scrollTop+event.clientY
	distance_x=Math.abs(x-center_x)	
	i_fadestrength=Math.round(100/marginright*distance_x*2)	
}