var SpanArr    = new Array();
var ImgNameArr = new Array();
var loadedTrg  = '';
var loadedSrc  = '';
var Faktor = 100;
var Cnt    = 0;
var Step   = 1;
var Img    = new Image();
var ZoomOut;

function DoTable(Pic,XSlices,YSlices,Spacing,Rebuild,show) {

  var Count = 0;
  if (SpanArr.length == 0 || (arguments.length >= 5 && Rebuild)) { 
    BuildSpanArray(Pic,XSlices,YSlices,Spacing,show); 
  }  

  var Puzzle    = '';

  document.getElementById("BaseContainer").innerHTML = Puzzle;
  Puzzle += '<table border=0 cellSpacing=1 cellpadding=0 align=center valign=middle>'
  for (var x=1; x<=YSlices; x++) {
    Puzzle += '<TR>';
    for (var y=1; y<=XSlices; y++) {

      Puzzle += '<TD>';
      Puzzle += SpanArr[Count];
      Puzzle += '</TD>';

      Count += 1;
    }
    Puzzle += '</TR>';
  }
  Puzzle += '</table>';
  document.getElementById("BaseContainer").innerHTML = Puzzle;
}

function BuildSpanArray(Pic,XSlices,YSlices,Spacing,show) {
  SpanArr = new Array();;
  ImgNameArr = new Array();
  var Img   = new Image();
  Img.src   = Pic;
  ImgWidth  =  Img.width;
  ImgHeight =  Img.height;
    
  var Count    = 0;
  var XOffset   = ImgWidth  / XSlices;
  var YOffset   = ImgHeight / YSlices;
  var TableTop  = document.getElementById("BaseTable").offsetTop + document.getElementById("BaseTag").offsetTop;
  var TableLeft = document.getElementById("BaseTable").offsetLeft + document.getElementById("BaseTag").offsetLeft //;- (ImgWidth / 2 ) - (XSlices/2*Spacing);
 
  for (var x=1; x<=YSlices; x++) {
    for (var y=1; y<=XSlices; y++) {
    
      ImgNavn = 'Img'  + Count;

      PuzzleSpan  = '<span style="';
      PuzzleSpan += ' position:absolute;';
      PuzzleSpan += ' top:' +(TableTop  + ((x-1)*Spacing)) + 'px;';
      PuzzleSpan += ' left:'+(TableLeft + ((y-1)*Spacing)) + 'px;';
      PuzzleSpan += ' clip:rect(';
      PuzzleSpan += ' '+ (x-1) * YOffset +'px';
      PuzzleSpan += ' '+ (y)   * XOffset +'px';
      PuzzleSpan += ' '+ (x)   * YOffset +'px';
      PuzzleSpan += ' '+ (y-1) * XOffset +'px);">';

      PuzzleSpan += '<img src="' + Pic + '"'
      PuzzleSpan += ' name="' + ImgNavn + '"';
      PuzzleSpan += ' id="'   + ImgNavn + '"';
      PuzzleSpan += ' style="visibility:'+show+';"';
      
      //PuzzleSpan += ' onclick="';
      //PuzzleSpan +=  ImgNavn;
      //PuzzleSpan +=  '.border=1;" bordercolor=red';
      PuzzleSpan +=  'border=0>';

      PuzzleSpan += '</span>';      

      SpanArr[Count] = PuzzleSpan;
      ImgNameArr[Count] = ImgNavn;
      Count += 1;
    }
  }  
}

function ShowPuzzleRandom(delay) {
	Cnt = 0;
	ZoomOut = window.setInterval("ShowPuzzleRandomPic()",delay); 
}

function ShowPuzzleRandomPic() {
	Cnt = parseInt(Math.random()*ImgNameArr.length)
	eval("document.getElementById('"+ImgNameArr[Cnt]+"').style.visibility = 'visible'");
	ImgNameArr[Cnt] = '';
	ImgNameArr = ImgNameArr.sort();
	if (ImgNameArr.length > 1) {
		ImgNameArr = ImgNameArr.slice(1);
	}
	else {	
		window.clearInterval( ZoomOut ); 
	}
}

function ShowPuzzle(delay) {
	Cnt = 0;
	ZoomOut = window.setInterval("ShowPuzzlePic()",delay); 
}

function ShowPuzzlePic() {
	eval("document.getElementById('"+ImgNameArr[Cnt]+"').style.visibility = 'visible'");
	Cnt += 1;
	if ( Cnt >= SpanArr.length) { window.clearInterval( ZoomOut ); }
}

function StartZoom(delay) { 
  document.big.width  = 0;
  document.big.height = 0;
  document.big.src = Img.src;
  Cnt = 0; 
  ZoomOut = window.setInterval("doZoom()",delay); 
}  

function doZoom() { 
  if (Cnt > Faktor) { Cnt = Faktor }
  ImgWidth			  = Img.width  * Cnt/100;
  ImgHeight			  = Img.height * Cnt/100;
  document.big.width  = ImgWidth;
  document.big.height = ImgHeight;

  Cnt += Step;
  if (Cnt > Faktor || Cnt >= 100 ) { window.clearInterval( ZoomOut ); }

}

function ShowLarge(imgName, target, orgTarget) { 
	if (version == "n3" && browserName != "Netscape") { 
		window.clearInterval( ZoomOut ); 
		document.getElementById("BaseContainer").innerHTML = '<img id="big" name="big" src="../images/design/blank.gif" WIDTH="300" HEIGHT="200">'
		
		if (loadedSrc != '') { document[loadedTrg].src = loadedSrc ; }
		loadedTrg = orgTarget;
		loadedSrc = document[orgTarget].src ;
		document[orgTarget].src = "../images/biler/alfa-a.jpg";    
		Img.src = imgName;
		if (Img.fileSize <= 0) { alert('billedet er ikke klar endnu'); }
		switch (parseInt(Math.random()*7)) {
		case 0: 
			DoTable(imgName,6,4,1,true,'visible');
			break;
		case 1:
			changeImg(imgName, target) ;
			break;
		case 2:
			StartZoom(35);
			break;
		case 3: 
			DoTable(imgName,6,4,1,true,'hidden');
			ShowPuzzle(35);
			break;
		case 4: 
			DoTable(imgName,9,6,0,true,'hidden');
			ShowPuzzle(35);
			break;
		case 5: 
			DoTable(imgName,9,6,1,true,'hidden');
			ShowPuzzleRandom(35);
			break;
		case 6:
			DoTable(imgName,12,8,0,true,'hidden');
			ShowPuzzleRandom(35);
			break;
		default:
			changeImg(imgName, target) ;
		}
	}
	else { changeImg(imgName, target) ; }  
}