function IS6_PreloadImage(url)
{
    var preloaded = new Image();
    preloaded.src = url;
}

// Image related functions	
function doesImageExist(id, BackOfficeUrl)
{		
	var exists = false;
	
	// Get path
	path = document.getElementById(id).src;
	
	var oImg = new Image();
	oImg.onload = function(){onImageEvent(oImg, true, id);};
	oImg.onerror = function(){onImageEvent(null, false, id)};
	oImg.src = path;
	
	function onImageEvent(img, loaded, id)
	{
		
		if (loaded)
		{
			if(id != "image0")
			{
				imgThumb = document.getElementById(id);	
				
				// clip thumbnails
				RenderClipStyle(77, 58, id);   // 77 58
				
				// Get path for all photos
				str = imgThumb.src.split("/");
				pathAll = str[str.length - 3] + "/" + str[str.length - 2] + "/";
				
				// Get thumb image name
				str = imgThumb.src.split("/");
				photoName = str[str.length - 1].substring(5, str[str.length - 1].length);
				
				//alert(pathAll + "\n\n" + photoName + "\n\npath:" + imgThumb.src);
				
				IS6_PreloadImage("http://" + pathAll + photoName);
			}
		}
	}	
}


function ShowImage(imageID, BackOfficeUrl)
{		
	imgBig = document.getElementById("image0");
	imgThumb = document.getElementById(imageID);
	
	// Get big image name
	str = imgBig.src.split("/");
	photoName = str[str.length - 1];
	
	// Get path for all photos
	path = str[str.length - 3] + "/" + str[str.length - 2] + "/";
	
	// Stores current big image data
	tempSrc = photoName;
	tempTitle = imgBig.title;
	tempAlt = imgBig.alt;
	
	// Get thumb image name
	str = imgThumb.src.split("/");
	photoName = str[str.length - 1].substring(5, str[str.length - 1].length);
	
	// Updates big image with thumb data
	imgBig.src = "http://" +  path + photoName;
	imgBig.title = imgThumb.title;
	imgBig.alt = imgThumb.alt;
	
	// Updates thumb whith big img data
	imgThumb.src = "http://" +  path + "Thumb" + tempSrc;
	imgThumb.title = tempTitle;
	imgThumb.alt = tempAlt;
	
	// clip thumbnail
    RenderClipStyle(77, 58, imgThumb.id);
	
	doesImageExist("image0");
}

function RenderClipStyle(canvasWidth, canvasHeight, id)
{
    var iVerticalPosition = 0;
    var iHorizontalPosition = 0;
    var iTopPos = 0; 
    var iBottomPos = 0;
    var iLeftPos = 0;
    var iRightPos = 0;
 
    // Get thumbnail
    var image = document.getElementById(id);
    
    // Apply proper template based on canvas and image proportions
    if (canvasWidth == canvasHeight && image.width == image.height)
    {
        image.style.width = canvasWidth + "px";
    }
    else
    {
        
        if ((canvasWidth > canvasHeight) || (canvasWidth == canvasHeight && image.width < image.height))         
        {
            // Canvas is landscape
            // or
            // Canvas is square and image is portrait
        
            var height = GetNewImageWidthHeight(id, canvasWidth, -1);
            
            // Get vertical center
            iVerticalPosition = (height - canvasHeight) / 2;
            
            // Render proper style
            image.style.width = canvasWidth + "px";  
            image.style.top = -iVerticalPosition + "px";
            image.style.position = "relative";
            
        }
        else if ((canvasWidth < canvasHeight) || (canvasWidth == canvasHeight && image.width > image.height))
        {
            // Canvas is portrait
            // or
            // Canvas is square and image is landscape
            
            var width = GetNewImageWidthHeight(id, -1, canvasHeight);
            
            // Get vertical center
            iHorizontalPosition = (width - canvasWidth) / 2;
            
            // Render proper style
            image.style.height = canvasHeight + "px";  
            image.style.left = -iHorizontalPosition + "px";
            image.style.position = "relative";
        }
    }
}

function GetNewImageWidthHeight(id, newWidth, newHeight)
{
    var original = document.getElementById(id);
    
    var oImg = new Image();
	oImg.src = document.getElementById(id).src;
	
	var w = newWidth;
    var h = newHeight;
    
    var scale;
   
    if (w < 0)
    {
        scale = h / original.height;
        newWidth = parseInt(original.width * scale);
        
        return newWidth;
    }
    else if (h < 0)
    {
        scale = w / original.width;
        newHeight = parseInt(original.height * scale);
        
        return newHeight;
    }
}