function showPopupDiv(className)
{
    $('#'+imagePopUPDiv).attr('class',className);
    popUpShow(imagePopUPDiv,leftPosition,topPosition);
}
function jsImagePopUP(page_no,ele,direction){
    if(direction == 'left'){
        page_no = getPreviousPageNumber();
        if(!page_no && page_no!=0) return;

        position     = $(ele).offset();
        leftPosition = position.left+$(ele).width()-13;
        topPosition  = position.top+($(ele).height()/2)-(popUPWidth*(popUPLeftGradient-.058));
        showPopupDiv('popup_prev_dual_page');

        renderImageInPopUP(page_no,leftImage,rightImage);
    }else if(direction=='right'){
        page_no=getNextPageNumber();
        if(!page_no && page_no!=0) return;

        position     = $(ele).offset();
        leftPosition = position.left-popUPWidth-popUPTopGradient+23;
        topPosition  = position.top+($(ele).height()/2)-(popUPWidth*(popUPLeftGradient-.1));
        showPopupDiv('popup_next_dual_page');

        renderImageInPopUP(page_no,leftImage,rightImage);
    }else if(direction == 'bottom'){
        position     = $(ele).position();
        leftPosition = position.left+($(ele).width()/2)-(popUPWidth*(popUPLeftGradient+.085));
        topPosition  = position.top+popUPTopGradient;
        showPopupDiv('popup_pageing');

        renderImageInPopUP(page_no,leftImage,rightImage);
    }else{
        if(direction == 'bottom_next'){
            page_no  = getNextPageNumber();
            if(!page_no && page_no!=0) return;
        }else if(direction=='bottom_previous'){
            page_no = getPreviousPageNumber();
            if(!page_no && page_no!=0) return;
        }else if(direction=='cover'){
            page_no = 0;
        }else if(direction=='back'){
            page_no = numberOfPages-1;
        }

        position     = $(ele).position();
        leftPosition = position.left+($(ele).width()/2)-(popUPWidth*(popUPLeftGradient+.085));
        topPosition  = position.top+popUPTopGradient;
        showPopupDiv('popup_pageing');

        renderImageInPopUP(page_no,leftImage,rightImage);
    }
}
function jsImagePopUPHide(){
    $('#'+imagePopUPDiv).css('visibility','hidden');
    $('#'+leftImage).attr('src',"");
    $('#'+rightImage).attr('src',"");
}

function popUpShow(divID,left,top){
    var cssObj = {
        visibility: "visible",
        left: left+'px',
        top: top+'px'
    }
    $('#'+divID).css(cssObj);
}
function renderImageInPopUP(pageNo,leftImage,rightImage)
{
    
    pageNo   = pageNo;
    eleLeft  = null;
    eleRight =null;
    loadThumbImageByNo(pageNo);
    if(pageNo == 0){
        eleRight = $('#thumb_image'+0);
    }else if(pageNo > 0 && pageNo<numberOfPages-1){
        eleLeft  = $('#thumb_image'+(pageNo));
        eleRight = $('#thumb_image'+(pageNo+1));
    }else{
        eleLeft = $('#thumb_image'+(numberOfPages-1));
    }

    if(eleLeft != null){
        left_image_source = eleLeft.attr('src');
    }else
        left_image_source = blankImageUrlTrans;

    if(eleRight != null){
        right_image_source = eleRight.attr('src');
    }else
        right_image_source = blankImageUrlTrans;
    innerHtml   =   '<table width="100%">\n\
                        <tr><td class="middle_center" height="157px">\n\
                        <img src="'+siteUrl+'images/loading_wheel.gif" />\n\
                        </td></tr>\n\
                    </table>';

    $('#loadImagePopUp').html(innerHtml);

    $.post(siteUrl+"ajaxrequest.php",
    {
        action          :   "loadPopUp",
        left_img_src    :   left_image_source,
        right_img_src   :   right_image_source
    },
    function(ajaxResponse) {
        $('#loadImagePopUp').html(ajaxResponse);
    }
    );
}