var arMultiCanvas = [
	{ src: '3x25x100', w:160, h:174 },
	{ src: '5x25x100', w:272, h:174 },
	{ src: '3x30x30', w:172, h:50 },
	{ src: '3x45x45', w:230, h:68 },
	{ src: '4x30x30', w:112, h:112 },
	{ src: '4x45x45', w:150, h:150 },
	{ src: '6x30x30', w:172, h:112 },
	{ src: '6x45x45', w:230, h:150 },
	{ src: '9x30x30', w:172, h:172 },
	{ src: '9x45x45', w:232, h:232 }
	];

var multicanvasPath = 'images/shadow/';

function multicanvasShow(index, src, test)
{
	/**
	 * getPageSize() by quirksmode.com
	 *
	 * @return Array Return an array with page width, height and window width, height
	 */
	function ___getPageSize() {
		var xScroll, yScroll;
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
		return arrayPageSize;
	};
	
	function multicanvasClose()
	{
		$('#vmlightbox-poza-container').remove();
		$('#multicanvasBlack').fadeOut(300, function(){ $('#multicanvasBlack').remove(); });
		$(document).unbind( 'keydown', multicanvasDocumentKeydown);
	}
	
	function multicanvasWindowResize()
	{
		$('#vmlightbox-poza-container').remove();
		$('#multicanvasBlack').fadeOut(300, function(){ $('#multicanvasBlack').remove(); });
		$(document).unbind( 'keydown', multicanvasDocumentKeydown);
	}
	
	function multicanvasDocumentKeydown(e)
	{
		if( e.keyCode == 27)
		{
			multicanvasClose();
			return false;
		}
	}

	if( typeof index == 'string')
	{
		$.each(arMultiCanvas, function(i,val){
			if( val.src == index)
			{
				index = i;
				return false;
			}
		});
	}
	if( !src)
		src = "images/spacer.gif";
		
	var opt;
	if( typeof index == 'number')
		opt = arMultiCanvas[index];
	else
		opt = { src: index, w:200, h:200 }; //a guess!
		
	var arPageSize = ___getPageSize();
	
	var $divBlack = $('<div id="multicanvasBlack"></div>').appendTo($('body'));
	$divBlack.css({
		'z-index' : 10000
		,'background-color' : '#271a2e'
		, width : arPageSize[0] //$(document).width()
		, height : arPageSize[1] //$(document).height()
		, opacity : 0.9
		, position : 'absolute'
		, left : 0
		, top : 0
	});

	var $divPoza = $('<div id="vmlightbox-poza-container"><div id="vmlightbox-poza-box"></div></div>').appendTo($('body'));
	$divPoza.css({
		'z-index' : 10001
		, width : '100%'
		, height : 400
		, position : 'absolute'
		, 'text-align' : 'center'
		, left : 0
		, top : ($(document).scrollTop() + ($(window).height()-400)/2)
	});
	
	$divBox = $('#vmlightbox-poza-box').css({
		'background' : '#fff url(images/lightbox/lightbox-ico-loading.gif) no-repeat center center scroll'
		, width : 400
		, height : '100%'
		, margin : '0 auto'
		, position : 'relative'
		, overflow : 'hidden'
	});

	$img = $('<img src="'+ src +'" alt="">').appendTo( $divBox);
	$img.css({
		'z-index' : 10002
		, display : 'block'
		, position : 'absolute'
		, width : opt.w
		, height : opt.h
		, left : 10
		, top : 10
		, opacity : 0
	});
	$img.data('i',0);
	
	$imgOverlay = $('<img src="'+ multicanvasPath + opt.src +'.gif" alt="">').appendTo( $divBox);
	$imgOverlay.css({
		'z-index' : 10003
		, display : 'block'
		, position : 'absolute'
		, left : 0
		, top : 0
		, opacity : 0
	});
	
	$imgOverlay.load( function() { 
		$imgOverlay.animate({opacity:1},500); 
		$img.animate({opacity:1},500); 
		$divBox.css({'background-image':''}); 
	});
   
    $pText = $('<p>ACEASTA IMAGINE ESTE DOAR CU TITLU INFORMATIV</p>').appendTo( $divBox);
    $pText.css({
        'z-index' : 10004
        , display : 'block'
        , position : 'absolute'
        , bottom : 0
        , left : 40
        , color : '#ccc'
        , 'font-size' : 9
        , 'text-dec' : 11
        , 'letter-spacing' : 2
    });
    
	// TEST ONLY
	if( test)
	{
		$divBox.click(function(e){
			var i = $img.data('i')+1;
			$img.data('i', i);
			$img.attr('src', arImages[i]);
			e.stopPropagation();
		});
	}

	$(window).bind( 'resize', multicanvasWindowResize);
	$(document).bind( 'keydown', multicanvasDocumentKeydown);
	$divPoza.click( multicanvasClose);
	$divBlack.click( multicanvasClose);
}