function ImageExpander(oThumb, sImgSrc,popisek)
{
	// store thumbnail image and overwrite its onclick handler.
    this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	this.bExpand = true;
	this.bTicks = false;
	
	// self organized list
	if ( !window.aImageExpanders )
	{
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oPopisek = popisek;
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
	
}



ImageExpander.prototype.onload = function() {
    this.oDiv = document.createElement("div");
    this.oDiv.setAttribute("class", "hopokno");
    this.oDiv.setAttribute("className", "hopokno"); //kvuli exploreru
    document.body.appendChild(this.oDiv);
    this.oDiv.appendChild(this.oImg);
    this.oDiv.appendChild(document.createElement('br'));
    popisek = document.createTextNode(this.oPopisek);
    this.oDiv.appendChild(popisek);
    this.oDiv.style.position = "absolute";
    this.oDiv.expander = this;
    this.oDiv.onclick = function() { this.expander.toggle(); };
    this.oImg.title = "Click to reduce.";
    this.bigWidth = this.oImg.width;
    this.bigHeight = this.oImg.height;
    if (this.bExpand) {
        this.expand();
    }
    else {
        this.oDiv.style.visibility = "hidden";
        this.oImg.style.visibility = "hidden";
    }
}


ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}



ImageExpander.prototype.expand = function() {
    // set direction of expansion.
    this.bExpand = true;

    // set all other images to reduce
    for (var i in window.aImageExpanders)
        if (window.aImageExpanders[i] !== this)
        window.aImageExpanders[i].reduce();

    // if not loaded, don't continue just yet
    if (!this.oDiv) return;

    // hide the thumbnail
    //this.oThumb.style.visibility = "hidden";

    // calculate initial dimensions
    arr = findPos(this.oThumb);
    this.x = arr[0];
    this.y = arr[1];
    this.w = this.oThumb.clientWidth;
    this.h = this.oThumb.clientHeight;

    this.oDiv.style.left = this.x + "px";
    this.oDiv.style.top = this.y + "px";
    this.oImg.style.width = this.w + "px";
    this.oImg.style.height = this.h + "px";
    this.oDiv.style.visibility = "visible";
    this.oImg.style.visibility = "visible";

    // start the animation engine.
    if (!this.bTicks) {
        this.bTicks = true;
        var pThis = this;
        window.setTimeout(function() { pThis.tick(); }, 25);
    }
    this.oDiv.style.width = this.oImg.style.width;
}


ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}


ImageExpander.prototype.tick = function() {
    // calculate screen dimensions
    var cw = f_clientWidth();
    var ch = f_clientHeight()-50;
    var cx = f_scrollLeft() + cw / 2; //document.body.scrollLeft + cw / 2;
    var cy = f_scrollTop()+10 + ch / 2; //document.body.scrollTop + ch / 2;

    // calculate target
    var tw, th, tx, ty;
    if (this.bExpand) {
        tw = this.bigWidth;
        th = this.bigHeight;
        if (tw > cw) {
            th *= cw / tw;
            tw = cw;
        }
        if (th > ch) {
            tw *= ch / th;
            th = ch;
        }
        tx = cx - tw / 2;
        ty = cy - th / 2;
    }
    else {
        tw = this.smallWidth;
        th = this.smallHeight;
        arr = findPos(this.oThumb)
        tx = arr[0]
        ty = arr[1]
        //tx = this.oThumb.offsetLeft;
        //ty = this.oThumb.offsetTop;
    }
    // move 5% closer to target
    var nHit = 0;
    var fMove = function(n, tn) {
        var dn = tn - n;
        if (Math.abs(dn) < 3) {
            nHit++;
            return tn;
        }
        else {
            return n + dn / 5;
        }
    }
    this.x = fMove(this.x, tx);
    this.y = fMove(this.y, ty);
    this.w = fMove(this.w, tw);
    this.h = fMove(this.h, th);

    this.oDiv.style.left = this.x + "px";
    this.oDiv.style.top = this.y + "px";
    this.oImg.style.width = this.w + "px";
    this.oImg.style.height = this.h + "px";

    // if reducing and size/position is a match, stop the tick	
    if (!this.bExpand && (nHit == 4)) {
        this.oImg.style.visibility = "hidden";
        this.oDiv.style.visibility = "hidden";
        this.oThumb.style.visibility = "visible";

        this.bTicks = false;
    }

    if (this.bTicks) {
        var pThis = this;
        window.setTimeout(function() { pThis.tick(); }, 25);
    }
    this.oDiv.style.width = this.oImg.style.width;
}

function findPos(obj) {
    var curleft = curtop = 0;	
	if (obj.offsetParent) {
	    do {
	        curleft += obj.offsetLeft;
	        curtop += obj.offsetTop;
	    } while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

function f_clientWidth() {
    return f_filterResults(
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
    return f_filterResults(
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
    return f_filterResults(
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
    return f_filterResults(
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}