function zoom_in_out(strContractImage,strExpandImage,strIn,strOut,strGridWidthContract,strGridWidthExpand,strZoomId)
{
    var strZoomInOutMode = '';
    var strContractExpandText = '';

    //Variables for contract and expand states
    var strExpandMoreText = strIn;
    var strContractMoreText = strOut;

    //Set grid variations
    switch(strGridWidthContract)
    {
        case "1"	: strContractWidthCss = '145'; break;
        case "1_5"	: strContractWidthCss = '221'; break;
        case "2"	: strContractWidthCss = '297'; break;
        case "3"	: strContractWidthCss = '449'; break;
        case "4"	: strContractWidthCss = '601'; break;
    }

    switch(strGridWidthExpand)
    {
        case "1"	: strExpandWidthCss = '145'; break;
        case "1_5"	: strExpandWidthCss = '221'; break;
        case "2"	: strExpandWidthCss = '297'; break;
        case "3"	: strExpandWidthCss = '449'; break;
        case "4"	: strExpandWidthCss = '601'; break;
    }

    if((document.getElementById('divZoomInOutLeft_' + strZoomId).style.width == strExpandWidthCss + 'px') && (document.getElementById('divZoomInOutDottedSurround_' + strZoomId).style.width == strExpandWidthCss + 'px'))
    {
        strZoomInOutMode = 'contract';
        strContractExpandText = strExpandMoreText;
    }
    else
    {
        strZoomInOutMode = 'expand';
        strContractExpandText = strContractMoreText;
    }

    switch(strZoomInOutMode)
    {
        case "expand" :
            document.getElementById('divZoomInOutLeft_' + strZoomId).style.width = strExpandWidthCss + 'px';
            document.getElementById('divZoomInOutDottedSurround_' + strZoomId).style.width = strExpandWidthCss + 'px';
            document.getElementById('divZoomInOutDottedSurround_' + strZoomId).className = 'dotted-left-right-3';
            document.getElementById('divZoomInOutMoreContainer_' + strZoomId).className = 'grey-container-corner-dark-three';
            document.getElementById('imgZoomInOut_' + strZoomId).src = strExpandImage;
            document.getElementById('imgZoomInOut_' + strZoomId).style.width = (strExpandWidthCss-2) + 'px';
            document.getElementById('divZoomInOutSeparator_' + strZoomId).style.display = "none";
            document.getElementById('divExpand10pxSpacer_' + strZoomId).style.display = "block";
            document.getElementById('divZoomInOutRight_' + strZoomId).style.width = strExpandWidthCss + 'px';
            break;
        case "contract" :
            document.getElementById('divZoomInOutLeft_' + strZoomId).style.width = strContractWidthCss + 'px';
            document.getElementById('divZoomInOutDottedSurround_' + strZoomId).style.width = strContractWidthCss + 'px';
            document.getElementById('divZoomInOutDottedSurround_' + strZoomId).className = 'dotted-left-right-1-and-a-half';
            document.getElementById('divZoomInOutMoreContainer_' + strZoomId).className = 'grey-container-corner-dark-one-and-a-half';
            document.getElementById('imgZoomInOut_' + strZoomId).src = strContractImage;
            document.getElementById('imgZoomInOut_' + strZoomId).style.width = (strContractWidthCss-2) + 'px';
            document.getElementById('divZoomInOutSeparator_' + strZoomId).style.display = "block";
            document.getElementById('divExpand10pxSpacer_' + strZoomId).style.display = "none";
            document.getElementById('divZoomInOutRight_' + strZoomId).style.width = strContractWidthCss + 'px';
            break;
    }

    //Set the more text dynamically
    document.getElementById('divZoomInOutMoreLink_' + strZoomId).innerHTML = strContractExpandText;
}