// JavaScript Document
var i = 0;
var CanvasX = 720;
var CanvasY = 206;
var speed = 50;
var hole = 2;
var lineW = 1;
var mx = CanvasX;
var my = 0;
var img = new Image();

var im = new Image();
               
function draw(){
        
  var HeaderCanvas01 = document.getElementById('HeaderCanvas01');
  if (HeaderCanvas01.getContext){
    var ctx01 = HeaderCanvas01.getContext('2d');
    img.onload = function(){
      ctx01.drawImage(img, 0, 0, (CanvasX+100), (CanvasY+100));
      ctx01.stroke();
    }                                           
	img.src ='pictures/stadgame01.jpg'
    var ctx02 = document.getElementById('HeaderCanvas01Mask').getContext('2d');
    ctx02.fillStyle = 'rgba(205,0,0,0.75)'; 
    var x = 0;
    var y = 0;
    do {
      x = 0;
      do {
        ctx02.fillRect(x,y,hole,hole);
        x += (hole + lineW);
      } while (x <= CanvasX);
      y += 3;
    } while (y <= CanvasY);
    setInterval(move,speed);                                          
  } else {
    // If browser doen's support Canvas
  }
}
                 
function move(){
  var HeaderCanvas01 = document.getElementById('HeaderCanvas01');
  if (HeaderCanvas01.getContext){
    var ctx01 = HeaderCanvas01.getContext('2d');
    ctx01.drawImage(img, mx, my, (CanvasX), (CanvasY));
    ctx01.drawImage(img, (mx-CanvasX), my, (CanvasX), (CanvasY));
    ctx01.stroke();
  }
  mx -= 0.5;
  if (mx <= 0) mx = CanvasX;
}


function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}

function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
}

function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		window_width = document.body.parentNode.clientWidth;
		window_height = document.body.parentNode.clientHeight;
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_width =(window_width / 2) - (popUpDiv.clientWidth / 2);
	popUpDiv.style.left = popUpDiv_width + 'px';
	popUpDiv_height=(window_height / 2)-(popUpDiv.clientHeight / 2);
	popUpDiv.style.top = popUpDiv_height + 'px';	
}

function popup(windowname, picture) {
	blanket_size(windowname);
	toggle('blanket');
	toggle(windowname);	
	if (picture != '') {
		im.src = picture;
		document.getElementById("image").src = im.src;
	} else {
		document.getElementById("image").src = '';
	}
	i = 0;
}

function setSizeandPos(){
	document.getElementById("popUpDiv").style.width = im.width + 0 + 'px'; //"500px";
	document.getElementById("popUpDiv").style.height = im.height + 50 +'px';
	window_pos('popUpDiv');
	if (i == 0) {
		i++;
		setTimeout('setSizeandPos()',50);
	}
}