// Version 1.2
// Haupt-Programmierer: Thomas Eigner (webmaster@flyingfinger.de)



// Durchgeführte Änderungen: 

// 28.01.2010 > Durchgeführt von Michael Rohde (Einser-Stellen von 1.Zeile in 10.Zeile verschoben)



// Abakus Klasse definieren
var Abakus = {

	// Konfiguration

	// Gesamtbreite die verfügbar ist, zum zentrieren benutzt
	breitegesamt: 485,
	
	// Font-Family
	fontfamily: 'Verdana,sans-erife',
	
	// Font-Family
	fontsize: 19,

	// Bildgröße des Holzrahmens 200x311 Pixel
	groesseHolzrahmen: new Array(200, 311),

	// Bild-Datei des Holzrahmens
	holzrahmen: '/sprache/rubrik/scripte/abakus-rechenschieber/abakus.gif',

	// Bildgröße der Kugeln 13x18 Pixel
	groesseKugel: new Array(13, 18),

	// Bild-Datei der gelben Kugel
	kugelGelb: '/sprache/rubrik/scripte/abakus-rechenschieber/kugel_gelb.gif',

	// Bild-Datei der orangenen Kugel
	kugelOrange: '/sprache/rubrik/scripte/abakus-rechenschieber/kugel_orange.gif',

	// Y-Positionen der Reihen 1-10 relativ zur linken oberen Ecke des Holzrahmens
	reihen: new Array(21,49,78,106,135,163,192,220,248,276),

	// X-Positionen der Spalen 2-20 relativ zur linken oberen Ecke des Holzrahmens
	spalten: new Array(15,28,41,54,67,80,93,106,119,132),

	// Um wie viele Pixel die Kugeln verschoben werden beim Klicken
	versatzRechts: 40,

	// Konstruktor der Klasse
	// @param domid Id des HTML Elementes in das der Abakus-Rechner eingefügt werden soll
	initialize: function (domid) {
		this.domid = domid;
		
		// das Erstellen des Rechners wird erst dann veranlasst,
		// wenn die HTML-Seite fertig geladen ist, da momentan
		// das HTML-Element 'domid' evtl. noch nicht existiert.
		$(window).bind("load", {rechner: this}, this.setupHtml);
		


		
	},

	// Erzeugt den HTML-Code des Rechners im HTML-Element 'domid'
	setupHtml: function (event) {
		var r = event.data.rechner;
		// Element laden
		r.htmlobj = $(r.domid);

		// Fehlermeldung, dass JavaScript benötig wird aus dem Div löschen
		r.htmlobj.html('');

		// CSS-Style zuweisen (mit Holzrahmen als Hintergrund)
		var border = Math.round((r.breitegesamt-r.groesseHolzrahmen[0])/2);
		r.htmlobj.css({
			width: r.groesseHolzrahmen[0],
			height: r.groesseHolzrahmen[1] + 10,
			background: 'url('+r.holzrahmen+') no-repeat',
			padding: 0,
			margin: 0,
			marginLeft: border+'px',
			position: 'relative'
		});

		// 10x10 Kugeln ertellen im HTML einfügen und in Array ablegen
		r.kugeln = new Array(10);
		r.numbers = new Array(10);
		r.wholenumber = document.createElement("div");
		$(r.wholenumber).css({
			position: 'absolute',
			left: 0,
			width: r.groesseHolzrahmen[0],
			top: 310,
			textAlign: 'center',
			fontFamily: r.fontfamily,
			fontSize: r.fontsize
		});
		$(r.wholenumber).html('0');
		$(r.htmlobj).append(r.wholenumber);
		for (i=0; i < 10; i++) {
			r.kugeln[i] = new Array(10);
			r.numbers[i] = document.createElement("div");
			$(r.numbers[i]).css({
					position: 'absolute',
					left: 220,
					top: r.reihen[i],
					fontFamily: r.fontfamily,
					fontSize: r.fontsize
			});
			$(r.numbers[i]).html('0');
			$(r.htmlobj).append(r.numbers[i]);
			for (j=0; j < 10; j++) {

				// Gelbe oder organgene Kugel?
				color = ( (j < 5 && i < 5) || (j >= 5 && i >= 5))? r.kugelGelb : r.kugelOrange;

				// Div für Kugel erstellen und CSS zuweisen (KugelBild als Background) und in Array speichern
				r.kugeln[i][j] = document.createElement("div");
				$(r.kugeln[i][j]).css({
					width: r.groesseKugel[0],
					height: r.groesseKugel[1],
					background: 'transparent url('+color+') no-repeat',
					position: 'absolute',
					cssFloat: 'left',
					left: r.spalten[j],
					top: r.reihen[i],
					cursor: 'pointer'
				});

				// Kugel-Div in HTML des Holzrahmens anhängen
				$(r.htmlobj).append(r.kugeln[i][j]);

				// Klick-Event an Kugel erstellen
				$(r.kugeln[i][j]).bind('click', {r: r, i: i, j: j}, r.clickKugel);

				// Momentan ist die Kugeln links
				r.kugeln[i][j].kugelPos = 'links';
			}
		}
	},

	// Es wurde auf die Kugel y,x geklickt
	clickKugel: function(event) {
		var r = event.data.r;
		var y = event.data.i;
		var x = event.data.j;

		// Die Kugel ist momentan link, dann...
		if (r.kugeln[y][x].kugelPos == 'links') {
			
			// Alles Kugeln recht von der geklickten Kugel und sie selbst...
			for (i=x; i<10; i++) {
				
				// Wenn die Kugel links ist...  (ein Teil der Kugeln könnte schon rechts sein)
				if (r.kugeln[y][i].kugelPos == 'links') {

					// Wende Verschiebungs-Effekt auf sie an
					$(r.kugeln[y][i]).animate({
							// Hozizontal um den Versatz nach rechts verschieben
							left: "+="+r.versatzRechts+"px"
						}, 
						300, 
						'swing', 
						function () {
							this.kugelPos = 'rechts';
						}

					);	
						
					// Jetzt ist die Kugel nicht mehr links
					r.kugeln[y][i].kugelPos = '';
				}
			}
			r.calcNumbers(true);

		// Kugel ist momentan nicht links, sondern rechts, dann...
		} else if (r.kugeln[y][x].kugelPos == 'rechts') {

			// Alle Kugeln links von der geklickten Kugel und sie selbst...
			for (i=0; i<=x; i++) {

				// Wenn die Kugel rechts ist... (Ein Teil der Kugeln könnte schon links sein)
				if (r.kugeln[y][i].kugelPos == 'rechts') {

					// Wende Verschiebungs-Effekt auf sie an
					$(r.kugeln[y][i]).animate({
							// Hozizontal um den Versatz nach rechts verschieben
							left: "-="+r.versatzRechts+"px"
						}, 
						300, 
						'swing', 
						function () {
							this.kugelPos = 'links';
						}

					);	
				
					// Jetzt ist die Kugel nicht mehr rechts
					r.kugeln[y][i].kugelPos = '';
				}
			}
			r.calcNumbers(false);
		}
	},

	// Zahlen berechnen
	calcNumbers: function(toRight) {
		var val = 0;
		
		// Zeilen updaten
		for (row=0; row<10; row++) {
			var num = 0;
			for(i=0; i<10; i++) {
				if (toRight) {
					if (this.kugeln[row][i].kugelPos != 'links') num++;
				} else {
					if (this.kugeln[row][i].kugelPos == 'rechts') num++;
				}
			}
			

                        // auf Gesamtzahl addieren

                        // Alte Variante mit 1 oben 1 000 000 000 unten
                        // val += Math.pow(10, row) * num;

                        // Neue Variante mit 1 unten 1 000 000 000 oben
                           val += Math.pow(10, 9-row) * num;
			
			$(this.numbers[row]).html(num);
		}
		
		//Gesamtzahl formatieren und anzeigen
		var val1 = '';
		val = ''+ val;
		var c = 0;
		while (val != '') {
			c++;
			val1 = val.substr(val.length - 1, 1) + val1;
			if (Math.round(c/3)*3 == c) val1 = ' ' + val1;
			val = val.substr(0,val.length-1);
		}
		$(this.wholenumber).html(val1);
	},
	
	// Resettet den ganzen Abakus-Rechner
	reset: function() {

		// Alle 10x10 Kugeln
		for(i1=0; i1<10; i1++) {
			for(j=0; j<10; j++) {
				
				// Wenn die Kugel rechts ist...
				if (this.kugeln[i1][j].kugelPos == 'rechts') {

					// Wende Verschiebungs-Effekt auf sie an
					$(this.kugeln[i1][j]).animate({
							// Hozizontal um den Versatz nach rechts verschieben
							left: "-="+this.versatzRechts+"px"
						}, 
						300, 
						'swing', 
						function () {
							this.kugelPos = 'links';
						}

					);	
				
					// Jetzt ist die Kugel nicht mehr rechts
					this.kugeln[i1][j].kugelPos = '';
				}
			}
			this.calcNumbers(false);
		}
	}
};