/** LiView **/
function LiView()
{
    /** init elements **/
    this.dispImage = document.createElement( "IMG" );
    this.dispImage.style.position = "absolute";
    this.dispImage.style.display = "none";
    this.dispImage.style.top = "0px";
    this.dispImage.style.left = "0px";
    this.dispImage.style.zIndex = 99;
    this.dispImage.style.cursor = "pointer";
    document.body.appendChild( this.dispImage );

    this.backPlan = document.createElement( "DIV" );
    this.backPlan.style.position = "absolute";
    this.backPlan.style.display = "none";
    this.backPlan.style.top = "0px";
    this.backPlan.style.left = "0px";
    this.backPlan.style.background = "#cccccc url(/layout/wait.gif) no-repeat center";
    this.backPlan.style.zIndex = "98";
    this.backPlan.style.opacity = 0.6;
    this.backPlan.style.filter = "alpha(opacity=60)";
    if( this.backPlan.style.setAttribute )
	this.backPlan.style.setAttribute( "-moz-opacity", "0.6" );
    document.body.appendChild( this.backPlan );

    this.forthPlan = document.createElement( "DIV" );
    this.forthPlan.style.position = "absolute";
    this.forthPlan.style.display = "none";
    this.forthPlan.style.top = "0px";
    this.forthPlan.style.left = "0px";
    this.forthPlan.style.zIndex = "101";
    this.forthPlan.style.background = "";
    this.forthPlan.style.cursor = "pointer";
    document.body.appendChild( this.forthPlan );

    setEventHandler( this.forthPlan, "click", function() { liv.dropImage(); } );
    setEventHandler( this.dispImage, "click", function() { liv.dropImage(); } );

    this.intChecker = null;
}

LiView.prototype.init = function(elCont)
{
    if( !elCont ) return;
    var afei = elCont.getElementsByTagName( "IMG" );

    if( afei.length <= 0 ) return; // nada

    for( var j = 0; j < afei.length; j ++ ) {
	var ai = afei[j];
	if( (ai.width <= 30) || (ai.height <= 30) ) continue;
	setEventHandler( ai, "click", function(e) { if( e.currentTarget !== undefined ) liv.onClick(e.currentTarget); else if ( window.event !== undefined ) liv.onClick( window.event.srcElement ); } );
	ai.style.cursor = "pointer";
    }
}

LiView.prototype.onClick = function(el)
{
    var originalSrc = el.src;
    var ext = originalSrc.substring( originalSrc.length - 3 );
    var dirend = originalSrc.lastIndexOf( "/" );
    var fullSrc = originalSrc.substr( 0, dirend ) + "/_full." + ext;

    this.popImage( fullSrc );
}

LiView.prototype.isReady = function()
{
    if (!this.dispImage.complete) {
        return false;
    }

    if( this.dispImage.loaded !== undefined ) {
	if( img.loaded != true ) {
	    return false;
	}
    }

    if (typeof this.dispImage.naturalWidth != "undefined" && this.dispImage.naturalWidth == 0) {
        return false;
    }

    return true;
}

LiView.prototype.fitImage = function(w, h, iw, ih)
{
    var asr = iw / ih;
    var nw = iw;
    var nh = ih;

    while( (nw > w) || (nh > h) ) {
	nw -= (nw * 0,05);
	nh = nw / asr;
    }

    return {
	width : nw,
	height : nh
    };
}

LiView.prototype.shutBack = function(mtx)
{
    if( document.documentElement !== undefined ) {
        document.documentElement.style.overflow = "hidden";
        document.body.style.overflow = "hidden";
    } else {
        document.body.style.overflow = "hidden";
    }

    this.backPlan.style.left = mtx.offX + "px";
    this.backPlan.style.top = mtx.offY + "px";
    this.backPlan.style.width = mtx.width + "px";
    this.backPlan.style.height = mtx.height + "px";
    this.backPlan.style.display = "block";
    this.forthPlan.style.left = mtx.offX + "px";
    this.forthPlan.style.top = mtx.offY + "px";
    this.forthPlan.style.width = mtx.width + "px";
    this.forthPlan.style.height = mtx.height + "px";
    this.forthPlan.style.display = "block";
}

LiView.prototype.unshutBack = function()
{
    this.backPlan.style.display = "none";
    this.forthPlan.style.display = "none";

    if( document.documentElement !== undefined ) {
        document.documentElement.style.overflow = "";
        document.body.style.overflow = "";
    } else {
        document.body.style.overflow = "";
    }
}

LiView.prototype.followImage = function()
{
    if( this.isReady() ) {
	window.clearInterval( this.intChecker );
	this.intChecker = null;

	var mtx = this.getDocMetrics();
	this.dispImage.style.display = "block";
	
	// fit into the viewport
	var imx = this.fitImage( mtx.width - 40, mtx.height - 70, this.dispImage.width, this.dispImage.height );

	this.dispImage.width = imx.width;
	this.dispImage.height = imx.height;

	// position
	var x = mtx.offX + ((mtx.width - imx.width)/2);
	var y = mtx.offY + ((mtx.height - imx.height)/2);
	this.dispImage.style.left = x + "px";
	this.dispImage.style.top = y + "px";
    }
}

LiView.prototype.popImage = function(imgUrl)
{
    var mtx = this.getDocMetrics();
    this.shutBack( mtx );

    this.dispImage.src = imgUrl;
    this.intChecker = window.setInterval( function() { liv.followImage(); }, 100 );
}

LiView.prototype.dropImage = function()
{
    document.body.removeChild( this.dispImage );
    this.dispImage = null;

    this.dispImage = document.createElement( "IMG" );
    this.dispImage.style.position = "absolute";
    this.dispImage.style.display = "none";
    this.dispImage.style.top = "0px";
    this.dispImage.style.left = "0px";
    this.dispImage.style.zIndex = 99;
    this.dispImage.style.cursor = "pointer";
    document.body.appendChild( this.dispImage );

    setEventHandler( this.dispImage, "click", function() { liv.dropImage(); } );

    this.unshutBack();
}

LiView.prototype.getDocMetrics = function()
{
    var metrics = {
	offX : 0,
	offY : 0,
	width : 0,
	height: 0
    };

    if( window.pageXOffset !== undefined ) {
	metrics.offX = window.pageXOffset;
    } else if( document.documentElement.scrollLeft !== undefined ) {
	metrics.offX = document.documentElement.scrollLeft;
    } else if( document.body.scrollLeft !== undefined ) {
	metrics.offX = document.body.scrollLeft;
    }

    if( window.pageYOffset !== undefined ) {
	metrics.offY = window.pageYOffset;
    } else if( document.documentElement.scrollTop !== undefined ) {
	metrics.offY = document.documentElement.scrollTop;
    } else if( document.body.scrollTop !== undefined ) {
	metrics.offY = document.body.scrollTop;
    }

    if( window.innerWidth ) {
	metrics.width = window.innerWidth ;
	metrics.height = window.innerHeight;
    } else if( document.documentElement.clientWidth ) {
	metrics.width = document.documentElement.clientWidth;
	metrics.height = document.documentElement.clientHeight;
    } else if( document.body.clientWidth ) {
	metrics.width = document.body.clientWidth;
	metrics.height = document.body.clientHeight;
    }

    return metrics;
}