/* Dies ist der source code für die js - Funktionen der Animationsdarstellung von Uhren - Displays auf Basis von 720 Einzelbildern der einzelnen Designs ( 720 Bilder / 12h = 1 min p Bild) Weitere Features sind enthalten, wie Bedienelement - Ein/Ausblendung, automatischer Tabellenaufbau für mehrere parallel laufende Animationen, Preload der Bilder in Stufen, etc pp. Dieses Tool ist speziell für das colorcycling Prinzip erstellt worden und darf nicht für andere Applikationen - auch nicht in Auszügen - verwendet werden. Alle Rechte liegen bei Erich Kastenholz Dauner Str.14 53842 Troisdorf Tel. 02241 169 39 66 m: 0171 41 44 811 Der source code für die colorcycling - Darstellung von Uhrenanimationen in websites besteht ingesamt aus drei verbundenen Modulen laden.html - hält für die wechsenden Frames die Bilder in Variablen bereit , enthält das preload tool und bildet den ständig presenten Teil der Applikation, die wechsenden Unterseiten greifen jeweils auf diese Server-site zurück, damit einmal geladene Pics und Einstellungen present bleiben.... X012.js - wird als JS mit in die Unbterseite eingebunden, für Darstellung der Funktionen mit einer einzelnen Animation ( z.B, Verzeichnis 01 - 05 Produktgruppe Datei index2.htm, gross2.htm ) X0A2.js - wird als JS mit in die Unbterseite eingebunden, für Darstellung der Funktionen mit einer mehreren Animationen ( z.B. Verzeichnis 01 - 05 Produktgruppe Datei: alle2.htm, allegross2.htm ) Die einzelnen Funktionen, inclusive der Animation wird über die 'id' und 'name' - tags gesteuert, worauf js aufsetzt und die ensprechenden anderen Tags wie 'src', 'style' entsprechend ändert... */ top.laden2.window.clearInterval(top.laden2.inm); top.laden2.checkIE(); var mustPngFix = top.laden2.mustPngFix; //var mains = new Array("classic","gamma","dot","vertigo","concept","NightFlower","alle"); //______________________________________________________________________________________________________ var i = 0; if ( top.laden2.laProd == Prod ) {} else { top.laden2.laProd = Prod; top.laden2.productVariant = 0; } var stp = 15; // erstmal 1h dann 30min, 15min, 5 min, 1min canvas = top.laden2.canvas; if ( !introInUse ){ var introInUse = false;}; //________________________________________________________________________________________________________ var aktiv; //= window.setInterval("cycling()", 80); CycleSpeed = new Array(3840,1920,960,960,960,320,320,320,320,320,320,320,320,320,320,320,64,64,64,64,1); // ms für Task cycling() //________________________________________________________________________________________________________ //document.write(root); //___________________________________________________________________________________________________ //___________________________________________________________________________________________________ var bmap =0; var winkel; var winkel2; var i; var ii; var j; //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- trapez = new Array(12); // 12 Stunden for (i = 0; i < 12; i++) // 12 Stunden { trapez[i] = new Array(Teile+1) // xx-Teile for (ii = 0; ii < Teile+1; ii++) // xx Teile - Teilung = 1 h / Teile --> z.B. 5 min Werte 1-12 {trapez[i][ii] = new Array(8); // 8 Koordnatenwerte x0,y0,x1,y1...x4,y4 for (j = 0; j < 8; j++) { trapez[i][ii][j] = i+ii+j; } } } for (i = 0; i < 12; i++) // 12 Stunden { winkel = ((90+30*i) - 15)/180*3.141; winkel2 = winkel + 1/6 * 3.141; for (ii = 0; ii < Teile+1; ii++) // xx Teile - Teilung = 1 h / Teile --> z.B. 5 min Werte 1-12 {trapez[i][ii][0] = Math.round(x0 - (Radius + ii * Teilung) * Math.cos(winkel)); trapez[i][ii][1] = Math.round(y0 - (Radius + ii * Teilung) * Math.sin(winkel)); trapez[i][ii][2] = Math.round(x0 - (Radius + ii * Teilung) * Math.cos(winkel2)); trapez[i][ii][3] = Math.round(y0 - (Radius + ii * Teilung) * Math.sin(winkel2)); trapez[i][ii][4] = Math.round(x0 - (Radius + (ii+1) * Teilung) * Math.cos( winkel)); trapez[i][ii][5] = Math.round(y0 - (Radius + (ii+1)* Teilung) * Math.sin(winkel)); trapez[i][ii][6] = Math.round(x0 - (Radius + (ii+1) * Teilung) * Math.cos(winkel2)); trapez[i][ii][7] = Math.round(y0 - (Radius + (ii+1) *Teilung ) * Math.sin(winkel2)); } } inter = 3; oldinter = 1; zwProd = 6; //_____________________________________________________________________________________________________________ /* function titleText() { if ( Prod > 2 ) // für Bella Notte / Bianco und Rahmen für Luce { if ( Prod == 3 ) { if ( frame == "s_oz") { var subName = " Notte " } else { var subName = " Bianco " } document.getElementById("titleText").firstChild.data = "" + top.laden2.produktTitle[top.laden2.lang][Prod-1] + subName + top.laden2.typTitle[mi-1] ; } if ( Prod == 4 ) { if ( frame == "s_oz" ) { var subName = " schwarz"; } if ( frame == "w_oz" ) { var subName = " weiss";} if ( frame == "l_oz" ) { var subName = " weiss-lasiert";} if ( frame == "n_oz" ) { var subName = " natur";} document.getElementById("titleText").firstChild.data = "" + top.laden2.produktTitle[top.laden2.lang][Prod-1] + " " + top.laden2.typTitle[mi-1] ; //alert ( "tileText:" + document.getElementById("titleText").firstChild.data + "2:" ); if ( document.getElementById("titleText2") ) { document.getElementById("titleText2").firstChild.data = subName ; } } } else { document.getElementById("titleText").firstChild.data = "" + top.laden2.produktTitle[top.laden2.lang][Prod-1] [frameId] + " " + top.laden2.typTitle[mi-1] + "" ; } } */ function show_image(idx) // für map und jetzt { if ( displayAktiv == true ) { if (idx >= 145) { showPngLocal('aktTimeButton','../images/time_on.png'); heute = new Date(); Stunde = heute.getHours(); Minute = heute.getMinutes(); if ( Stunde > 11 ) { Stunde = Stunde - 12;} BildNr = Stunde * 60 + Minute; idx = Math.round(BildNr); if ( canvas ) { if ( !mapscaled && ! top.laden2.cycleState && ! introInUse) { showTime(numberOfWatches,Stunde, Minute + Sekunde / 60 ); parent.laden2.laPiNr = idx;}} } else { idx = (idx-1) *5; showPngLocal('aktTimeButton','../images/time_off.png'); openpage(1,'AT'); Stunde = Math.round ( (idx - 30) / 60 ); Minute = idx - Stunde * 60; if ( canvas ) { showTime(numberOfWatches,Stunde, Minute ); parent.laden2.laPiNr = idx ; } } //show_main_image(0); //top.laden2.showapic("cyclePos0",main_Prod,0,Res,idx); //top.laden2.showapic("showimg",main_Prod,0,Res,idx); // 1 für Plex, mi-1 für typ und 1 für 400er Auflösung for ( fi = 0; fi < top.laden2.Typ.length -1; fi ++) { top.laden2.showapic(("showimg"+fi),main_Prod,fi,Res,idx); top.laden2.showapic(("cyclePos"+fi),main_Prod,fi,Res,idx) } } } mapscaled = false; function deScale() { for (i1 = 0; i1 < 12; i1++) { if (i1 < 10) { intID1 = "0" + i1; } else { intID1 ="" + i1; } for (i2 = 0; i2 < Teile+1; i2++) {i25 = i2 * 5; if (i25 < 10) { intID2 ="0"+i25; } else { intID2 = i25;} intID = intID1 + intID2; document.getElementById(intID).coords = ""+0+","+0+","+0+","+0+","+0+","+0+","+0+","+0+""; } } mapscaled = false; showPngLocal('FarbSpielButton','../images/mouse_off2.png'); //document.all("aktTimeButton").src="../images/time_off.png" openpage(0,'CG'); return; true; } function scale() { //alert ("Scale()") showPngLocal('aktTimeButton','../images/time_off.png'); openpage(0,'AT'); for (i1 = 0; i1 < 12; i1++) { if (i1 < 10) { intID1 = "0" + i1; } else { intID1 ="" + i1; } for (i2 = 0; i2 < Teile+1; i2++) {i25 = i2 * 5; if (i25 < 10) { intID2 ="0"+i25; } else { intID2 = i25;} intID = intID1 + intID2; document.getElementById(intID).coords = ""+trapez[i1][i2][0]+","+trapez[i1][i2][1]+","+trapez[i1][i2][2]+","+trapez[i1][i2][3]+","+trapez[i1][i2][4]+","+trapez[i1][i2][5]+","+trapez[i1][i2][6]+","+trapez[i1][i2][7]+""; } } //document.all("innercircle").coords = ""+x0+","+y0+","+Math.round(Radius/2)+""; // document.all("Out").coords = ""+x0+","+y0+","+Radius+2*(Teilung*Teile)+""; mapscaled = true; showPngLocal('FarbSpielButton','../images/mouse_on2.png'); sekZeiger = false; openpage(1,'CG'); return; true; } function Scale_map() { var intID1 = "00"; var intID2 = "00"; var i1; var i2; var i25; if ( mapscaled == true ) {deScale(); document.getElementById("FarbSpielButton").title= "click -> color|time|game - on"; } else {scale(); document.getElementById("FarbSpielButton").title= "click -> color|time|game - off"; } show_image(145); aktuell(); } idx = top.laden2.laPiNr; inter = top.laden2.loadstate[main_Prod][mi-1][Res]; oldSpeedfaktor = parent.laden2.speedfaktor minTime = 80; maxTime = 300; function grobCycl() { minTime = 200; maxTime = 800; top.laden2.speedfaktor = top.laden2.speedfaktor * 1.5; } //alert('slower');} function feinCycl() { minTime = 80; maxTime = 300; top.laden2.speedfaktor = top.laden2.speedfaktor / 1.5; } //alert('faster');} tabelSwitch = true; function cyclingII() { sekZeigen = false; showPngLocal('aktTimeButton','../images/time_off.png'); if ( displayAktiv ) {if ( mi >= 0 ) { if ( canvas ) { hour = Math.round((idx-30)/60); minute = idx - hour * 60; if (stp >= 30) { stp = 1 } if ((hour < 0)||(hour>12)||(minute<0)||(minute>60)) {alert ('hour:' + hour + 'minute:' + minute);} if (top.laden2.speedfaktor < minTime) { stp = stp * 1.5; top.laden2.speedfaktor = top.laden2.speedfaktor * 1.5;}; if (top.laden2.speedfaktor > maxTime) { stp = stp / 1.5; top.laden2.speedfaktor = top.laden2.speedfaktor / 1.5;}; //window.defaultStatus = 'speedfaktor:' + parent.laden2.speedfaktor + ' stp:_' + stp; //+ 'cyclSpeed:' + CycleSpeed[inter] + "ms" + CycleSpeed[inter]* parent.laden2.speedfaktor; if ( oldSpeedfaktor != parent.laden2.speedfaktor ) { window.clearInterval(aktiv); aktiv = window.setInterval("cyclingII()", CycleSpeed[inter]* parent.laden2.speedfaktor); // in function Speed setzen? geht wahrscheinlich nicht oldSpeedfaktor = parent.laden2.speedfaktor; //http://colorcycling.de/version2/02/classic.htm } if ( top.laden2.Typ.length-1 > 6 ) { ci_min = mi - 3; if ( ci_min <= 0 ) { ci_min = 0; } ci_max = ci_min + 6; //top.laden2.Typ.length-1 if ( ci_max > top.laden2.Typ.length-1 ) { ci_max = top.laden2.Typ.length-1; ci_min = ci_max - 6; for ( ci = ci_min; ci < ci_max; ci ++) { showTime( ci,hour, minute ); } // cycling für 6 elemente rund um das aktivierte } } else { if (tabelSwitch) { showTime( numberOfWatches,hour, minute ); tabelSwitch = false; } else { ci_min = 0; ci_max = top.laden2.Typ.length-1; if ( mi <= 2 ) { showTime( 0,hour, minute, 3 );} else { if ( mi < numberOfWatches - 1 ) { showTime( mi - 2,hour, minute,3 ); } else { showTime( numberOfWatches - 3,hour, minute, 3 ); } } //numberOfWatches,hour, minute ); } } idx = idx + stp; if ( idx >= 720 ) { idx = 0; } } else { if (( inter > 1 ) && (top.laden2.Bilderindex)) { stp = top.laden2.Bilderindex[inter];} else {stp = 60; } //inter-1 ist schon fertig geladen. inter = top.laden2.loadstate[main_Prod][5][Res]; //Produkt 0 =' Armbanduhren, Typ = 5 = top.laden2.Typ.length-1 =für alle, Res 1 für 400er Bilder [1]; res fehlt //top.laden2.showapic("showimg",main_Prod,0,Res,idx); // 5 statt mi-1 für alle typen , 1 für Plex, mi-1 für typ und 1 für 400er Auflösung; if ( top.laden2.Typ.length-1 > 6 ) { ci_min = mi - 3; if ( ci_min <= 0 ) { ci_min = 0; } ci_max = ci_min + 6; //top.laden2.Typ.length-1 if ( ci_max > top.laden2.Typ.length-1 ) { ci_max = top.laden2.Typ.length-1; ci_min = ci_max - 6; } } else { ci_min = 0; ci_max = top.laden2.Typ.length-1 } // cycling für 10 elemente rund um das aktivierte for ( ci = ci_min; ci < ci_max; ci ++) { //window.defaultStatus = 'activ: ' + top.laden2.typTitle[mi] + ' min: ' + top.laden2.typTitle[ci_min] + ' max: ' + top.laden2.typTitle[ci_max]; top.laden2.showapic(("showimg"+ci),main_Prod,ci,Res,idx); } if ( oldinter != top.laden2.loadstate[main_Prod][5][Res] ) { window.clearInterval(aktiv); //mehr Bilder da?, dann zeigen und schneller machen; stp = top.laden2.Bilderindex[inter]; aktiv = window.setInterval("cyclingII()", CycleSpeed[inter]* top.laden2.speedfaktor); // in function Speed setzen? geht wahrscheinlich nicht oldinter = inter; //http://colorcycling.de/version2/02/classic.htm } idx = Math.round(idx/stp)*stp idx = idx + stp; if ( idx >= 720 ) { idx = 0; } } } } } function showPngLocal (Placename,Picture) {if ( document.getElementById(Placename) ) { if ( mustPngFix ) { //alert ('' + document.getElementById(Placename).width + 'px') if (!(document.getElementById(Placename).style )) { document.getElementById(Placename).setAttribute('style');} if (!document.getElementById(Placename).style.width) { document.getElementById(Placename).style.setAttribute('width'); if (!document.getElementById(Placename).width) {document.getElementById(Placename).setAttribute('width'); document.getElementById(Placename).width = '100%'}; if (document.getElementById(Placename).width >=1 ) { document.getElementById(Placename).style.width = document.getElementById(Placename).width + 'px';} else {document.getElementById(Placename).style.width = document.getElementById(Placename).width;} } if (!document.getElementById(Placename).style.height) {document.getElementById(Placename).style.setAttribute('height'); if (!document.getElementById(Placename).height){document.getElementById(Placename).setAttribute('height'); document.getElementById(Placename).height = '100%'}; if (document.getElementById(Placename).height >=1 ) {document.getElementById(Placename).style.height = document.getElementById(Placename).height + 'px';} else {document.getElementById(Placename).style.height = document.getElementById(Placename).height;} } if (!document.getElementById(Placename).style.filter) {document.getElementById(Placename).style.setAttribute('filter');} document.getElementById(Placename).src= "../images/blank.gif"; document.getElementById(Placename).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + Picture + "', sizingMethod='scale');\" >"; return true; } else { document.getElementById(Placename).src= Picture; return true;} } else {return false;} } ctx = false; function setTable() { //alert ('mi: ' + mi + ' RI: ' + RI ) //tableSwitch = true; var de = document.documentElement; frameWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; frameHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight; // Aufsetzen der Tabelle für die Uhrdarstellung if (document.getElementById('frame')) { var facLInt = parseInt(document.getElementById('frame').style.left ) / parseInt (document.getElementById('frame').style.width); if (facLInt < 0 ) {facLint = - facLInt } //window.defaultStatus = facLInt; lInt = facLInt * ((mainOffsetLeft * numberOfWatches + 10)) ; // setzt die Tabelle so auf, dass die Position erhalten bleibt //Math.round(( frameWidth - mainOffsetLeft * mi + 10) / 2); //lInt = Math.round(( frameWidth - mainOffsetLeft * numberOfWatches + 10) / 2); document.getElementById('frame').style.left = lInt + 'px'; document.getElementById('frame').style.width= mainOffsetLeft * numberOfWatches + 10 + 'px'; }; if ( document.all("mainTable")) { document.all("mainTable").width = ( mainOffsetLeft * numberOfWatches + 10); } if (document.all("spannring")) { document.all("spannring").style.width= ( mainOffsetLeft * numberOfWatches + 80); } for ( ti = 0; ti < numberOfWatches ; ti++) { var mi_store = mi; mi = ti + 1; change_frame(frameId); mi = mi_store; if ( document.all("ti"+ (ti + 1))) { //alert ( document.all("ti"+ (ti + 1)).firstChild.data ); document.all("ti"+ (ti + 1)).childNodes[0].nodeValue = top.laden2.typTitle[ti] } if ( document.all("showimg"+ (ti)) ){ document.all("showimg"+ (ti)).src = top.laden2.Home + top.laden2.root +'/global/A200/'+ top.laden2.Typ[ti] + top.laden2.laPiNr + '.jpg'; document.all("showimg"+ (ti)).width=picWidth; document.all("showimg"+ (ti)).style.width=picWidth; document.all("showimg"+ (ti)).style.top=showimgTop; document.all("showimg"+ (ti)).style.left=showimgLeft + (mainOffsetLeft * ti); } if ( (document.all("secPos"+ (ti)) && ( ot[ti] != "_oz" ) || ( Prod == 1)) ) { /*if ( trueRes == 0 ) { showPngLocal('secPos'+ (ti),'../../pics/global/A120/ImpSekSh120_1.png'); } else { showPngLocal('secPos' + (ti),'../../pics/global/A200/ImpSekSh200_1.png'); }*/ //alert ( Prod + '' + trueRes); if ( !((Prod == 2 )&& ( trueRes == 1 )||( Prod == 3))) {secKorrX = 0; secKorrY = 0}; if ( document.all("secPos"+ (ti)).width ) { document.all("secPos"+ (ti)).width=picWidth;} if ( document.all("secPos"+ (ti)).style.width ) {document.all("secPos"+ (ti)).style.width=picWidth;} if ( document.all("secPos"+ (ti)).style.top ) {document.all("secPos"+ (ti)).style.top=showimgTop + secKorrY;} if ( document.all("secPos"+ (ti)).style.left ) {document.all("secPos"+ (ti)).style.left=showimgLeft+ secKorrX + (mainOffsetLeft * ti);}; } // nun die Uhr drumrum if ( document.all("RahmenNr"+ (ti)) ) { document.all("RahmenNr"+ (ti)).width=pngWidth; document.all("RahmenNr"+ (ti)).height=pngHeight; document.all("RahmenNr"+ (ti)).style.width=pngWidth; document.all("RahmenNr"+ (ti)).style.height=pngHeight; document.all("RahmenNr"+ (ti)).style.top=showimgTop + centerOffsetTop; document.all("RahmenNr"+ (ti)).style.left=showimgLeft + centerOffsetLeft+ (mainOffsetLeft * ti); if ( trueRes == 0 ) { if (mustPngFix) { document.all("RahmenNr"+ (ti)).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + Prod + "00" + frame + ".png', sizingMethod='scale');\" >"; } else { document.all("RahmenNr"+ (ti)).src= Prod + "00" + frame + "" + ".png"; } } else { if (mustPngFix) { document.all("RahmenNr"+ (ti)).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + Prod + "00" + frame + "grbs.png', sizingMethod='scale');\" >"; } else { document.all("RahmenNr"+ (ti)).src= Prod + "00" + frame + "grbs" + ".png"; } // alert (document.all("RahmenNr"+ (ti)).src); } } // nun die gifs mit map if ( document.all("GifPos"+ (ti))) { document.all("GifPos"+ (ti)).src='../images/blank.gif'; document.all("GifPos"+ (ti)).width=pngWidth; document.all("GifPos"+ (ti)).height=pngHeight; document.all("GifPos"+ (ti)).style.width=pngWidth; document.all("GifPos"+ (ti)).style.height=pngHeight; document.all("GifPos"+ (ti)).style.top= showimgTop + gifOffsetTop; document.all("GifPos"+ (ti)).style.left= showimgLeft + gifOffsetLeft+ (mainOffsetLeft * ti); //document.all("GifPos"+ (ti)).onMouseOver = 'javascript:titleText(' + ti + '); return true;' document.all("GifPos"+ (ti)).title = top.laden2.typText[top.laden2.lang][ti]; } if ( document.all("ti"+ (ti))) { document.all("ti"+ (ti)).width = mainOffsetLeft; } //if ( document.all("tt"+ (ti))) { alert (document.all("tt"+ (ti)).value); // document.all("tt"+ (ti)).value = top.laden2.typTitle[ti];} } mi = mi_store; //change_frame(parent.laden2.productVariant); //show_main_image(parent.laden2.laPiTy+1); setCanvas(); if (canvas && ctx ) { ipx = top.laden2.laPiNr; hour = Math.round((ipx-30) / 60 ); minute = ipx - hour * 60; showTime(numberOfWatches, hour, minute);} } function preset() { // weiss der Teufel warum - weil js den src der buttons nicht findet //document.getElementById("cycleButton").src="../images/cycle_off.png"; showPngLocal('aktTimeButton','../images/time_on.png'); showPngLocal('FarbSpielButton','../images/mouse_off2.png'); showPngLocal('cycleButton','../images/cocyl.png'); showPngLocal('Lupe','../images/Luklpl.png'); showPngLocal('triLeft','../images/triLeft.png'); showPngLocal('triRight','../images/triRight.png'); for (i = 0; i < top.laden2.Typ.length ; i++ ) { RI = i; showMainNull() } if (top.laden2.loadgrade <= 4 ) {top.laden2.StartPreload ();} var de = document.documentElement; frameWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; frameHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight; //alert ( document.getElementById('frame').style.width + " w|l: " + document.getElementById('frame').style.left ); //lInt = parseFloat(document.getElementById('frame').style.left); // //var size = getWinSize() //size.w enthält die Breite //size.h enthält die Höhe //lInt = Math.round(( frameWidth - mainOffsetLeft * numberOfWatches + 10) / 2); if (document.getElementById('frame')) { //document.getElementById('frame').style.left = lInt + 'px'; //document.getElementById('frame').style.width= mainOffsetLeft * numberOfWatches + 10 + 'px'; }; setTable(); heute = new Date(); Stunde = heute.getHours(); Minute = heute.getMinutes(); //alert ('alle aufgesetzt') //alert (); if (canvas) { setTimeout('showTime( numberOfWatches, Stunde, Minute)',500) }; // zeigt erstmal alle designs, damit keine leeren Uhren auftauchen } function openpage(id,tag) { if ( !tag) { tag = "P" } if ( id >= 0 ) { for ( var i = 1; i < id; i++) { if (document.getElementById(tag + i )) {document.getElementById(tag + i ).style.border = "1px solid #202020"; document.getElementById(tag + i ).style.borderLeftColor="#404040"; document.getElementById(tag + i ).style.borderTopColor="#404040"; document.getElementById(tag + i ).style.color="silver"; document.getElementById(tag + i).style.backgroundImage = "url(../images/bg3.jpg)"; document.getElementById(tag + i ).style.fontWeight = "lighter"; } } } if ( id < 14 ) { for ( var i = id; i < 14; i++) { if (document.getElementById(tag + i )) {document.getElementById(tag + i ).style.border = "1px solid #202020"; document.getElementById(tag + i ).style.borderLeftColor="#404040"; document.getElementById(tag + i ).style.borderTopColor="#404040"; document.getElementById(tag + i ).style.color="silver"; document.getElementById(tag + i).style.backgroundImage = "url(../images/bg3.jpg)"; document.getElementById(tag + i ).style.fontWeight = "lighter" ; } } } if (document.getElementById(tag + id )) { document.getElementById(tag + id ).style.border = "1px solid #404040"; document.getElementById(tag + id ).style.borderLeftColor="black"; document.getElementById(tag + id ).style.borderTopColor="black"; document.getElementById(tag + id ).style.color="white" document.getElementById(tag + id).style.backgroundImage = "url(../images/bg1.jpg)"; document.getElementById(tag + id ).style.fontWeight = "bolder"; } } function checkVis(id) {if (document.getElementById(id)) {if (document.getElementById(id).style.visibility == 'visible') { return true;} else {return false;} } return false; } function toggleVis(id) {if (document.getElementById(id)) {if (document.getElementById(id).style.visibility == 'visible') {document.getElementById(id).style.visibility = 'hidden'; return false;} else { document.getElementById(id).style.visibility = 'visible'; return true;} } return false; } function unVis(id) {if (document.getElementById(id)) { document.getElementById(id).style.visibility = 'hidden'; return false;} } function setVis(id) {if (document.getElementById(id)) { document.getElementById(id).style.visibility = 'visible'; return true;} } function checkDis(id) {if (document.getElementById(id)) {if (document.getElementById(id).style.display = 'inline') { return true;} else {return false;} } return false; } function toggleDis(id) {if (document.getElementById(id)) {if (document.getElementById(id).style.display = 'inline') {document.getElementById(id).display = 'none'; return false;} else { document.getElementById(id).style.display = 'inline'; return true;} } return false; } function unDis(id) {if (document.getElementById(id)) { document.getElementById(id).style.display = 'none'; return false;} } function setDis(id) {if (document.getElementById(id)) { document.getElementById(id).style.display = 'inline'; return true;} } function cycle() {window.clearInterval(aktiv); top.laden2.cycleState = true; aktiv = window.setInterval("cyclingII()", top.laden2.speedfaktor * CycleSpeed[inter]); }//speedfaktor * CycleSpeed[inter-1]);} // je gröber -> je langsamer = gleiche Zeitdauer für Umdrehung function stop_cycle() { window.clearInterval(aktiv); top.laden2.cycleState = false; } // stoppt das cycling function toggleCycle() { // alert ("toggleCycle" + document.all("cycleButton").title + " src " + document.all("cycleButton").src); //alert ("cycling:" + cycleState ) //alert(document.all("speedbuttons").style.visibility); if ( top.laden2.cycleState == true ) { showPngLocal('cycleButton','../images/cocyl.png') ; openpage(0,'CC'); document.all("cycleButton").title= "cycling on" ; if ( document.all("speedbuttons") ) { document.all("speedbuttons").style.visibility="hidden"} stop_cycle(); } else { showPngLocal('cycleButton','../images/cocylOff.png') ; document.all("cycleButton").title= "cycling off"; openpage(1,'CC'); if ( document.all("speedbuttons") ) { document.all("speedbuttons").style.visibility="visible"} cycle(); } } function holdCycle() { //alert ( top.laden2.cycleState); if (top.laden2.highPerform) {showPngLocal('detail','../images/grob.png'); openpage(1,'HP');} if ( top.laden2.cycleState == true ) { openpage (1,'CC'); if ( document.all("speedbuttons") ) { document.all("speedbuttons").style.visibility="visible"; openpage(1,'SB');} showPngLocal('cycleButton','../images/cocylOff.png') ; //alert ('holdcycle2:' + document.getElementById('cycleButton').src); document.all("cycleButton").title= "cycling off" cycle(); } else {show_image(145); openpage (0,'CC');showPngLocal('cycleButton','../images/cocyl.png') ; if ( document.all("speedbuttons") ) { document.all("speedbuttons").style.visibility="hidden"; openpage(0,'SB');} } } function faster() {window.clearInterval(aktiv); top.laden2.speedfaktor = top.laden2.speedfaktor * 0.8; aktiv = window.setInterval("cyclingII()", top.laden2.speedfaktor * CycleSpeed[inter]); } function slower() {window.clearInterval(aktiv); top.laden2.speedfaktor = top.laden2.speedfaktor / 0.8; aktiv = window.setInterval("cyclingII()", top.laden2.speedfaktor * CycleSpeed[inter]);} function stop_Preload () { if ( parent.laden2.clearpreload ) { window.clearInterval(parent.laden2.inm); }} frame = "s_oz" var rahmen = new Array (4); // welche Rahme gibt es für die Produkte rahmen[0] = new Array ("",""); rahmen[1] = top.laden2.framesAU rahmen[2] = new Array ("",""); // Plex rahmen[3] = new Array ( "s", "w"); // Bella Notte und Bianco rahmen[4] = new Array ( "n","l","s","w" ); // 4 Rahmenfarben id = 1; sekZeigen = true; displayAktiv = false; frameId = 0; ot = top.laden2.otr ; // Zeioger oder nichZeiger für Maske bei classic, gamma.... //if ( Prod == 1 ) { for ( var i = 0; i 11 ) { Stunde = Stunde - 12;} neu_idx = Stunde * 60 + Minute; //top.laden2.laPiNr; if ( top.laden2.laPiNr >= 0 && top.laden2.laPiNr < 721 ) if ( top.laden2.laPiNr == neu_idx ) { showPngLocal('aktTimeButton','../images/time_on.png');AT = true; openpage(1,'AT');} else { showPngLocal('aktTimeButton','../images/time_off.png');AT = false; openpage(0,'AT')} if (canvas && ctx) { if (( displayAktiv && !mapscaled && ! top.laden2.cycleState && ! introInUse) ) { sekZeigen = true; if (( Math.abs ( parent.laden2.laPiNr - neu_idx ) <= 2 ) && (( !shiftInUse)||(Sekunde == 1))) { showTime(numberOfWatches, Stunde, Minute + Sekunde / 60); parent.laden2.laPiNr = neu_idx; } } //showTime(numberOfWatches,Stunde, Minute + Sekunde / 60) //showPngLocal('aktTimeButton','../images/time_on.png'); //alert ( "nachher:" + document.getElementById("aktTimeButton").src ) first = false; } else { if ( (top.laden2.laPiNr == neu_idx -1 ) || first ) { sekZeigen = true; top.laden2.laPiNr = neu_idx; if ( displayAktiv ) { if ( ! canvas ) { for ( si = 1; si < top.laden2.Typ.length - 1; si ++) { top.laden2.showapic(("showimg"+si),main_Prod,si,Res,neu_idx) } } //alert ( "vorher:" + document.getElementById("aktTimeButton").src ) showPngLocal('aktTimeButton','../images/time_on.png'); //alert ( "nachher:" + document.getElementById("aktTimeButton").src ) first = false; } } } } } function Modell(right) { var zwSpCy = document.getElementById("cyclePos0").name var zwSpSePo = document.getElementById("SecPos0").id var zwSpPng = document.getElementById("showimg0").id for (i = 0; i < 4; i++) { var Add = i; if ( i == 0 ) { Add = ""; } var Add2 = i + 1; if ( i == 4 ) { Add2 = ""; } alert ( "Add2:" + Add2 + "Add:" + Add + " Id:" + ( "cyclePos0" + Add2) + " document.getElementById('cyclePos0' + Add2).name" + document.getElementById("cyclePos0" + Add2).name) document.getElementById("cyclePos0" + Add).name = document.getElementById("cyclePos0" + Add2).name document.getElementById("secPos0" + Add).id = document.getElementById("secPos0" + Add2).id document.getElementById("showimg0" + Add).id = document.getElementById("Showimg0" + Add2).id } document.getElementById("cyclePos4").name = zwSpCy document.getElementById("SecPos4").id = zwSpSePo document.getElementById("Showimg4").id = zwSpPng } function showMainNull() { displayAktiv = true; zwProd = Prod; change_frame(frameId); RahmenID = "RahmenNr" + (RI); //alert( RahmenID + " X" + styleElementPosX + " y" + styleElementPosY) if ( document.all("RahmenNr" + (RI)) ) {document.getElementById("RahmenNr" + (RI)).style.width = pngWidth + "px"; document.getElementById("RahmenNr" + (RI)).style.height = pngHeight + "px"; if ( trueRes == 0 ) { showPngLocal(('RahmenNr' + RI),(zwProd + '00' + frame + '.png')); } else { if ( Prod == 3 ) {showPngLocal(('RahmenNr' + RI),(zwProd + '00' + frame + 're' + '.png')); //alert ( document.all("RahmenNr" + (RI)).src); } else {showPngLocal(('RahmenNr' + RI),(zwProd + '00' + frame + 'grbs' + '.png'));} } } if ( sekZeigen == false ) { document.getElementById("secPos0").src = "../images/blank.gif"; } } function show_main_image(Hauptbild) { if ( top.laden2.cycleState == false ) { aktuell();} //titleText(mi-1) if ( Hauptbild == 0 ) { showMainNull(); } else { mi = Hauptbild; showMainNull(); // ******************************** ?????????????????????? toggleButton(Hauptbild) //if ( mi <= parent.laden2.Typ.length -1 ) // { //document.getElementById("RahmenNr_plex").style.width = jpgaltWidth + "px" //document.getElementById("RahmenNr_plex").style.height = jpgaltHeight + "px" //document.getElementById("RahmenNr_plex").src = Prod + "A" + Hauptbild+".jpg"; //} else { displayAktiv = false; zwProd = 6; // document.getElementById("secPos").style.filter = ""; // document.getElementById("secPos").src = "../images/blank.gif"; //alert ("show_main_o src='" + Prod + "00" + frame + ".png ZzwProd:" +zwProd ); // document.getElementById("RahmenNr" + (mi-1)).style.filter = ""; // document.getElementById("cyclePos").src = "../images/blank.gif"; //alert ("show_main_o src='" + Prod + "00" + frame + ".png ZzwProd:" +zwProd ); // document.getElementById("RahmenNr" + (mi-1)).src = "../images/blank.gif"; // } } // titleText() } var RI = 2; var subName = ''; /*function titleText(TyNr) { RI = TyNr +1; window.defaultStatus = top.laden2.typText[top.laden2.lang][TyNr]; // alert ( top.laden2.typText[top.laden2.lang][mi-1]); if ( Prod > 2 ) // für Bella Notte / Bianco und Rahmen für Luce { if ( Prod == 3 ) { if ( frame == "s_oz") { var subName = " Notte " } else { var subName = " Bianco " } if ( document.getElementById("titleText") ) { document.getElementById("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] + subName + parent.laden2.typTitle[TyNr] ; } } if ( Prod == 4 ) { if ( frame == "s_oz" ) { subName = " schwarz"; } if ( frame == "w_oz" ) { subName = " weiss";} if ( frame == "l_oz" ) { subName = " weiss-lasiert";} if ( frame == "n_oz" ) { subName = " natur";} if ( document.getElementById("titleText") ) { document.getElementById("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] + " " + parent.laden2.typTitle[TyNr] ; } if ( document.getElementById("titleText2") ) { document.getElementById("titleText2").firstChild.data = subName ; } setAText('design',parent.laden2.typTitle[TyNr]); setAText('case',subName); } } else { if ( Prod == 1 ) { document.getElementById("titleText").firstChild.data = "" + parent.laden2.watchFamily[frameId] // + " " + parent.laden2.typTitle[TyNr] + " " // + top.laden2.caseArtNr[frameId] + "-" // + top.laden2.strapArtNr[top.laden2.deFtCS[TyNr][frameId]] // + "-" + top.laden2.typArtLong[top.laden2.selection[TyNr]]//parent.laden2.typTitle[mi-1] + "" ; if ( document.getElementById("titleText2") ) { document.getElementById("titleText2").firstChild.data = top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[TyNr][frameId]] + "-" + top.laden2.typArtLong[top.laden2.selection[TyNr]];}//parent.laden2.typTitle[mi-1] + "" if ( document.getElementById("design")) {document.getElementById("design").firstChild.data = parent.laden2.typTitle[TyNr];} for ( var i = 1; i < top.laden2.modRef.length; i++ ) { if ( (top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[mi-1][frameId]] ) == top.laden2.modRef[i][0] ) { // alert ("value" +top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[mi-1][frameId]] + "ref" + top.laden2.modRef[i][0]) if ( document.getElementById("diameter")) {document.getElementById("diameter").firstChild.data = top.laden2.modRef[i][10] +"mm" ;} if ( document.getElementById("height")) {document.getElementById("height").firstChild.data = top.laden2.modRef[i][7] + "mm"; } if ( document.getElementById("movement")) {document.getElementById("movement").firstChild.data = top.laden2.modRef[i][2]; } if ( document.getElementById("strap")) {document.getElementById("strap").firstChild.data = top.laden2.modRef[i][15]; } if ( document.getElementById("case")) {document.getElementById("case").firstChild.data = top.laden2.modRef[i][4]; } } } watchesVisible(false); } else { if ( document.getElementById("titleText") ) { document.getElementById("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] [frameId] + " " + parent.laden2.typTitle[TyNr] + "" ; } } } }*/ function titleText(TyNr) { if (! TyNr) { TyNr = mi -1 } top.laden2.laPiTy = TyNr; mi = TyNr + 1; window.defaultStatus = top.laden2.typText[top.laden2.lang][TyNr]; //alert ( "Eingang: tileText:" + document.all("titleText").firstChild.data ) // alert ( top.laden2.typText[top.laden2.lang][[TyNr]); if ( Prod > 2 ) // für Bella Notte / Bianco und Rahmen für Luce {if ( Prod == 3 ) { if ( frame == "s_oz") { var subName = " Notte " } else { var subName = " Bianco " } document.all("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] + subName //+ parent.laden2.typTitle[TyNr] ; } if ( Prod == 4 ) { if ( frame == "s_oz" ) { var subName = " schwarz"; } if ( frame == "w_oz" ) { var subName = " weiss";} if ( frame == "l_oz" ) { var subName = " weiss-lasiert";} if ( frame == "n_oz" ) { var subName = " natur";} document.all("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] //+ " " + parent.laden2.typTitle[TyNr] ; //alert ( "tileText:" + document.all("titleText").firstChild.data + " 2:" + parent.laden2.produktTitle[top.laden2.lang][Prod-1] + " " + parent.laden2.typTitle[TyNr]); if ( document.all("titleText2") ) { document.all("titleText2").firstChild.data = subName ; } setAText('design',parent.laden2.typTitle[TyNr]); setAText('case',subName); } } else { if ( Prod == 1 ) { document.all("titleText").firstChild.data = parent.laden2.watchFamily[frameId] // + " " + parent.laden2.typTitle[TyNr] document.all("titleText2").firstChild.data = top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[TyNr][frameId]] + "-" + top.laden2.typArtLong[top.laden2.selection[TyNr]]//parent.laden2.typTitle[TyNr] + "" if ( document.getElementById("textTitleText2")) {document.getElementById("textTitleText2").firstChild.data = top.laden2.modRef[top.laden2.lang][0][0]}; if ( document.getElementById("design")) {document.getElementById("design").firstChild.data = parent.laden2.typTitle[TyNr]}; if ( document.getElementById("textDesign")) {document.getElementById("textDesign").firstChild.data = parent.laden2.textDesign[top.laden2.lang]}; if ( document.getElementById("textSecondHand")) {document.getElementById("textSecondHand").firstChild.data = top.laden2.textSecondHand[top.laden2.lang]} if ( document.getElementById("secondHand")) {document.getElementById("secondHand").firstChild.data = top.laden2.designRef[top.laden2.lang][TyNr] } if ( document.getElementById("textDiameter")) {document.getElementById("textDiameter").firstChild.data = top.laden2.modRef[top.laden2.lang][0][10];} if ( document.getElementById("textHeight")) {document.getElementById("textHeight").firstChild.data = top.laden2.modRef[top.laden2.lang][0][7]; } if ( document.getElementById("textMovement")) {document.getElementById("textMovement").firstChild.data = top.laden2.modRef[top.laden2.lang][0][2]; } if ( document.getElementById("textStrap")) {document.getElementById("textStrap").firstChild.data = top.laden2.modRef[top.laden2.lang][0][15]; } if ( document.getElementById("textCase")) {document.getElementById("textCase").firstChild.data = top.laden2.modRef[top.laden2.lang][0][4]; } if ( document.getElementById("textBezel")) {document.getElementById("textBezel").firstChild.data = top.laden2.modRef[top.laden2.lang][0][5]; } if ( document.getElementById("textPrice")) {document.getElementById("textPrice").firstChild.data = top.laden2.modRef[top.laden2.lang][0][16] } for ( var i = 1; i < top.laden2.modRef[top.laden2.lang].length; i++ ) { if ( (top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[TyNr][frameId]] ) == top.laden2.modRef[top.laden2.lang][i][0] ) { // alert ("value" +top.laden2.caseArtNr[frameId] + "-" + top.laden2.strapArtNr[top.laden2.deFtCS[TyNr][frameId]] + "ref" + top.laden2.modRef[i][0]) if ( document.getElementById("diameter")) {document.getElementById("diameter").firstChild.data = top.laden2.modRef[top.laden2.lang][i][10] +"mm" ;} if ( document.getElementById("height")) {document.getElementById("height").firstChild.data = top.laden2.modRef[top.laden2.lang][i][7] + "mm"; } if ( document.getElementById("movement")) {document.getElementById("movement").firstChild.data = top.laden2.modRef[top.laden2.lang][i][2]; } if ( document.getElementById("strap")) {document.getElementById("strap").firstChild.data = top.laden2.modRef[top.laden2.lang][i][15]; } if ( document.getElementById("case")) {document.getElementById("case").firstChild.data = top.laden2.modRef[top.laden2.lang][i][4]; } if ( document.getElementById("bezel")) {document.getElementById("bezel").firstChild.data = top.laden2.modRef[top.laden2.lang][i][5]; } //if ( document.getElementById("price")) {document.getElementById("price").firstChild.data = top.laden2.modRef[top.laden2.lang][i][16] + ",00 €" } } } } else {document.all("titleText").firstChild.data = "" + parent.laden2.produktTitle[top.laden2.lang][1][frameId] //+ " " + parent.laden2.typTitle[TyNr] } } } //--------------------------------------------------------------------------- canvas functions ----------------------------------------------------------------------------------------------------------------------------------------------------- //----- Darstellung der Uhrzeit function setCanvas () { //alert (canvas + "c:canvas0: " + document.getElementById('canvas0')) if (( !document.getElementById('canvas0'))||(!canvas)) {canvas = false; window.defaultStatus ='using loaded pics'; stp=15; top.laden2.speedfaktor = 1; document.getElementById('cyclePos0').style.display = 'inline'; return false; } // weiter mit canvas watchNumber = 0; window.defaultStatus ='using canvas functions' if (document.getElementById('blackWall')) {document.getElementById('blackWall').style.display = 'inline'; }; if (document.getElementById('HP1')) { document.getElementById('HP1').style.display = 'none';} stp = 1; inter = 20; top.laden2.speedfaktor = 1; ctx = new Array (numberOfWatches); can = new Array (numberOfWatches); han = new Array (numberOfWatches); hands = new Array (numberOfWatches); midX = new Array (numberOfWatches); midY = new Array (numberOfWatches); min = new Array (numberOfWatches); minZ = new Array (numberOfWatches); h = new Array (numberOfWatches); hZ = new Array (numberOfWatches); dial = new Array (numberOfWatches); if (Prod == 1) document.getElementById('spannring').style.display = 'none'; for ( var i = 0; i < numberOfWatches; i++) { document.getElementById('cyclePos' + i ).style.display = 'none'; can[i] = document.getElementById('canvas'+i) ctx[i] = can[i].getContext('2d'); //alert ( 'ctx:' + ctx ); hands[i] = document.getElementById('canvasZ'+i) han[i] = hands[i].getContext('2d'); // größen über cyclePosKopie-id, weil cyclecos innerhalb von canvas tag von opera nicht gefunden wird can[i].setAttribute("width", parseInt(document.getElementById('cyclePos'+i).style.width)); can[i].setAttribute("height", can[i].width); can[i].style.width = can[i].width + 'px'; can[i].style.height = can[i].width + 'px'; can[i].style.top = document.getElementById('cyclePos'+i).style.top ; can[i].style.left = document.getElementById('cyclePos'+i).style.left; hands[i].setAttribute("width", can[i].width); hands[i].setAttribute("height", can[i].height); hands[i].style.width = can[i].style.width; hands[i].style.height = can[i].style.height; hands[i].style.top = can[i].style.top ; hands[i].style.left = can[i].style.left; midX[i] = Math.round (can[i].width/2); midY[i] = Math.round(can[i].height/2) // } for ( var i = 0; i < top.laden2.Typ.length - 1; i++) { //top.laden2.Typ.length-2; min[i] = new Image(); minZ[i] = new Image(); h[i]= new Image(); hZ[i] = new Image(); // overlay h holen dial[i]= new Image(); // overlay wieder holen min[i] = top.laden2.canPics[trueRes][i][1]; //'../../pics/caPics/transCneggsp.png' //document.getElementById('c').src; minZ[i] = top.laden2.canPics[trueRes][i][3]; //'../../pics/caPics/zeigerMinGamma.png' //document.getElementById('minZ').src; h[i] = top.laden2.canPics[trueRes][i][2]; //'../../pics/caPics/transMneggsp.png' //document.getElementById('m').src; hZ[i] = top.laden2.canPics[trueRes][i][4]; //'../../pics/caPics/zeigerHGamma.png' //document.getElementById('hZ').src; dial[i] = top.laden2.canPics[trueRes][i][0]; //'../../pics/caPics/transPicYneggsp.png' //document.getElementById('y').src; //alert((dial[i].src) + ":" + (h[i].src) + ":" + (min[i].src) + ":" + (hZ[i].src) + ":" + (minZ[i].src)); } /*secPicName = '../../pics/global/A200/ImpSekSh200_'; handPic = new Array (61); for ( var i = 0; i <60; i++) { handPic[i] = new Image (); handPic[i].src = secPicName + (i+1) + '.png'; }*/ secPic = 0; minPic = 0; hourPic = 0; step = 90; //min, minZ, h, hZ //alert ('canvas preseted'); //for ( var i = 0; i < numberOfWatches; i++) {alert ( "No:" + i + " h " + hands[i].width + ":" + hands[i].height + ":" + can[i].width + ":" + can[i].height + ":" +midX[i] + ":" + midY[i] + " ctx:" + ctx[i] ); } } function showTime( watchNumber, hour,minute, Anzahl ) { if ( ! ctx ) { alert ('canvas.ctx not defined'); return false;} if (( hour < 0 ) || ( hour > 12 ) || (minute < 0 ) || ( minute > 60 )) { heute = new Date(); hour = heute.getHours(); Sekunde = heute.getSeconds(); minute = heute.getMinutes() + Sekunde / 60; } if ( watchNumber >= numberOfWatches ) { Start = 0; Anzahl = numberOfWatches;} else { Start = watchNumber; if (! Anzahl) { var Anzahl = 1 }} { for ( var i = Start; i < ( Start + Anzahl ); i++) { //alert ( "watchNo.: " + i + " time: " + hour + ":" + minute ); ctx[i].globalCompositeOperation = 'copy'; ctx[i].clearRect(0,0,can[i].width,can[i].height) //ctx[i].fillStyle = "rgba(0, 0, 0, 1)"; //ctx[i].fillRect(0,0,midX[i],midY[i]); //ctx[i].arc ( midX[i],midY[i],0.7*midX[i],0, 2 * Math.PI,true); ctx[i].translate(midX[i],midY[i]); ctx[i].rotate( minute / 30 * Math.PI ) ; //( minute / 60 * 2 * Math.PI ) ; ctx[i].translate(-midX[i],-midY[i]); ctx[i].drawImage(min[i],0,0,can[i].width,can[i].height); ctx[i].translate(midX[i],midY[i]); ctx[i].rotate( - minute / 30 * Math.PI ) ; //( - minute / 60 * 2 * Math.PI ) ctx[i].globalCompositeOperation = 'lighter'; ctx[i].rotate( ( hour + minute / 60 ) / 6 * Math.PI ) ; //( hour / 12 + minute / 60 /12 ) * 2 * Math.PI ctx[i].translate(-midX[i],-midY[i]); ctx[i].drawImage(h[i],0,0,can[i].width,can[i].height); ctx[i].translate(midX[i],midY[i]); ctx[i].rotate( (- hour - minute / 60 ) / 6 * Math.PI); //(- hour / 12 - minute / 60 /12 ) * 2 * Math.PI ctx[i].translate(-midX[i],-midY[i]); ctx[i].globalCompositeOperation = 'lighter'; ctx[i].drawImage(dial[i],0,0,can[i].width,can[i].height); // und draufsetzen setBlackHands (i, hour,minute) } } } function setBlackHands (watch,hour,minute) { //han.globalCompositeOperation = 'destination-over'; if ( minZ[watch].src ) { han[watch].clearRect(0,0,hands[watch].width,hands[watch].height); han[watch].translate(midX[watch],midY[watch]); han[watch].rotate( minute / 30 * Math.PI ) ; //minute / 60 * 2 * Math.PI han[watch].translate(-midX[watch],-midY[watch]); han[watch].drawImage(minZ[watch],0,0,hands[watch].width,hands[watch].height); } if ( hZ[watch].src) { han[watch].translate(midX[watch],midY[watch]); han[watch].rotate( ( hour + minute /60 - minute / 5 ) / 6 * Math.PI ) ; //( hour / 12 + minute / 60 /12 - minute / 60 )* 2 * Math.PI //han.rotate( ( hour / 12 + minute / 60 /12 ) * 2 * Math.PI ) ; han[watch].translate(-midX[watch],-midY[watch]); han[watch].drawImage(hZ[watch],0,0,hands[watch].width,hands[watch].height); han[watch].translate(midX[watch],midY[watch]); han[watch].rotate( (- hour - minute / 60 ) /6 * Math.PI); //(- hour / 12 - minute / 60 /12 ) * 2 * Math.PI han[watch].translate(-midX[watch],-midY[watch]); } } /* function canvasAktuell() { heute = new Date(); Stunde = heute.getHours(); Minute = heute.getMinutes(); Sekunde = heute.getSeconds(); // Darstellung der Sekunde über aktuell(); //canvasShowSec ('secPos',secPicName) showTime ( 0,Stunde, Minute + Sekunde/60) } function canvasShowSec (Placename,secPicName) { document[Placename].src = handPic[Sekunde].src; //secPicName + Sekunde + '.png'; //alert (handPic[Sekunde].src); //alert(secPic + Sekunde + '.png') } */ //------------------------------------------------------------ end canvas functions -------------------------------- akt = window.setInterval("aktuell()",1000); // alle 30 sek Update des Bildes - falls auf Uhrzeit steht // if ( (Prod > 2 ) && ( top.laden2.localsource == true ) ) { top.laden2.Typ[3] = "V4_" } else { top.laden2.Typ[3] = "V1_"} top.laden2.window.clearInterval(top.laden2.inm); //var mains = new Array("classic","gamma","dot","vertigo","concept","alle"); //______________________________________________________________________________________________________ var i = 0; var stp = 15; // erstmal 1h dann 30min, 15min, 5 min, 1min speedfaktor = 0.1; //________________________________________________________________________________________________________ var aktiv; //= window.setInterval("cycling()", 80); CycleSpeed = new Array(1920,960,480,480,480,160,160,160,160,160,160,160,160,160,160,160,32,32); // ms für Task cycling() //Bilderindex = new Array(60, 30,15, 15, 15, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 1, 1); // eins zuviel wegen cycle() //________________________________________________________________________________________________________ //document.write(root); //___________________________________________________________________________________________________ displayAktiv = true; sekZeigen = true; function setAText(id,text) { if ( document.getElementById(id) ) { document.getElementById(id).firstChild.data = text;} } function controlVisible(val) { //alert(val); if ( val) { document.all("BedienfeldPos").style.visibility="visible";} else { document.all("BedienfeldPos").style.visibility="hidden";} } /* function watchesVisible(val) { if ( val) { // alert ( document.all("wn3").style.clip.rec); document.all("UWahl").style.visibility="visible"; document.getElementById('titleText').style.visibility="hidden";} else { document.all("UWahl").style.visibility="hidden"; document.getElementById('titleText').style.visibility="visible";} } */ function watchesVisible(val) { if ( val) { // alert ( document.all("wn3").style.clip.rec); document.all("UWahl").style.visibility="visible"; document.all("t2").style.visibility="visible"; } else { document.all("UWahl").style.visibility="hidden"; document.all("t2").style.visibility="hidden"; } } function displaysVisible(val) { if ( val) { document.all("DWahl").style.visibility="visible"; document.all("t1").style.visibility="visible";} else { document.all("DWahl").style.visibility="hidden"; document.all("t1").style.visibility="hidden";} } /* function frameShift (frNa,o,r,u,l) {document.getElemetById(frNa).style.clip='rect(' + o + "px " + r + "px " + u + "px " + l + "px )"} //sC0 = window.setInterval("startCycling()",200000); function zoomPic ( Placename, Picture, StartSize, intervall, EndSize) { if ( document.getElementById(Placename) ) { } else { alert ("zoomPic: kann " + Placename + "nicht finden !")} } */ var lInt = 0; shiftInUse = 0; fraNaInt = 0; leftInt = 0; toggleShift = false; fak = 1; function frameShift (frNa, left) { de = document.documentElement; frameWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; LaengeDesBildes = mainOffsetLeft * numberOfWatches + 10; if ( (frameWidth - LaengeDesBildes) >= 20 ) {stopShift (); return true;} if (toggleShift) { toggleshift = false } else { fraNaInt = frNa; leftInt = left; grobCycl(); shiftInUse = window.setInterval('shifting (fraNaInt,leftInt)',36)}} function stopShift () {window.clearInterval(shiftInUse); shiftInUse = false; fak = 1; feinCycl()} function shifting (frNa, left) { //window.defaultStatus = 'body: ' + document.body.clientWidth + ' w: ' + document.getElementById('windowFrame').width; LaengeDesBildes = mainOffsetLeft * numberOfWatches + 10; //window.defaultStatus = ('frameWidth: ' + frameWidth + ' LaengeDesBildes:_' + LaengeDesBildes + ' diff: ' + (frameWidth - LaengeDesBildes) ) if ( (frameWidth - LaengeDesBildes) >= -20 ) { document.getElementById(frNa).style.left = Math.round((frameWidth - LaengeDesBildes)/2 - 10) + "px"; window.defaultStatus = 'shifting pendet'; return true;} if ( (( lInt >= 0 )&&( fak * left > 0 )) || ((lInt < (frameWidth - (mainOffsetLeft * numberOfWatches ) ))&&( fak * left < 0)) ) { if (toggleShift) { fak = - fak; if ( (fak * left) > 0 ) {showPngLocal('triLeft','../images/triLeftSel.png'); showPngLocal('triRight','../images/triRight.png');} else {showPngLocal('triLeft','../images/triLeft.png'); showPngLocal('triRight','../images/triRightSel.png');} } else { window.clearInterval(shiftInUse);}} document.getElementById(frNa).style.left = lInt + fak * left + "px"; lInt = lInt + fak * left; } StartPosition = 0; LaengeDesBildes = mainOffsetLeft * numberOfWatches + 10 //- ( window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth); //mainOffsetLeft * numberOfWatches + 10; function scrollIt() { shiftInUse = true; if (StartPosition > LaengeDesBildes - ( window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth) ) { StartPosition = StartPosition - LaengeDesBildes; } StartPosition += 4; //window.scroll(StartPosition, 0); document.getElementById('frame').style.left = - StartPosition + "px"; setTimeout('scrollIt()', 36); } var PlaceName = new Array( 10 ); var Eigenschaft = new Array( 10 ); var StartWidth = new Array( 10 ); var StartHeight = new Array( 10 ); var StepWidth = new Array( 10 ); var StepHeight = new Array( 10 ); var StoppWidth = new Array( 10 ); var StoppHeight = new Array( 10 ); var Stopp = new Array( 10 );var incWidth = new Array( 10 );var incHeight = new Array( 10 ); var shift = new Array( false,false,false,false,false,false,false,false,false,false ); var oldPN; var oldEi; var oldStop; var oldInt; var nextPN = new Array( 10 ); var nextEi= new Array( 10 ); var nextStop= new Array( 10 ); var nextInt= new Array( 10 ); var nextShiftI = 0; var incI= new Array( 10 ); var inac = new Array (); function shiftValue ( PN, Ei, Sta, Stop, Stp, Int ) // wo = PN Sta = Size wie vorhanden , Stop =Size wie gewünscht Stp = Anzahl Schritte, Iv = Intervall in Millisekunden {if (document.getElementById(PN)) { switch (Ei) {case 'size': { if ((oldPN == PN) && ( oldEi == Ei ) && ( oldStop == Stop) && ( oldInt == Int) ) { alert ( "Anfrage läuft schon !" );return; true;} // Anfrage läuft schon ! oldPN = PN; oldEi = Ei; oldStop = Stop; oldInt = Int; for ( var i = 0; i < nextPN.length; i ++) { if ( ! shift[i] ) { nextShiftI = i;} } if ( ! shift[nextShiftI] ) { nextPN[nextShiftI] = PN; nextEi[nextShiftI] = Ei; nextStop[nextShiftI] = Stop; nextInt[nextShiftI] = Int; PlaceName[nextShiftI] = PN; Eigenschaft[nextShiftI] = Ei; if ( (Ei == 'size') && (document.getElementById(PN).width)) { StartWidth[nextShiftI] = document.getElementById(PN).width StoppWidth[nextShiftI] = Math.round(StartWidth[nextShiftI]/Sta * Stop); StepWidth[nextShiftI] = Math.round((StoppWidth[nextShiftI] - StartWidth[nextShiftI]) / Stp); incWidth[nextShiftI] = StartWidth[nextShiftI] StartHeight[nextShiftI] = document.getElementById(PN).height StoppHeight[nextShiftI] = Math.round(StartHeight[nextShiftI]/Sta * Stop); StepHeight[nextShiftI] = Math.round((StoppHeight[nextShiftI] - StartHeight[nextShiftI]) / Stp); Stopp[nextShiftI] = Stop; incHeight[nextShiftI] = StartHeight[nextShiftI]; incI[nextShiftI] = true; shift[nextShiftI] = true; if ( !Int) { var Int = 100 } if (nextShiftI == 9 ) { inac[nextShiftI] = window.setInterval('increment(9)',Int); } if (nextShiftI == 8 ) { inac[nextShiftI] = window.setInterval('increment(8)',Int); } if (nextShiftI == 7 ) { inac[nextShiftI] = window.setInterval('increment(7)',Int); } if (nextShiftI == 6 ) { inac[nextShiftI] = window.setInterval('increment(6)',Int); } if (nextShiftI == 5 ) { inac[nextShiftI] = window.setInterval('increment(5)',Int); } if (nextShiftI == 4 ) { inac[nextShiftI] = window.setInterval('increment(4)',Int); } if (nextShiftI == 3 ) { inac[nextShiftI] = window.setInterval('increment(3)',Int); } if (nextShiftI == 2 ) { inac[nextShiftI] = window.setInterval('increment(2)',Int); } if (nextShiftI == 1 ) { inac[nextShiftI] = window.setInterval('increment(1)',Int); } if (nextShiftI == 0 ) { inac[nextShiftI] = window.setInterval('increment(0)',Int); } /*alert ("PN: " + PlaceName[nextShiftI] + " Ei: " + Eigenschaft[nextShiftI] + " iW: " + incWidth[nextShiftI] + " St: " + StepWidth[nextShiftI] + " StW: " + StoppWidth[nextShiftI] + " iH: " + incHeight[nextShiftI] + " StH: " + StepHeight[nextShiftI] + " StH: " + StoppHeight[nextShiftI] + " inac: " + inac[nextShiftI] + " nextShiftI: " + nextShiftI );*/ nextShiftI = nextShiftI + 1 ; } } else {alert ('max RequestNo exceeded'); return false;} } case 'place': {} default: { alert ("shiftValue: kann " + PN + " und/oder " + Ei + " nicht finden !"); return false;} } } return true; } function increment(neShI) { /* alert ("inc - PN: " + PlaceName[neShI] + " Ei: " + Eigenschaft[neShI] + " iW: " + incWidth[neShI] + " St: " + StepWidth[neShI] + " StW: " + StoppWidth[neShI] + " iH: " + incHeight[neShI] + " StH: " + StepHeight[neShI] + " StH: " + StoppHeight[neShI] + " inac: " + inac[neShI] + " neShI: " + neShI );*/ if ( Eigenschaft[neShI] == 'size') { if (document.getElementById(PlaceName[neShI]).style.width){ document.getElementById(PlaceName[neShI]).style.width = incWidth[neShI] + 'px'; } if (document.getElementById(PlaceName[neShI]).style.height){document.getElementById(PlaceName[neShI]).style.height = incHeight[neShI] + 'px';} document.getElementById(PlaceName[neShI]).width = incWidth[neShI]; document.getElementById(PlaceName[neShI]).height = incHeight[neShI]; incWidth[neShI] = incWidth[neShI] + StepWidth[neShI]; incHeight[neShI] = incHeight[neShI] + StepHeight[neShI]; //alert ( "increment :PlaceName[neShI] " + PlaceName[neShI] + "Eigenschaft " + Eigenschaft[neShI] + " StepW: " + StepWidth[neShI] + " StoppWidth " + StoppWidth[neShI] ) if ((( StepWidth[neShI] >=0 )&& (incWidth[neShI] >= StoppWidth[neShI] )) || ( (StepWidth[neShI] <=0) && (incWidth[neShI] <= StoppWidth[neShI] )) && ( incI[neShI] )) { window.clearInterval(inac[neShI]); incI[neShI] = false; shift[neShI]=false; if ( Eigenschaft[neShI] == 'size') { if (( Stopp[neShI] == 1 ) && !(mustPngFix)) { document.getElementById(PlaceName[neShI]).removeAttribute('height'); document.getElementById(PlaceName[neShI]).removeAttribute('width'); if (document.getElementById(PlaceName[neShI]).style.height){document.getElementById(PlaceName[neShI]).style.height =''; } if (document.getElementById(PlaceName[neShI]).style.width){document.getElementById(PlaceName[neShI]).style.width='';} } else { document.getElementById(PlaceName[neShI]).width = StoppWidth[neShI]; document.getElementById(PlaceName[neShI]).height = StoppHeight[neShI]; document.getElementById(PlaceName[neShI]).style.width = StoppWidth[neShI] + 'px'; document.getElementById(PlaceName[neShI]).style.height = StoppHeight[neShI] + 'px' } } } } else { window.clearInterval(inac[neShI]); incI[neShI] = false; shift[neShI]=false;} } akt = window.setInterval("aktuell()",1000); // alle 1 sek Update des Bildes - falls auf aktuelle Uhrzeit steht // preload setzen ? //top.laden2.loadgrade = 16; if ( top.laden2.localsource == true ) { top.laden2.loadall = false; top.laden2.clearpreload = true; top.laden2.window.clearInterval(top.laden2.inm); // (mi-1) für aktuellen Typ, 5 für alle, pls siehe oben, Anfang script } else { if ( top.laden2.loadstate[main_Prod][top.laden2.Typ.length-1][Res] < 5 ) { top.laden2.loadall = true; top.laden2.clearpreload = false; top.laden2.inm = window.setInterval("top.laden2.prlopi(main_Prod,top.laden2.Typ.length-1,1,5)", top.laden2.pls * (top.laden2.Typ.length-1)); } else { if ( top.laden2.loadstate[main_Prod][mi-1][Res] < top.laden2.loadgrade ) { top.laden2.loadall = true; top.laden2.clearpreload = false; top.laden2.inm = window.setInterval("top.laden2.prlopi(main_Prod,mi-1,Res,top.laden2.loadgrade )", top.laden2.pls*(top.laden2.Typ.length-1)); } else { top.laden2.loadall = true; top.laden2.clearpreload = false; top.laden2.inm = window.setInterval("top.laden2.prlopi(main_Prod,top.laden2.Typ.length-1,Res,top.laden2.loadgrade )", top.laden2.pls*(top.laden2.Typ.length-1)* 10); } } } /*if ( top.laden2.localsource = true ) { top.laden2.loadall = true; top.laden2.clearpreload = false; top.laden2.inm = window.setInterval("top.laden2.prlopi(main_Prod,top.laden2.Typ.length-1,Res,16)", top.laden2.pls*(top.laden2.Typ.length-1)); // (mi-1) für aktuellen Typ, 5 für alle, pls siehe oben, Anfang script } else { top.laden2.loadall = false; top.laden2.clearpreload = true; top.laden2.window.clearInterval(top.laden2.inm);}; */ /*top.laden2.showapic("showimg",Prod-1,0,Res,top.laden2.laPiNr) top.laden2.showapic("showimg1",Prod-1,1,Res,top.laden2.laPiNr) top.laden2.showapic("showimg2",Prod-1,2,Res,top.laden2.laPiNr) top.laden2.showapic("showimg3",Prod-1,3,Res,top.laden2.laPiNr) top.laden2.showapic("showimg4",Prod-1,4,Res,top.laden2.laPiNr) */ function BilderStatus(){ b = new Image(); b.src = "logo.gif"; for(i = 0; i < document.images.length; i++){ if(document.images[i].complete == false) document.images[i].src = b.src; } } akt = window.setInterval("aktuell()",1000); // alle 30 sek Update des Bildes - falls auf Uhrzeit steht /* if ( !top.laden2.firstload) { mi = parent.laden2.laPiTy+1}; parent.laden2.loadgrade = 16; if ( parent.laden2.localsource == true ) { parent.laden2.loadall = false; parent.laden2.clearpreload = true; parent.laden2.window.clearInterval(parent.laden2.inm); // (mi-1) für aktuellen Typ, 5 für alle, pls siehe oben, Anfang script } else { if ( parent.laden2.loadstate[main_Prod][parent.laden2.Typ.length-1][Res] < 5 ) { parent.laden2.loadall = true; parent.laden2.clearpreload = false; parent.laden2.inm = window.setInterval("parent.laden2.prlopi(main_Prod,parent.laden2.Typ.length-1,1,5)", parent.laden2.pls * (parent.laden2.Typ.length-1)); parent.laden2.prlopi(main_Prod,parent.laden2.Typ.length-1,1,5) } else { if ( top.laden2.Typ.length <= 4 ) { if ( parent.laden2.loadstate[main_Prod][parent.laden2.Typ.length-1][Res] < 16) { parent.laden2.loadall = true; parent.laden2.clearpreload = false; parent.laden2.inm = window.setInterval("parent.laden2.prlopi(main_Prod,parent.laden2.Typ.length-1,Res,16)", parent.laden2.pls*(parent.laden2.Typ.length-1)*1); } } } } */ function furtherLoad () { //alert ('furtherload') if ( ! top.laden2.loadall) // loadall = false --> also lädt nicht mehr, vielleicht weiter laden ? { if ( !top.laden2.firstload) { mi = parent.laden2.laPiTy+1} if ((mustPngFix) || !(top.laden2.highPerform)){ parent.laden2.loadgrade = 5} else{ parent.laden2.loadgrade = 16}; if ( parent.laden2.localsource == true ) { parent.laden2.loadall = false; parent.laden2.clearpreload = true; parent.laden2.window.clearInterval(parent.laden2.inm); // (mi-1) für aktuellen Typ, 5 für alle, pls siehe oben, Anfang script } else { if ( parent.laden2.loadstate[main_Prod][parent.laden2.Typ.length-1][Res] < parent.laden2.loadgrade ) { parent.laden2.loadall = true; parent.laden2.clearpreload = false; parent.laden2.inm = window.setInterval("parent.laden2.prlopi(main_Prod,parent.laden2.Typ.length-1,1,parent.laden2.loadgrade)", parent.laden2.pls * (parent.laden2.Typ.length-1)); } /*else { if ( parent.laden2.loadstate[main_Prod][mi-1][Res] < parent.laden2.loadgrade ) { parent.laden2.loadall = true; parent.laden2.clearpreload = false; parent.laden2.inm = window.setInterval("parent.laden2.prlopi(main_Prod,mi-1,Res,parent.laden2.loadgrade)", parent.laden2.pls ); } else { /*parent.laden2.loadall = true; parent.laden2.clearpreload = false; parent.laden2.inm = window.setInterval("parent.laden2.prlopi(main_Prod,parent.laden2.Typ.length-1,Res,16)", parent.laden2.pls*(parent.laden2.Typ.length-1)* 4);*/ /* } }*/ } } } // furtherLoad (); function NachOben () { var y = 0; if (window.pageYOffset) { y = window.pageYOffset; } else if (document.body && document.body.scrollTop) { y = document.body.scrollTop; } if (y > 0) { window.scrollBy(0, -10) setTimeout("NachOben()", 5); } } rectTop = 0; rectRight = 1380; rectLeft = 30; rectBottom = 500; function scrollLeft() {} var blendeLauft = false; var timeStep = 100; var blendeClose = true; var firstToggle = true; var shouldtToggle = false; var blendeI = 0; var selfMenue = false; function blende(zu,toggle,time) { if ( ! blendeLauft ) { if (document.getElementById('blendeId')) {document.getElementById('blendeId').style.visibility='visible'; } if ( time ) { timeStep = time } else { timeStep = 100;} if ( zu == 'zu') { blendeClose = true; blendeI = 0 } else { if (zu == 'auf' ) { blendeClose = false; blendeI = 10;} else { blendeLauft = false; return; true;} } } if ( toggle ) { shouldtToggle = toggle } else { shouldtToggle = false;} vorIn = window.setInterval('ablaufblende()',timeStep); blendeLauft = true; // blende läuft noch } function ablaufblende () { if ((blendeI < 11) && (blendeI >= 0)) { showPngLocal('blendeId',('../images/g' + blendeI + '.png')); //document.getElementById('blendeId').src='../images/g' + blendeI + '.png' if (blendeClose) {blendeI = blendeI + 1; //top.document.getElementById(ID-des-frames).cols= "154,*"; if ((blendeI == 11)&&(shouldtToggle )) {shouldtToggle = false; blendeI = 10; blendeClose = false;} } else {blendeI = blendeI - 1 if ( (blendeI == -1)&&(shouldtToggle)) {shouldtToggle = false; blendeI = 0; blendeClose = true;} } } else { if (blendeI <= 10) {document.getElementById('blendeId').style.visibility='hidden'; } if (( mustPngFix ) && (blendeI == 11 )) {document.getElementById('blendeId').src ='../images/black.jpg'; document.getElementById('blendeId').visibility='hidden'; } blendeI = 0; window.clearInterval(vorIn); blendeLauft = false; return true; //alert (document.getElementById('blendeId').style.visibility); } return true;} top.document.title = document.title; setTimeout ('setCanvas ()',300); //setCanvas ();