// mind note: the strange $(xyz) code is jQuery-lingo: http://jquery.com

$('document').ready (function () {

	// this replaces the standard-submit-button of the #searchform
	// if javascript is diabled it stays invisible according to structure.css
	$('#pseudosubmit').css('display', 'block');
	$('#pseudosubmit').click(function () {
		$('#searchform').submit();
	});


	// attach an action "hoverimage" to all images inside a .post
	// that action will provide a full scale image when hovering a 'preview'
	// (that has been downscaled by wordpress)
	// inspired by imageafter.com
	$('.post img[id]').hover(hoverimg_start, hoverimg_end);

	// add a debugger div
	$('body').append('<div id="debugger" style="position:absolute;top:0px;">a<br />b<br />c');

});




// this function will provide a larger image when hovering a preview

// two problems:
// 1.
// when the new div appears (under the mouse) javascript thinks it
// has an onmouseout for the small-image > flicker-situation
// this can be prevented via css:hover, but then the image must be appended
// to a common parent (most probably an <a> or <p>)
// but with css the width is max the width of the .narrowcolumn (currently 420px)
// maybe this could be fiddeld with more javascript? I don't know...
// 2.
// how can I prevent the image to run into the margins of the window?

function hoverimg_start (e) {
	// get mouse-coords
	// MS Syntax
	/* in need of elaboration...
	if (document.all) {
		var xmouse = window.event.x;
		var ymouse = window.event.y;
	}
	*/
	// Mozilla Syntax
	if (document.getElementById) {
		var xmouse = e.layerX;
		var ymouse = e.layerY;
	}
	$('#debugger').children().text('a');

	// get containing .entry-div
	entryNode = this.parentNode;
	/*while (entryNode.className.toLowerCase() != "entry") {
		entryNode = entryNode.parentNode;
	}*/

	// prepare new src of img_large
	// which means to cut the "_s" out of the old filename
	large_src = this.src.substr(0,this.src.indexOf(".")-2);
	large_src += this.src.substr(this.src.indexOf("."));

	// build a new div for the large image
	// overrides an existing one, which is good
	img_container = document.createElement("div");
	img_container.setAttribute("id", "img_container");
	img_large = document.createElement("img");
	img_large.setAttribute("src", large_src);
	img_container.appendChild(img_large);
	//document.body.appendChild(img_container);

}

function hoverimg_end () {
	document.body.removeChild(document.getElementById("img_container"));
	//alert(entry.className);
}

//for getComputedStyle etc. thanks to
//http://www.quirksmode.org/dom/getstyles.html
function getStyle (ziel, eigenschaft) {
	var styleprop = document.defaultView.getComputedStyle(ziel, null).getPropertyValue(eigenschaft);
	return styleprop;
}