var def_cAreaWidth = 727;
var opn_cAreaWidth = 247;
var cAreaWidth = 727;
var imgMinWidth = 210;
var imgMinHeight = 460;
var orgWidth, orgHeight, focusX, focusY;
var bigMode = false;
var imgLeft = 'images/riva_arrow_180.gif';
var imgRight = 'images/riva_arrow.gif';
var imgLeft_hover = 'images/riva_arrow_skip_180.gif';
var imgRight_hover = 'images/riva_arrow_skip.gif';
var animAllowed=false;
function resizeImage(anim) {
    var imgArea = $('#divRightImage');
    var img = $('#divRightImage img#imgMain');
    var imgOcl = $('img#imgOcl');

    var wW = $(window).width();
    var wH = $(window).height();

	if(wW<cAreaWidth+imgMinWidth)
	{
		imgArea.hide();
		imgOcl.hide();
	}
	else
	{
		imgArea.show();
		imgOcl.show();
		var w, h;
		if (wH <= imgMinHeight)
			h = imgMinHeight;
		else
			h = wH;
	
		w = (h * 1.0) * orgWidth / orgHeight;
	
		if (bigMode) {
			cAreaWidth = opn_cAreaWidth;
			//cAreaWidth = wW - w;
			//cAreaWidth = cAreaWidth < 0 ? 0 : cAreaWidth;
		}
		else
			cAreaWidth = def_cAreaWidth;
	

	
		var calcWidth = wW - cAreaWidth;
	
		if (calcWidth < imgMinWidth)
			calcWidth = imgMinWidth;


		var l = (calcWidth / 2.0) - (w * focusX / orgWidth);
		l = l > 0 ? 0 : (bigMode ? 0 : l);
	
		
		if(calcWidth>w+l)
			calcWidth=w+l;
		
		
		var top = (wH / 2.0) - (h * focusY / orgHeight);
		top = top < 0 ? top : 0;
	
		if (anim) {
			img.animate({ 'left': l, 'top': top, 'width': w, 'height': h });
			imgArea.animate({ 'width': calcWidth });
			imgOcl.animate({ 'right': calcWidth });
		}
		else {
			img.css('width', w).css('height', h).css('left', l).css('top', top);
			imgArea.css('width', calcWidth);
			//imgOcl.css('left', cAreaWidth - imgOcl.width());
			imgOcl.css('right', calcWidth);
		}
	}
}

function InitImage(imgName, w, h, fX, fY) {
    orgWidth = w * 1.0;
    orgHeight = h * 1.0;
    focusX = fX * 1.0;
    focusY = fY * 1.0;
    $(document.body).append('<div id="divRightImage">');
    var divRight = $('#divRightImage');
    divRight.css('display', 'none');
    divRight.css('position', 'fixed');
    divRight.css('right', '0px');
    divRight.css('top', '0px');
    divRight.css('z-index', '100');
    divRight.css('height', '100%');
    divRight.css('overflow', 'hidden');
    divRight.append('<img id="imgMain">');
    var img = $('#divRightImage img#imgMain');
    img.attr('src', imgName);
    img.css('position', 'absolute');
    img.css('cursor', 'pointer');
    img.hover(function() { $('img#imgOcl').attr('src', bigMode?imgRight_hover: imgLeft_hover) }, function() { $('img#imgOcl').attr('src', bigMode?imgRight: imgLeft) });
    img.load(function() { resizeImage(); $(window).resize(function() { resizeImage(animAllowed) }); $('#divRightImage').show() });
    img.click(FitViewPort);

    $(document.body).append('<img id="imgOcl">');
    var imgOcl = $('img#imgOcl');
    imgOcl.attr('src', imgLeft);
    imgOcl.css('position', 'fixed');
    imgOcl.css('cursor', 'pointer');
	imgOcl.css('z-index', '100');
	imgOcl.css('display', 'none');
    imgOcl.css('top', 43);
    imgOcl.hover(function() { $('img#imgOcl').attr('src', bigMode ? imgRight_hover : imgLeft_hover) }, function() { $('img#imgOcl').attr('src', bigMode ? imgRight : imgLeft) });
    imgOcl.click(FitViewPort);
    
}

function FitViewPort() {
    bigMode = !bigMode;
    var imgOcl = $('img#imgOcl');
    if (bigMode)
        imgOcl.attr('src', imgRight);
    else
        imgOcl.attr('src', imgLeft);
    
    resizeImage(true);
}