var ll = null;

function showLockLayer(showHandler, clickHandler) {
	ll = Ekina.UI.createLockLayer(50, "black", function() {
		if (clickHandler) clickHandler();
	}, function() {
		if (showHandler) showHandler();
	}, true, .25);
};

function hideLockLayer() {
	if (!ll) return;
	
	ll.hide(.25);
};

function position(div, top) {
	div.style.left = ((window.document.body.offsetWidth / 2) - (div.offsetWidth / 2)) + "px";
	div.style.top = (document.documentElement.scrollTop + (top || 50)) + "px";
};

function showImage(src, desc) {
    showLockLayer(function() {
    _showImage(src, desc);
    }, hideImage);
}

function _showImage(src, desc) {
    
	var div = $("largeImg");
	div.style.display = "block";
	$("largeImg_inner").style.background = "white url(" + src + ") no-repeat center center";
	$("largeImg_desc").innerHTML = desc || "";
	div.fadeIn(100, .25);
	
	var p = div.parentNode;
	
	position(div);
	
	window.onresize = function() {
		position(div);
	};
};

function hideImage() {
	$("largeImg").fadeOut(0, .25, function() {
		$("largeImg").hide();
		hideLockLayer();
	});
	return false;
};

Ekina.Events.register(window, "ondomready", function() {
        
	    
    // Create DIV Image markup
    var divImg = $('<div id="largeImg"></div>').appendTo(document.body);
    var divInner = $('<div id="largeImg_inner"></div>').appendTo(divImg);
    var divControls = $('<div id="largeImg_controls"></div>').appendTo(divImg);
    $('<span id="largeImg_desc"></span>').appendTo(divControls);
    $('<a href="#" onclick="return hideImage();"></a>').appendTo(divControls).innerHTML = "CLOSE";    

	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var a = anchors[i];
		if ($string(a.rel) && a.rel == "lightbox") {
			a.onclick = function() {
				showImage(this.href, this.title);
				return false;
			};
		}
	}
});