function Frame(){
}

function Frame_openItem ( obj ) {
try {
		this.ie = navigator.appName.indexOf("Microsoft") != -1;


		var par = document.getElementById("framediv");
		if (obj.className.indexOf("gallery") != -1) { // wenn Galerie
		// ----------    Produktfenster erzeugen    ------------
			var fr = this.openFrame();
			fr.className="product_window";
			if (this.ie) fr.firstChild.firstChild.className ="winbody";
			var product = this.createProduct( obj );
			fr.appendChild(product);

			// ---------- Schliessbutton erzeugen -----------
			var cl = this.openFrame();
			cl.className="close_btn";
			if (this.ie) cl.firstChild.firstChild.className ="closebody";
			var xdiv = document.createElement("div");
			xdiv.className="close_div";

					// -- Mouse-Events fuer alle Browser ausser IE
			xdiv.setAttribute("onmouseover", "this.className='close_div_over';");
			xdiv.setAttribute("onmouseout","this.className='close_div';");
			xdiv.setAttribute("onclick","main.closeItem();");

					// -- Events fuer Internet Explorer -> alte Syntax
			var body = document.getElementsByTagName('body')[0];
			if (navigator.appName.indexOf("Microsoft") != -1) {
			 if (body.attachEvent) {
				body.attachEvent('onmouseover', top.mover = function (event) {
				if (event.srcElement.className =="close_div") event.srcElement.className="close_div_over";
				}  );
				body.attachEvent('onmouseout', top.mout = function (event) {
					if (event.srcElement.className =="close_div_over") event.srcElement.className="close_div";
					 }  );
				body.attachEvent('onclick', top.clk = function (event) {
					if (event.srcElement.className =="close_div_over") main.closeItem();
					 }  );
				}
			}

			var tx = document.createTextNode ("X");
			xdiv.appendChild( tx );
			cl.appendChild (xdiv);
			// ----------- Bestellfenster erzeugen -------------

			var or = this.openFrame();
			or.className="order_window";
			if (this.ie) or.firstChild.firstChild.className ="orderbody";

			var odiv = this.createOrderWin ( obj );
			or.appendChild (odiv);

			// ------- Elemente in richtiger Reihenfolge hinzufuegen (Achtung: z-Positionierung!) --------

			par.appendChild ( fr );
			par.appendChild ( cl );
			par.appendChild ( or );
		}
		par.className="framediv_visible";

	} catch (e) {
		alert("Fehler!\n" + e);
	}

}

function Frame_create ( name ) {
	return document.createElement(name);
}

function Frame_closeItem(  ) {
	var par = document.getElementById("framediv");
	var l = par.childNodes.length;
	for (var i = l; i > 0; i--) {
		par.removeChild( par.childNodes[i-1]);
	}
	par.className="framediv";
}

function Frame_openFrame( name ) {
	var div = this.create("div");
	var table = this.create("table");
	table.className = "frametable";
	table.cellPadding = 0;
	table.cellSpacing = 0;
	var tbody = this.create("tbody");
	// obere Zeile
	var tr1 = this.createRow("top");
	// mittlere Zeile
	var tr2 = this.createRow("mid");
	var tr3 = this.createRow("bottom");
	tbody.appendChild(tr1);
	tbody.appendChild(tr2);
	tbody.appendChild(tr3);
	table.appendChild(tbody);
	div.appendChild(table);

	return div;
}

function Frame_createRow ( name ) {
	var app = this.ie ? "ie_": "";
	var tr = this.create("tr");
	tr.className = app+"frame_row_"+name;
	var td = this.createCell(app+"frame_"+name+"_left");
	var td2 = this.createCell(app+"frame_"+name+"_mid");
	var td3 = this.createCell(app+"frame_"+name+"_right");
	tr.appendChild(td);
	tr.appendChild(td2);
	tr.appendChild(td3);
	return tr;
}

function Frame_createCell ( name ) {
	var td = this.create("td");
	var img = this.createSpacer();
	td.appendChild(img);
	td.className=name;
	return td;
}

function Frame_getProductInfo( obj ) {
	var nodes = obj.getElementsByTagName("div");
	var arr = new Object();
	arr.thumbs = new Array();
	arr.url ="";
	for (var i = 0; i < nodes.length; i++) {
		if (nodes[i].className=="product_info") {
			arr.text = nodes[i].cloneNode(true);
		}
		else if (nodes[i].className=="product_pic") {
		    bname = nodes[i].firstChild.nodeValue.substring(nodes[i].firstChild.nodeValue.lastIndexOf('\/')+1)
			if (arr.url=="") arr.url = "images/product_images/info_images/"+bname ;
		}
     }
	return arr;
}

function Frame_setStyle (sel, nam, val) {
	try {
		var rls = document.styleSheets[4].rules;
		for (var i = 0; i < rls.length; i++) {
			if (rls[i].selectorText == sel) {
				var tx = rls[i].style.cssText;
				var ind = tx.indexOf (nam.toUpperCase());
				if ( ind != -1) {
					var begin = tx.substring (0, ind);
					var rest = tx.substring (ind);
					var ind2 = rest.indexOf(';');
					var end = "";
					if (ind2 < rest.length-1) end = rest.substring (ind2+1);
					tx = begin + "" +end;
				}
				tx += "; " + nam.toUpperCase() + ": " + val;
				rls[i].style.cssText = tx;
			}
		}

	} catch (e) {
		alert ("no rules") + e.message;
	}
}

function Frame_createProduct ( obj ) {

	var vals = this.getProductInfo ( obj );
	var div = this.create("div");
	div.className="frame_product";
	// Erzeuge Produkt-Bild
	var divPic = this.create("div");
	divPic.className="frame_product_pic";
	if (!this.ie) {
		divPic.setAttribute("style", "background: url("+vals.url+") no-repeat;");
	} else this.setStyle('.frame_product_pic','background', 'url(./'+vals.url+') no-repeat;');
	var divThumbs = this.createThumbs( vals.thumbs );
	// Erzeuge Produkt-Text
	var divText = vals.text;
	divText.className="frame_product_text";
	div.appendChild(divPic);
	div.appendChild(divText);
	div.appendChild(divThumbs);
	return div;
}

function Frame_createThumbs ( thumbs ) {
	var div = this.create("div");
	div.className="frame_product_thumbs";
	var table = this.create ("table");
	var tbody = this.create("tbody");
	var tr = this.create ("tr");
	for (var i = 0; i < thumbs.length; i++) {
		var tdPic = this.create ("td");
		tdPic.className="frame_product_thumb";
		var tdSpc = this.createSpacer();
		tdPic.id ="frame_product_thumb"+(i+1);
		tdPic.setAttribute("url", thumbs[i]);
		if (!this.ie) {
			tdPic.setAttribute("style", "background: url("+thumbs[i]+") no-repeat;");
		} else {
			this.setStyle('#frame_product_thumb'+(i+1),'background', 'url(./'+thumbs[i]+') no-repeat;');
		}

				// -- Mouse-Events fuer alle Browser ausser IE
    	tdPic.setAttribute("onclick", "main.openThumb('"+tdPic.id+"');");
		tdPic.setAttribute("onmouseover", "this.className='frame_product_thumb_over';");
		tdPic.setAttribute("onmouseout","this.className='frame_product_thumb';");

				// -- Events fuer Internet Explorer -> alte Syntax
    	var body = document.getElementsByTagName('body')[0];
   		if (navigator.appName.indexOf("Microsoft") != -1) {
		 if (body.attachEvent) {
			if (!top.clk)
			body.attachEvent('onmouseover', top.mover = function (event) {
			if (event.srcElement.className =="frame_product_thumb") event.srcElement.className="frame_product_thumb_over";
			}  );
			body.attachEvent('onmouseout', top.mout = function (event) {
				if (event.srcElement.className =="frame_product_thumb_over") event.srcElement.className="frame_product_thumb";
				 }  );
			body.attachEvent ('onclick', top.clk = function (event) {
				if (event.srcElement.className =="frame_product_thumb_over") main.openThumb(event.srcElement.id);
				 } );
    		}
    	}


		tdPic.appendChild(tdSpc);
		tr.appendChild (tdPic);
	}
	tbody.appendChild(tr);
	table.appendChild(tbody);
	div.appendChild(table);

	return div;
}

function Frame_openThumb (id) {
	var thumb = document.getElementById (id);
	var url = thumb.getAttribute ("url");
	var ind = url.lastIndexOf ("/");
	var nam = url.substr(ind);
	var divPic = document.getElementById ("frame_product_pic");
	if (!this.ie) {
		divPic.setAttribute("style", "background: url(images/gallery"+nam+") no-repeat;");
	} else this.setStyle('.frame_product_pic','background', 'url(./images/gallery'+nam+') no-repeat;');

}


function Frame_createSpacer () {
	var img = this.create("img");
	img.setAttribute ("src", "templates/ontopica/images/spacer.gif");
	img.setAttribute ("height", "1");
	img.setAttribute ("width", "1");
	img.setAttribute ("alt", "");
	return img;
}

function Frame_getOrderInfo( obj ) {
	var nodes = obj.getElementsByTagName("div");
	var arr = new Object();
	for (var i = 0; i < nodes.length; i++) {
	    if (nodes[i].className=="order_color") {
			arr.color = nodes[i].firstChild.cloneNode(true);
		}
		else if (nodes[i].className=="order_sizes") {
			arr.sizes = nodes[i].childNodes;
		}
	}
	return arr;
}

function Frame_createOrderWin ( obj ) {
	var vals = this.getOrderInfo (obj);
	var odiv = this.create("div");
	odiv.className="order_div";
	var ofrm = this.create("form");
	ofrm.setAttribute("action", "javascript:warenkorb.add(this);");

	var otx = document.createTextNode ("Bestellen:");
	ofrm.appendChild( otx );

	ofrm.appendChild( this.create ("br") );
	ofrm.appendChild( this.create ("br") );

	var oselect1 = this.create ("select");

	for (var i = 1; i <= 20; i++) {
		var opt = this.create ("option");
		var opttx = document.createTextNode(i);
		opt.appendChild(opttx);
		oselect1.appendChild(opt);
	}
	oselect1.value = "1";
	oselect1.className="order_select";
	ofrm.appendChild (oselect1);

	var otx2 = document.createTextNode (" Stück in ");
	ofrm.appendChild( otx2 );
	ofrm.appendChild( vals.color );
	var otx3 = document.createTextNode (", Größe: ");
	ofrm.appendChild( otx3 );

	var oselect2 = this.create ("select");
	for (var i = 0; i < vals.sizes.length; i++) {
		if (vals.sizes[i].nodeType==3) {
			var opt = this.create ("option");
			var opttx = document.createTextNode(vals.sizes[i].nodeValue);
			opt.appendChild(opttx);
		 	oselect2.appendChild(opt);
		}
	}
	oselect2.className="order_select";
	ofrm.appendChild (oselect2);
	var otx3 = document.createTextNode ("  ");
	ofrm.appendChild( otx3 );

	var obtn = this.create("input");
	obtn.setAttribute("type", "submit");
	obtn.value = "In den Warenkorb";
	obtn.width = 110;
	ofrm.appendChild (obtn);
	odiv.appendChild(ofrm);

	return odiv;
}

// ------------- Frame-Klasse registrieren und verfuegbar machen

new Frame();
Frame.prototype.openItem = Frame_openItem;
Frame.prototype.openFrame = Frame_openFrame;
Frame.prototype.createRow = Frame_createRow;
Frame.prototype.createCell = Frame_createCell;
Frame.prototype.closeItem = Frame_closeItem;
Frame.prototype.createProduct = Frame_createProduct;
Frame.prototype.getProductInfo = Frame_getProductInfo;
Frame.prototype.createThumbs = Frame_createThumbs;
Frame.prototype.openThumb = Frame_openThumb;
Frame.prototype.createOrderWin = Frame_createOrderWin;
Frame.prototype.getOrderInfo = Frame_getOrderInfo;
Frame.prototype.create = Frame_create;
Frame.prototype.createSpacer = Frame_createSpacer;
Frame.prototype.setStyle = Frame_setStyle;