/* file to display preview images in preview area */

function Preview()
{
        return this;
}

var availableWidth = 177; // size of expandDiv minus 7


/* imageObject could be an array (for bundles) or an image object */
Preview.loadImagesForNode = function(controlId, imageObject)
{
        var controlObj = $(controlId);
        if ((controlObj != null) && (controlObj != undefined))
        {
                var images = controlObj.getElementsByTagName("img");
                if (images != null)
                {
                        // there are other images in the bundle preview area, so keep two counters
                        var previewImageIndex = 0;
                        /* for bundles to load multiple images in the preview area */
                        for (var i=0; i < images.length; i++)
                        {
                                var image = images[i];
                                if(image.id == 'previewImage')
                                {
                                        setImageSrc(image, imageObject, previewImageIndex)
                                        previewImageIndex++;
                                }
                        }
                }
        }
}


function setImageSrc(imageToBeOverwritten, imageObject, previewImageIndex)
{
        // working with an image in a bundles array?
		if(imageObject){
			if(imageObject.length != null)
			{
					 if(imageObject[previewImageIndex].width > availableWidth)
					 {
							imageObject[previewImageIndex].width = availableWidth;
					}
	
					imageToBeOverwritten.width = imageObject[previewImageIndex].width
					imageToBeOverwritten.src = imageObject[previewImageIndex].src
			}
			else
			{
					 if(imageObject.width > availableWidth)
					{
							imageObject.width = availableWidth;
					 }
	
					imageToBeOverwritten.width = imageObject.width
					imageToBeOverwritten.src = imageObject.src
			}
		}

}

/* bundles function to create image objects for the list of image srcs passed in */
function createResourceImageArray(imageSrcArray)
{
        thisResourceArray = new Array();
        for(var i=0; i < imageSrcArray.length; i++)
        {
                thisResourceArray[i] = createImage(imageSrcArray[i]);
        }
        return thisResourceArray;
}

function createImage(imageSrc)
{
        var ImageObj = new Image();
        ImageObj.src = imageSrc;
        if(ImageObj.width > availableWidth)
        {
                ImageObj.width = availableWidth;
        }
        return ImageObj;

}



Preview.showPreview = function(controlId, imageObj)
{
        var previewSplashObj = $('previewSplash');
        if ((previewSplashObj != null) && (previewSplashObj != undefined))
        {
                var previewResourceObj = $('previewResource');
                if ((previewResourceObj != null) && (previewResourceObj != undefined))
                {
                        $('previewSplash').style.display = 'none';
                        $('previewResource').style.display = 'block';
                         $('previewResource').innerHTML = $(controlId).innerHTML;
                        Preview.loadImagesForNode(previewResourceObj, imageObj);

                }
				Preview.moveIntoView();                
        }
}

Preview.moveIntoView = function(){
	var hp = "0px";
	var ca = $("expandDiv").previous(); 
	var hd = ca.getHeight() - $("previewArea").getHeight();  
	var sd = $("expandDiv").cumulativeScrollOffset().top - ca.cumulativeOffset().top;
	if(sd > 0){
		$("expandDiv").show();
		if((hd - sd) > 0){
			hp = sd + "px";
		}else{
			hp = hd + "px";
		}
	}else{
		$("expandDiv").hide();
	}
	$("expandDiv").setStyle({height: hp});
}

document.observe("dom:loaded",function(){
	if($("previewArea") != null){
	    $("previewArea").insert({before: new Element('div',{id:'expandDiv','style':'float: right; width: 184px; height: 0px; display: none'})});
		Event.observe(window,'scroll',Preview.moveIntoView);
	}
});