// getjpeg.js
// JPEG画像表示関数


// clipdir.JCActionType
// None = 0
// FitWindow = 1
// FitWidth = 2
// FitHeight = 3

// ZoomIn = 11
// ZoomOut = 12
// SetZoomPercent = 13

// RotateLeft = 21
// RotateRight = 22

// SetDisplaySize = 31
// Drag = 32
// DragOnTelescope = 33
// SetDisplayRegion = 34

// テレスコープ画像のマージン
var TELESCOPE_MARGIN = 6;
var TELESCOPE_BAR_HEIGHT = 25;

//**********************************************************
// UpdateJpeg***** : JPEGを更新する関数
//**********************************************************

// 指定した倍率に拡大／縮小する。
function UpdateJpegZoom() {
    var zoomPercent = parseFloat($('#selZoom').val());
    UpdateJpeg(0, 13, zoomPercent / 100);
}

// メイン画像がマウスでドラッグされた。
function UpdateJpegDrag(clientOffsetX, clientOffsetY) {
    UpdateJpeg(0, 32, clientOffsetX + "," + clientOffsetY);
}

// テレスコープ上の表示領域がドラッグされた。
function UpdateJpegDragOnTelescope(tsDispRegionLeft, tsDispRegionTop) {
    var ts = $('#telescopeImage');
    var tsWidth = ts.width();
    var tsHeight = ts.height();

    tsDispRegionLeft -= TELESCOPE_MARGIN;
    tsDispRegionTop -= (TELESCOPE_MARGIN + TELESCOPE_BAR_HEIGHT); 

    UpdateJpeg(0, 33, tsWidth + "," + tsHeight + "," + tsDispRegionLeft + "," + tsDispRegionTop);
}


// 表示サイズを変更する。ページ上のボタンから。
function UpdateJpegResizeByButton() {
    var clientW = $('#txtDispW').val();
    var clientH = $('#txtDispH').val();

    // 値の検証
    if (isNaN(parseInt(clientW)) || isNaN(parseInt(clientH))) {
        alert('正の整数値を入力してください。');
        return;
    }
    
    $('#imageFlame').width(clientW);
    $('#imageFlame').height(clientH);

    UpdateJpegResize(clientW, clientH);
}

// 表示サイズを変更する。
function UpdateJpegResize(clientW, clientH) {
    UpdateJpeg(0, 31, clientW + "," + clientH);
}

// メイン画像上の領域選択拡大。
function UpdateJpegDisplayRegion(x, y, w, h) {
    UpdateJpeg(0, 34, x + "," + y + "," + w + "," + h);
}

// 回転
function UpdateJpegRotation(direction) {
    var act = 0;
    if (direction > 0) {
        act = 22;
    }
    else {
        act = 21;
    }
    UpdateJpeg(0, act, "");
}

// ページング
function MovePage(pageoption) {

    var pageno = $('#hPageNo').val();
    var pageCount = $('#hPageCount').val();

    switch (pageoption) {
        case 0:
            pageno = 1;
            break;
        case 1:
            pageno--;
            break;
        case 2:
            pageno++;
            break;
        case 3:
            pageno = pageCount;
            break;
    }

    if (pageno < 1 || pageno > pageCount) return false;

    ShowPage(pageno, 0);
}

//**********************************************************
// ページを表示する
//**********************************************************
function ShowPage(pageno, opt) {

    var currentPage = $('#hPageNo').val();
    if (currentPage == pageno) return false;

    // 現在のページのサムネイルのCSSを戻す
    //    $('#thumb' + currentPage).attr('class', 'thumb');

    $('#hPageNo').val(pageno);

    var docID = $('#hDocID').val();

    // 領域を維持するかどうか
    var keepRef = false;
    if ($('#chkKeepRef').attr('checked')) keepRef = true;

    var refdef = "";
    if (keepRef) refdef = $('#hCurrentRef').val();

    SetPageNavButtons();

    GetJpeg(docID, pageno, refdef, 0, -1, "");

    $('#dlPages').attr('selectedIndex', pageno - 1);

    ShowThumbnails(pageno);

    //    $('#thumb' + pageno).attr('class', 'thumbactive');

    //    if (opt == 0) {
    //        ShowCurrentPageThumbnail();
    //        ShowThumbnails();
    //    }
}


//**********************************************************
// 現在のページを更新する
//**********************************************************
function UpdateJpeg(req, act, param) {
    // パラメータを取得。
    var docID = $('#hDocID').val();
    var pageno = $('#hPageNo').val();
    var refdef = $('#hCurrentRef').val();

    $('#dlPages').attr('selectedIndex', pageno - 1);

    GetJpeg(docID, pageno, refdef, req, act, param);
}


//**********************************************************
// JPEGを取得するスクリプト
//**********************************************************

var loading = false;

function GetJpeg(docID, pageno, refdef, req, act, param) {

    // ロード中ならキャンセル
    if (loading) return false;

    /// QueryString:
    ///     id : ドキュメントID。
    ///     ref : 現在の参照設定。初期時はブランク。
    ///     req : リクエスト種別。
    ///     act : メイン画像のアクション種別。
    ///     param : 各モードのパラメータ。

    var qs = {id: docID, p: pageno, ref: refdef, req: req, act: act, param: param }

    // ロードフラグをtrueにする。
    loading = true;

    ShowIndicator();

    // 非同期通信でJPEGを取得する。
    $.ajax({
        type: "GET",
        url: "createjpeg.aspx",
        dataType: "json",
        data: qs,

        success: handleSuccess,
        error: handleErrorMain, 
        complete: handleComplete
    });

}

function ShowIndicator() {
    var imageFlame = $('#imageFlame');
    var indicator = $('#imageLoading');

    indicator.css('left', (imageFlame.width() - indicator.width()) / 2);
    indicator.css('top', (imageFlame.height() - indicator.height()) / 2);

    indicator.show();
}


// Ajax通信成功
var handleSuccess = function(data, dataType) {
    ShowImage(data);
}
 
// Ajax通信失敗
var handleErrorMain = function(XMLHttpRequest, textStatus, errorThrown){
    loading = false;
}

// Ajax通信失敗
var handleError = function(XMLHttpRequest, textStatus, errorThrown) {
    // 特になにもしない。
} 

// Ajax通信終了
var handleComplete = function(XMLHttpRequest, textStatus) {
// 特になにもしない。
}

// 画像を表示する関数
function ShowImage(res) {

    // resオブジェクト（JpegResponseクラス）のプロパティ
    // public string JpegUrl
    // public string ImageRefDef
    // public float CurrentZoom
    // public int CurrentZoomPercent
    // public bool IsFitWin
    // public bool IsFitWidth
    // public bool IsFitHeight
    //    private string _telescopeJpegUrl = "";
    //    private int _telescopeWidth = 0;
    //    private int _telescopeHeight = 0;
    //    private int _tsRegionLeft = 0;
    //    private int _tsRegionTop = 0;
    //    private int _tsRegionWidth = 0;
    //    private int _tsRegionHeight = 0;
    
    // メイン画像表示
    $("#mainImage").attr("src", res.JpegUrl);

    // テレスコープ表示
    ShowTelescope(res);

    // 参照設定定義
    $("#hCurrentRef").val(res.ImageRefDef);

    // 倍率表示
    $("#selZoom").children('option:first').val(res.CurrentZoomPercent);
    $("#selZoom").children('option:first').text(res.CurrentZoomPercent + '%');
    $("#selZoom").attr('selectedIndex', 0);

    //参照URL
    var pageUrl = $("#hBaseUrl").val();
    pageUrl += "?id=" + $("#hDocID").val();
    pageUrl += "&p=" + $("#hPageNo").val();
    pageUrl += "&ref=" + res.ImageRefDef;

    $('#refUrl').text("JPEG URL : " + res.JpegUrl + " 　ページURL : " + pageUrl);
//    $("txtPageUrl").value = $("hUrlPre").value + "&ref=" + sp[2];
//    $("txtImageUrl").value = sp[0];

    // 部分印刷
    $("#lnkPrint").attr("href", res.JpegUrl);

}

function ImageLoadCompleted() {
    loading = false;

    $('#imageLoading').hide();

    // 画像を表示エリアの中央に配置

    var dispW = $('#imageFlame').width();
    var dispH = $('#imageFlame').height();

    var mainImage = $('#mainImage');

    var imgW = mainImage.width();
    var imgH = mainImage.height();

    if (imgW < dispW) {
        mainImage.css('left', (dispW - imgW) / 2 );
    }
    else {
        mainImage.css('left', 0);
    }

    if (imgH < dispH) {
        mainImage.css('top', (dispH - imgH) / 2);
    }
    else {
        mainImage.css('top', 0);
    }

}


//**********************************************************
// テレスコープ関連のスクリプト
//**********************************************************
function ShowTelescope(res) {

    // ダイアログのサイズ調整
    var dlg = $('#dlgTelescope');

    dlg.dialog('option', 'width', res.TelescopeWidth + TELESCOPE_MARGIN * 2);
    dlg.dialog('option', 'height', res.TelescopeHeight + TELESCOPE_BAR_HEIGHT + TELESCOPE_MARGIN * 2);

//    var ts = $('#tsImage');
//    ts.css('background-image', 'url("' + res.TelescopeJpegUrl + '")');
//    ts.width(res.TelescopeWidth + 4);
    //    ts.height(res.TelescopeHeight + 4);

    var ts = $('#telescopeImage');
    ts.attr("src", res.TelescopeJpegUrl);
    ts.width(res.TelescopeWidth);
    ts.height(res.TelescopeHeight);

    var tsLeft = TELESCOPE_MARGIN;
    var tsTop = TELESCOPE_BAR_HEIGHT + TELESCOPE_MARGIN;

    ts.css('left', tsLeft.toString() + 'px');
    ts.css('top', tsTop.toString() + 'px');
    
    var rgn = $('#tsDispRegion');

    var left = res.TsRegionLeft + TELESCOPE_MARGIN;
    var top = res.TsRegionTop + TELESCOPE_BAR_HEIGHT + TELESCOPE_MARGIN;

    rgn.css('left', left.toString() + 'px');
    rgn.css('top', top.toString() + 'px');
    rgn.width(res.TsRegionWidth);
    rgn.height(res.TsRegionHeight);

}

// テレスコープを単独で更新する。サイズ変更の場合。
function UpdateTelescope(tsWidthOffset, tsHeightOffset) {

    /// QueryString:
    ///     dType : ドキュメント種別。
    ///     id : ドキュメントID。
    ///     p : ページ番号。
    ///     ref : 現在の参照設定。初期時はブランク。
    ///     req : リクエスト種別。
    ///     act : メイン画像のアクション種別。
    ///     param : 各モードのパラメータ。

    // パラメータを取得。
    var docID = $('#hDocID').val();
    var pageno = $('#hPageNo').val();
    var refdef = $('#hCurrentRef').val();

    var ts = $('#telescopeImage');
    var tsWidth = ts.width() + tsWidthOffset;
    var tsHeight = ts.height() + tsHeightOffset;
    
    var param = tsWidth + "," + tsHeight;

    var qs = { id: docID, p: pageno, ref: refdef, req: 1, param: param }

    // 非同期通信でJPEGを取得する。
    $.ajax({
        type: "GET",
        url: "createjpeg.aspx",
        dataType: "json",
        data: qs,

        success: tsHandleSuccess,
        error: handleError,             // 共通 
        complete: handleComplete        // 共通
    });
}

// Ajax通信成功
var tsHandleSuccess = function(data, dataType) {
    ShowTelescope(data);
}

//**********************************************************
// サムネイル関連のスクリプト
//**********************************************************
function ShowThumbnails(pageNo) {

    var thumbCount = $('#hThumbCount').val();
    var thumbPage = Math.floor((pageNo -1)/ thumbCount)+1;

    ShowThumbPage(thumbPage);

    var currentNo = pageNo % thumbCount;
    if (currentNo == 0) currentNo = thumbCount;

    var i;
    for (i = 1; i <= thumbCount; i++) {
        var thumbImage = $('#thumb' + i.toString());
        if (i == currentNo) {
            thumbImage.attr('class', 'thumbactive');
        }
        else {
            thumbImage.attr('class', 'thumb');
        }
    }

    ShowCurrentPageThumbnail(currentNo);
}

function ShowCurrentPageThumbnail(thumbNo) {

    var thumbBody = $('#thumbbody');
    var currentScrollTop = thumbBody.scrollTop();
    var thumbBodyHeight = thumbBody.height();

    var offset = thumbBody.position().top;

    var thumbBlock = $('#thumbDiv' + thumbNo.toString());
    var thumbBlockTop = thumbBlock.position().top - offset;

    if (thumbBlockTop < 0 || thumbBlockTop + thumbBlock.height() > thumbBodyHeight) {
        var pos = thumbBlockTop + currentScrollTop;
        thumbBody.scrollTop(pos);
    }
}


function ChangeThumbPage(thumbPage) {
    ShowThumbPage(thumbPage);
    var thumbCount = $('#hThumbCount').val();

    var i;
    for (i = 1; i <= thumbCount; i++) {
        var thumbImage = $('#thumb' + i.toString());
        thumbImage.attr('class', 'thumb');
    }
    ShowCurrentPageThumbnail(1);
}


function ShowThumbPage(thumbPage) {

    var currentThumbPage = $('#hCurrentThumbPage').val();
    if (currentThumbPage == thumbPage) return;

    $('#hCurrentThumbPage').val(thumbPage);

    var thumbCount = $('#hThumbCount').val();
    var pageCount = $('#hPageCount').val();

    var pageFrom = (thumbCount * (thumbPage - 1)) + 1;
    var pageTo = thumbCount * thumbPage;

    if (pageCount < pageTo) pageTo = pageCount;

    $('#dlThumbPages').attr('selectedIndex', thumbPage - 1);

    var i = 0;
//    for (i = 1; i <= thumbCount; i++) {
//        $('#thumbDiv' + i.toString()).hide();
//    }    

    var pages = pageFrom.toString();
    for (i = pageFrom + 1; i <= pageTo; i++)
        pages += "," + i.toString();

    var docID = $('#hDocID').val();

    var qs = { id: docID, pages: pages }

    $.ajax({
        type: "GET",
        url: "createthumbs.aspx",
        dataType: "json",
        data: qs,
//                async: false,

        success: function(data, dataType) {
            for (i = 0; i < data.ThumbList.length; i++) {
                var pThumb = data.ThumbList[i];
                var no = i + 1;
                var thumbBlock = $('#thumbDiv' + no.toString());
                var thumbCap = $('#thumbCap' + no.toString());
                var thumbImage = $('#thumb' + no.toString());

                thumbCap.text("Page " + pThumb.PageNo);
                thumbImage.attr("src", pThumb.Url);

                thumbBlock.show();
            }
            for (i = data.ThumbList.length; i < thumbCount; i++) {
                var no1 = i + 1;
                var thumbBlock1 = $('#thumbDiv' + no1.toString());
                thumbBlock1.hide();
            }
        },
        error: handleError,             // 共通 
        complete: handleComplete        // 共通
    });
    

}

function ThumbClicked(thumbNo) {
    var thumbCount = $('#hThumbCount').val();
    var currentThumbPage = $('#hCurrentThumbPage').val();

    var pageNo = (thumbCount * (currentThumbPage - 1)) + thumbNo;
    ShowPage(pageNo, 1);
}

function AdjustThumbnailArea() {
    var win = $(window);
    var thumbBody = $('#thumbbody');
    var currentHeight = thumbBody.height();

    var thumbAreaHeight = win.height() - thumbBody.position().top - 12;
    if (thumbAreaHeight < 300) thumbAreaHeight = 300;

    thumbBody.height(thumbAreaHeight);

//    if (currentHeight < thumbAreaHeight) {
//        ShowThumbnails();
//    }
}


//**********************************************************
// ページング関連のスクリプト
//**********************************************************
function SetPageNavButtons() {

    var pageNo = $('#hPageNo').val();
    var pageCount = $('#hPageCount').val();

    var enabledImages = new Array('page_first.png', 'page_prev.png', 'page_next.png', 'page_last.png');
    var disabledImages = new Array('page_first_disable.png', 'page_prev_disable.png', 'page_next_disable.png', 'page_last_disable.png');

    var btnEnabled;
    var images = new Array(4);

    if (pageCount == 1) {
        btnEnabled = new Array(false, false, false, false);
    }
    else if (pageNo == 1) {
        btnEnabled = new Array(false, false, true, true);
    }
    else if (pageNo == pageCount) {
        btnEnabled = new Array(true, true, false, false);
    }
    else {
        btnEnabled = new Array(true, true, true, true);
    }

    var i;
    for (i = 0; i < 4; i++) {
        if (btnEnabled[i] == true) {
            images[i] = enabledImages[i];
        }
        else {
            images[i] = disabledImages[i];
        }
    }

    $('#btnFirstPage').attr('src', 'image/' + images[0]);
    $('#btnPrevPage').attr('src', 'image/' + images[1]);
    $('#btnNextPage').attr('src', 'image/' + images[2]);
    $('#btnLastPage').attr('src', 'image/' + images[3]);

}