//_____________________
var animRate=25;
var zoomsteps=15;      //zoomsteps 
var infotop= 460;     //oberkante infotext
var detLeft=295;     //linke kante detailbild
var detTop=180;     //oberkante detailbild
var thumbstop=300; // oberkante thumbs
var detborder=10; //===============RAHMENBREITE

//_____________________

var ie5 = (document.getElementById && document.all); 
var ns6 = (document.getElementById && !document.all); 

var divname;
//_________________________________________________________________________________________________mouseposition
var winX=0;
var winY=0;
function trackMouse(e){
    winX= (ie5)?event.x:(ns6)?clientX=e.clientX:false;
    winY= (ie5)?event.y:(ns6)?clientY=e.clientY:false;
}

//_________________________________________________________________________________________________windowproperties

function getWinWidth() {
  	width = (ie5)?document.body.clientWidth:(ns6)?window.innerWidth:false;
	return(width);
}

function getWinHeight() {
  	height = (ie5)?document.body.clientHeight:(ns6)?window.innerHeight:false;
	return(height);
}


//_________________________________________________________________________________________________layerquery
function getDivLeft(divname){
	return parseInt(document.getElementById(divname).style.left);
}

function getDivTop(divname){
	return parseInt(document.getElementById(divname).style.top);
}

function getHeight(div) { 
return document.getElementById(div).offsetHeight;
} 

function getWidth(div) { 
return document.getElementById(div).offsetWidth;
} 


//_________________________________________________________________________________________________divmanipulation

function moveDivTo(divname,x,y){
	document.getElementById(divname).style.left=x+'px';
	document.getElementById(divname).style.top=y+'px';
}

function moveDivBy(divname,x,y){
	document.getElementById(divname).style.left=getDivLeft(divname)+x+'px';
	document.getElementById(divname).style.top=getDivTop(divname)+y+'px';
}

function showDiv(divname){
document.getElementById(divname).style.visibility='visible';
}

function hideDiv(divname){
document.getElementById(divname).style.visibility='hidden';
}

function replaceContent(divname,content) { 
document.getElementById(divname).innerHTML = content; 
} 

function clipDiv(name, clipleft, cliptop, clipright, clipbottom) {
  	var layer = document.getElementById(name).style;
	layer.clip = 'rect(' + cliptop + ' ' +  clipright + ' ' + clipbottom + ' ' + clipleft +')';
}



//_________________________________________________________________________________________________FX


function pageinit(){
//letzte zahl = oberkante thumbs in pixel :)
moveDivTo('thumbs',trackpos,thumbstop);
moveDivTo('thumbinfo',0,infotop);

showDiv('thumbs');
showDiv('thumbinfo');
//clearDetail();
tracking=1;
tracker();
thumbswidth=getWidth('thumbs');
}

window.onresize=pageinit;


var deac;
function deccel() {
retard=2000
}


function accel() {
retard=100
}

var trackpos=0;
var trackspeed=0;
var tracking=0;
var retard=100;
var tracktimer;
var thumbswidth=2500;//----------ehemals 2000----------

function tracker(){
trackspeed=getWinWidth()/2-winX;
document.getElementById('thumbinfo').style.left=winX-50+'px';
clearTimeout(tracktimer);
if(tracking==1){
trackpos+=Math.round(trackspeed/retard);
if(trackpos>0) trackpos=0;
if(trackpos<-(thumbswidth-getWinWidth())) trackpos=-(thumbswidth-getWinWidth());
document.getElementById('thumbs').style.left=trackpos+'px';
}
tracktimer=setTimeout('tracker()',animRate);
}

document.onmousemove= trackMouse;


//_________________________________________________________________________________________________thumbs

var thumbsopen=-1;



var textcolor=888888;
var thumbtext='nothing';
var infade;
var outfade;

function thumbInf(text) { 
thumbtext=text;
window.status=thumbtext;
document.getElementById('thumbinfo').innerHTML = thumbtext;
}


//_________________________________________________________________________________________________detailopening
var detLeft;
var detTop;
var TLxstep;
var TLystep;
var TLx;
var TLy;
var TRxstep;
var TRystep;
var TRx;
var TRy;
var BRxstep;
var BRystep;
var BRx;
var BRy;
var BLxstep;
var BLystep;
var BLx;
var BLy;


var sizeX;
var sizeY;
var detailimage;
var tableheight;
var tablewidth;

var zoomPos=0;

function detailer(image,sizeX,sizeY){
tracking=0;
tablewidth=sizeX+detborder*2;
tableheight=sizeY+detborder*2;
document.getElementById('detail').style.visibility='hidden';
clipDiv('detail',0,0,sizeX+detborder*2,sizeY+detborder*2);
detailimage=image;
//ENDPOSITION DES BILDES

detRight=detLeft+sizeX+detborder;
detBottom=detTop+sizeY+detborder;


moveDivTo('detTL',winX-6,winY-6);
moveDivTo('detTR',winX-6,winY-6);
moveDivTo('detBL',winX-6,winY-6);
moveDivTo('detBR',winX-6,winY-6);

TLxstep=(detLeft-getDivLeft('detTL'))/zoomsteps;
TLystep=(detTop-getDivTop('detTL'))/zoomsteps;
TRxstep=(detRight-getDivLeft('detTR'))/zoomsteps;
TRystep=(detTop-getDivTop('detTR'))/zoomsteps;

BLxstep=TLxstep;
BLystep=(detBottom-getDivTop('detBL'))/zoomsteps;
BRxstep=TRxstep;
BRystep=(detBottom-getDivTop('detBR'))/zoomsteps;

TLx=getDivLeft('detTL');
TLy=getDivTop('detTL');
TRx=getDivLeft('detTR');
TRy=getDivTop('detTR');
BLx=getDivLeft('detTL');
BLy=getDivTop('detTL');
BRx=getDivLeft('detTR');
BRy=getDivTop('detTR');
document.getElementById('detTL').style.visibility='visible';
document.getElementById('detTR').style.visibility='visible';
document.getElementById('detBL').style.visibility='visible';
document.getElementById('detBR').style.visibility='visible';

zoomPos=0;
zoomer();
}

function zoomer(){
if(zoomPos<zoomsteps){
TLx+=TLxstep;
TLy+=TLystep;
TRx+=TRxstep;
TRy+=TRystep;
BLx+=BLxstep;
BLy+=BLystep;
BRx+=BRxstep;
BRy+=BRystep;

moveDivTo('detTL',TLx,TLy);
moveDivTo('detTR',TRx,TRy);
moveDivTo('detBL',BLx,BLy);
moveDivTo('detBR',BRx,BRy);

zoomPos++;
setTimeout('zoomer()',animRate);
}
else detEnd();
}

function detEnd(){
inhoud='<table class=detailtable style="height:'+ tableheight + ';width:'+ tablewidth + '" cellspacing="'+(detborder-2)+'"><tr><td class=detailcell><img class=detimage src='+detailimage+' alt=\'klicken zum schliessen\'></td></tr></table>';
document.getElementById('detail').innerHTML=inhoud;
moveDivTo('detail',detLeft,detTop);
document.getElementById('detail').style.visibility='visible';
document.getElementById('detTL').style.visibility='hidden';
document.getElementById('detTR').style.visibility='hidden';
document.getElementById('detBL').style.visibility='hidden';
document.getElementById('detBR').style.visibility='hidden';
tracking=1;
}

function clearDetail(){
document.getElementById('detail').style.visibility='hidden';
}