/// <reference path="../common/js/jquery-1.8.1.min.js" /> /// <reference path="../common/js/jquery-ui-1.8.23.custom.min.js" /> /// <reference path="../common/js/common.js" /> /* init const */ var WIDTH_DIALOG_BOOKMARK = 300; var HEIGHT_DIALOG_BOOKMARK = 700; var HEIGHT_DIALOG_BOOKMARK_NO_BOOKMARK = 200; var WIDTH_DIALOG_INDEX = 300; var HEIGHT_DIALOG_INDEX = 700; var HEIGHT_DIALOG_INDEX_NO_INDEX = 200; var WIDTH_DIALOG_SEARCH = 300; var HEIGHT_DIALOG_SEARCH = 700; var HEIGHT_DIALOG_SEARCH_NO_SEARCH = 200; var WIDTH_DIALOG_COPYTEXT = 300; var HEIGHT_DIALOG_COPYTEXT = 500; var HEIGHT_DIALOG_COPYTEXT_NO_COPYTEXT = 200; /* init variable */ var pageImages = ''; var totalPage = 0; var pageObjects = []; var pageObjectsData = []; var tool; var isFullScreen = false; var ctrlMode = false; var dataWebContentPage; var dataPageTitle; var dataJsonType4; var dataJsonType5; var contentID; var isOpenPopUpText = false; var isOpenPopUpMemo = true; var objEditMemo; var isCopyMemo = false; var isExistCopyMemo = false; var posXPopupMemo = 0; var posYPopupMemo = 0; var contentName = ''; var nCountObjectLoad = 0; var nAjaxLoad = 0; var isClearDrawing = false; var isDrawing = false; var mediaType4_changeImage = 0; var isLoadingObject = false; var isFirstLoad = true; var nPositionCanvas = []; var arrImage = []; var posTxtSearch = []; var sx, sy; var imgDrawingTemp; var imgMarkerTemp; var isSizingDrawCanvas = false; var isDisplayBookMarkList = false; var avwUserEnvObj = new UserEnvironment(); var canvas_marker; var context_marker; var canvas_draw; var context_draw; var canvas_main; var context_main; var canvas_offscreen; var context_offscreen; var isAddingMarking; var penSize; var penColor; var makerSize; var makerColor; var eraseSize; var markingType; var isDisplayCopyText = false; var isDisplayListIndex = false; var isChangeSizeScreen = false; var widthContentImage = 0; var heightContentImage = 0; var widthEachPage = 0; var heightEachPage = 0; var px = 0; var py = 0; var isPressLeftMouse = false; var isMoveOutDrawCanvas = false; var typeSelectMemo = 0; var arrThumbnailsLoaded = []; var isSendingData = true; var isPlayBGMUnlock = false; var isJumpNotFromFirstPage = false; var standardRatio = 1; var currentRatio = 1; /* Clear canvas */ function clearCanvas(targetCanvas) { targetCanvas.width = targetCanvas.width; }; /* get Json stored content info */ function getJsonContentInfo() { avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: 1 }, function (data) { pageImages = data; webGetContentData(); getSearchDataFromJson(); getJsonDataPageTitle(); getJsonDataType4(); getJsonDataType5(); getDataJsonFile(); webGetPageImageContentSize(); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); }; function webGetPageImageContentSize() { avwCmsApi(ClientData.userInfo_accountPath(), "webContentPageSize", "GET", { contentId: contentID, sid: ClientData.userInfo_sid() }, function (data) { widthContentImage = data.width; heightContentImage = data.height; }, null); }; function webGetContentData() { avwCmsApi(ClientData.userInfo_accountPath(), "webGetContent", "GET", { contentId: contentID, sid: ClientData.userInfo_sid(), getType: 1 }, function (data) { totalPage = data.contentData.allPageNum; }, null); }; /* get Json stored page title */ function getJsonDataPageTitle() { avwCmsApi(ClientData.userInfo_accountPath(), "webGetContent", "GET", { contentId: contentID, sid: ClientData.userInfo_sid(), getType: 3 }, function (data) { dataPageTitle = []; for (var nIndex = 0; nIndex < totalPage; nIndex++) { dataPageTitle.push(""); } if (data.contentData) { if (data.contentData.titleInfo) { dataPageTitle = data.contentData.titleInfo; } } }, null); }; /* get Json webGetContent4 */ function getJsonDataType4() { avwCmsApi(ClientData.userInfo_accountPath(), "webGetContent", "GET", { contentId: contentID, sid: ClientData.userInfo_sid(), getType: 4 }, function (data) { dataJsonType4 = data.contentData.linkData; }, null); }; /* get Json webGetContent5 */ function getJsonDataType5() { avwCmsApi(ClientData.userInfo_accountPath(), "webGetContent", "GET", { contentId: contentID, sid: ClientData.userInfo_sid(), getType: 5 }, function (data) { dataJsonType5 = data.contentData.outlineData; }, null); }; /* get url */ function getURL(apiName) { var sysSettings = avwSysSetting(); var url = sysSettings.apiResourceDlUrl; url = format(url, ClientData.userInfo_accountPath()) + '/' + apiName; return url; }; /* get url */ function getURLPageImage(apiName) { var sysSettings = avwSysSetting(); var url = sysSettings.apiUrl; url = format(url, ClientData.userInfo_accountPath()) + '/' + apiName; return url; }; /* read file Json -> get page objects */ function getDataJsonFile() { //get content from JSON avwCmsApi(ClientData.userInfo_accountPath(), "webGetContent", "GET", { sid: ClientData.userInfo_sid(), contentId: contentID, getType: 2 }, function (data) { var JsonFile = data.contentData; pageObjectsData = []; if (JsonFile.vertical) { if (JsonFile.vertical.pages) { pageObjectsData = JsonFile.vertical.pages; } } else if (JsonFile.horizontal) { if (JsonFile.horizontal.pages) { pageObjectsData = JsonFile.horizontal.pages; } } getPageObjectsByPageIndex(pageObjectsData, 0); }, null); }; function getPageObjectsByPageIndex(contentData, nIndexPage) { pageObjects = []; var currentPageObjects; for (var nIndex = 0; nIndex < contentData.length; nIndex++) { if (contentData[nIndex].page == nIndexPage) { currentPageObjects = contentData[nIndex].objects; break; } } if (currentPageObjects != undefined) { for (var nIndex = 0; nIndex < currentPageObjects.length; nIndex++) { /*get object page*/ if (currentPageObjects[nIndex].mediaType == 1) {/*media type = 1 */ var pageObject = getMediaType1(currentPageObjects[nIndex]); /*add object to page */ if ( pageObject != null ) { pageObjects.push(pageObject); } } else if (currentPageObjects[nIndex].mediaType == 2) { /*mediaType = 2 */ var pageObject = getMediaType2(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 3) { /*mediaType = 3*/ var pageObject = getMediaType3(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 4) { /*mediaType = 4*/ var pageObject = getMediaType4(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 5) { /*mediaType = 5*/ var pageObject = getMediaType5(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 6) { /*mediaType = 6*/ var pageObject = getMediaType6(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 7) { /*mediaType = 7*/ var pageObject = getMediaType7(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } else if (currentPageObjects[nIndex].mediaType == 8) { /*mediaType = 8*/ var pageObject = getMediaType8(currentPageObjects[nIndex]); /*add object to page */ pageObjects.push(pageObject); } } } }; /*get data mediaType = 1 */ function getMediaType1(iValueObj) { /* * Action Type = 1 : video * Action Type = 2 : music * Action Type = 3 : url * Action Type = 4 : image preview * Action Type = 5 : jump page * Action Type = 6 : email * Action Type = 7 : * Action Type = 8 : popup * Action Type = 9 : video * Action Type = 10 : content * Action Type = 11 : html */ if ( iValueObj.action != null ) { if ( iValueObj.action.actionType == 10 || iValueObj.action.actionType == 11 || iValueObj.action.actionType == 12 || iValueObj.action.actionType == 13 ) { return null; } } var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; pageObject['actionType'] = iValueObj.action.actionType; pageObject['visible'] = true; /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['id'] = "MediaType1_" + iValueObj.action.actionType; if (iValueObj.action.actionType == 0) { /*get mediaInfo */ if (iValueObj.mediaInfo) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } } else if (iValueObj.action.actionType == 1) { /*get mediaInfo */ if (iValueObj.mediaInfo) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get video file */ if (iValueObj.action.video) { pageObject['mediaFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceName=" + removeExt(iValueObj.action.video); pageObject['media'] = iValueObj.action.video; } else { pageObject['mediaFile'] = ''; pageObject['media'] = ''; } } else if (iValueObj.action.actionType == 2) { /*get mediaInfo */ if (iValueObj.mediaInfo) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get video file */ if (iValueObj.action.music) { if (avwUserEnvObj.browser == 'msie') { pageObject['audioFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceName=" + removeExt(iValueObj.action.music) + "&isIE=true"; } else { pageObject['audioFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceName=" + removeExt(iValueObj.action.music); } } else { pageObject['audioFile'] = ''; } } else if (iValueObj.action.actionType == 3) { /*get browserType */ if (iValueObj.action.browserType) { pageObject['browserType'] = iValueObj.action.browserType; } else { pageObject['browserType'] = ''; } /*get browser */ if (iValueObj.action.browser) { pageObject['browser'] = iValueObj.action.browser; } else { pageObject['browser'] = ''; } /*get linkUrl */ if (iValueObj.action.linkUrl) { pageObject['linkUrl'] = iValueObj.action.linkUrl; } else { pageObject['linkUrl'] = ''; } /*get mediaInfo */ if (iValueObj.mediaInfo) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /* action */ pageObject['action'] = null; } else if (iValueObj.action.actionType == 4) { /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get Image Preview */ var dataResourceImage = iValueObj.action.preview; var dataImageFromResource = []; for (var nIndex = 0; nIndex < dataResourceImage.length; nIndex++) { dataImageFromResource.push(getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceName=" + removeExt(dataResourceImage[nIndex])); } pageObject['imagePreview'] = dataImageFromResource; } else if (iValueObj.action.actionType == 5) { /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get Image Preview */ if (iValueObj.action.jumpPage) { pageObject['jumpPage'] = iValueObj.action.jumpPage; } else { pageObject['jumpPage'] = ''; } } else if (iValueObj.action.actionType == 6) { /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get emailSubject */ if (iValueObj.action.emailSubject) { pageObject['emailSubject'] = iValueObj.action.emailSubject; } else { pageObject['emailSubject'] = ''; } /*get emailAddress */ if (iValueObj.action.emailAddress) { pageObject['emailAddress'] = iValueObj.action.emailAddress; } else { pageObject['emailAddress'] = ''; } } else if (iValueObj.action.actionType == 8) { /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get content */ pageObject['content'] = iValueObj.action.content; } else if (iValueObj.action.actionType == 10) { /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get contentId */ pageObject['contentId'] = iValueObj.action.contentId; /*get pageNo */ pageObject['pageNo'] = iValueObj.action.pageNo; } return pageObject; }; function getMediaType2(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; /*get actionType*/ if (iValueObj.action.actionType) { pageObject['actionType'] = iValueObj.action.actionType; } else { pageObject['actionType'] = ''; } pageObject['id'] = "media" + iValueObj.mediaInfo.resourceId; /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { pageObject['mediaFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; pageObject['media'] = iValueObj.mediaInfo.resourceId; } else { pageObject['mediaFile'] = ''; pageObject['media'] = ''; } /*get mediaInfo */ if (iValueObj.action.embed) { pageObject['embed'] = iValueObj.action.embed; } else { pageObject['embed'] = ''; } pageObject['imageUrl'] = 'img/iPad_video.png'; /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType3(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; /*get actionType*/ if (iValueObj.action.actionType) { pageObject['actionType'] = iValueObj.action.actionType; } else { pageObject['actionType'] = ''; } pageObject['id'] = "audio" + iValueObj.mediaInfo.resourceId; /*get mediaInfo */ if (iValueObj.mediaInfo.resourceId) { if (avwUserEnvObj.browser == 'msie') { pageObject['audioFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId + "&isIE=true"; } else { pageObject['audioFile'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } } else { pageObject['audioFile'] = ''; } /*get playtype */ pageObject['playType'] = iValueObj.action.playType; pageObject['imageUrl'] = 'img/iPad_music.png'; /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType4(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; pageObject['id'] = iValueObj.mediaInfo.id; /*get image List info */ var imageObjects = iValueObj.mediaInfo.media; for (var nIndex = 0; nIndex < imageObjects.length; nIndex++) { /* get image from Json */ imageObjects[nIndex].fileName = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + imageObjects[nIndex].resourceId; } pageObject['dataObjects'] = imageObjects; if (iValueObj.mediaInfo.triggerType) { pageObject['triggerType'] = iValueObj.mediaInfo.triggerType; } else { pageObject['triggerType'] = ''; } /*get image url */ if (imageObjects.length > 0) { pageObject['imageUrl'] = imageObjects[0].fileName; } else { pageObject['imageUrl'] = null; } /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType5(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; pageObject['id'] = iValueObj.mediaInfo.id; /*get video List info */ var videoObjects = iValueObj.mediaInfo.media; for (var nIndex = 0; nIndex < videoObjects.length; nIndex++) { /* get image from Json */ videoObjects[nIndex].fileName = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + videoObjects[nIndex].resourceId; } pageObject['dataObjects'] = videoObjects; /*get image url */ pageObject['imageUrl'] = ''; /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType6(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; /*get actionType*/ if (iValueObj.action.actionType) { pageObject['actionType'] = iValueObj.action.actionType; } else { pageObject['actionType'] = ''; } pageObject['id'] = "trigger" + iValueObj.mediaInfo.resourceId; /*get mediaInfo */ if (iValueObj.mediaInfo) { /* get image from Json */ pageObject['imageUrl'] = getURL("webResourceDownload") + "/?sid=" + ClientData.userInfo_sid() + "&resourceId=" + iValueObj.mediaInfo.resourceId; } else { pageObject['imageUrl'] = null; } /*get index */ if (iValueObj.action.index) { pageObject['index'] = iValueObj.action.index; } else { pageObject['index'] = ''; } /*get target */ if (iValueObj.action.target) { pageObject['target'] = iValueObj.action.target; } else { pageObject['target'] = ''; } /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType7(iValueObj) { var pageObject = []; pageObject['mediaType'] = iValueObj.mediaType; /*get actionType*/ if (iValueObj.action.actionType) { pageObject['actionType'] = iValueObj.action.actionType; } else { pageObject['actionType'] = ''; } pageObject['id'] = "testText"; /*get mediaInfo */ if (iValueObj.mediaInfo.content) { pageObject['content'] = iValueObj.mediaInfo.content; } else { pageObject['content'] = ''; } if (iValueObj.action) { pageObject['action'] = ""; } /*get location */ pageObject['x'] = iValueObj.location.x; pageObject['y'] = iValueObj.location.y; pageObject['width'] = iValueObj.location.width; pageObject['height'] = iValueObj.location.height; pageObject['visible'] = true; return pageObject; }; function getMediaType8(iValueObj) { var pageObject = []; return pageObject; }; /* change size */ function sizingScreen() { var w, h; w = $(window).width(); h = $(window).height(); if (isTouchDevice() == true) { if (avwUserEnvObj.os == "android") { var tempRatio = document.documentElement.clientWidth / window.innerWidth; if (tempRatio <= 1) { w = window.innerWidth; h = window.innerHeight; } else { w = $(window).width(); h = $(window).height(); } } } // Adjust the size of the View if (isFullScreen == true) { sizingFullSize(w, h); } else { sizingNotFull(w, h); } }; /* get page index */ function getPageIndex() { var content = getContent(); return eval(content.pageIndex); }; /* init Image memo */ function initImageMemo() { if (ClientData.IsDisplayMemo() == true) { //change class $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay_hover'); } else { //change class $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay'); } }; /* init Image add memo */ function initImageAddMemo() { if (ClientData.IsAddingMemo() == true) { //change class $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd_hover'); } else { //change class $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); } }; /* memo */ function handleMemo() { $('#pop_up_memo').hide(); if (ClientData.IsDisplayMemo() == true) { ClientData.IsDisplayMemo(false); isCopyMemo = false; drawCanvas(); //change class $('#imgmemo').removeClass(); if (isTouchDevice() == true) { $('#imgmemo').addClass('memoDisplay_device'); } else { $('#imgmemo').addClass('memoDisplay'); } /*handle image add memo */ ClientData.IsAddingMemo(false); //change class $('#imgaddmemo').removeClass(); if (isTouchDevice() == true) { $('#imgaddmemo').addClass('memoAdd_device'); } else { $('#imgaddmemo').addClass('memoAdd'); } } else { ClientData.IsDisplayMemo(true); isCopyMemo = false; drawMemoOnScreen(); //change class $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay_hover'); } }; /* add memo click */ function handleAddMemo(event) { if (ClientData.IsAddingMemo() == true) { ClientData.IsAddingMemo(false); isCopyMemo = false; /* draw memo */ drawMemoOnScreen(); //change class $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); } else { ClientData.IsDisplayMemo(true); ClientData.IsAddingMemo(true); isCopyMemo = false; /* draw memo */ drawMemoOnScreen(); //change class $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay_hover'); $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd_hover'); if (ClientData.memo_copyText()) { $("#overlay").show(); $('#boxAddMemo').css('z-index', '101'); $('#boxAddMemo').css('display', 'block'); $('#boxAddMemo').draggable({ handle: "h1" }); $("#boxAddMemo").offset({ left: event.pageX, top: event.pageY }); $("#divAddMemo").show(); $("#divAddMemo").offset({ left: event.pageX, top: (event.pageY + $('#bookmarkBoxHdMemo').height() - 2) }); } } }; /*check display marking?? */ function initDisplayMarking() { if (ClientData.IsDisplayMarking() == true) { // change class $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_hover'); if (ClientData.IsAddingMarking() == true) { if (ClientData.IsHideToolbar() == false) { ShowMarking(); } disableAllControl(); } else { //change image $('#imgmarkingtoolbar').removeClass(); $('#imgmarkingtoolbar').addClass('markingToolbar'); } } else { $("#dlgMarking").hide(); // change class $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking'); $('#draw_canvas').css('display', 'none'); //change image $('#imgmarkingtoolbar').removeClass(); $('#imgmarkingtoolbar').addClass('markingToolbar'); } }; /* display canvas draw*/ function displayCanvasDraw() { /*set flag no image */ isDrawing = false; /* clear canvas */ context_draw.clearRect(0, 0, canvas_draw.width, canvas_draw.height); context_draw.save(); /* set draw image if exist */ var dataMarking = ClientData.MarkingData(); for (var nIndex = 0; nIndex < dataMarking.length; nIndex++) { if (dataMarking[nIndex].contentid == contentID && dataMarking[nIndex].pageNo == changePageIndex(getPageIndex())) { var img = new Image(); img.onload = function () { context_draw.drawImage(img, 0, 0, canvas_draw.width, canvas_draw.height); /*set flag has image */ isDrawing = true; }; img.src = dataMarking[nIndex].content; } } context_draw.restore(); /* visible canvas using for draw */ $('#draw_canvas').css('display', 'block'); }; /* Marking toolbar*/ function imgmarking_click() { if (ClientData.IsDisplayMarking() == false) { ClientData.IsDisplayMarking(true); drawCanvas(); $("#dlgMarking").hide(); // change class /*$('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_hover');*/ } else { ClientData.IsDisplayMarking(false); ClientData.IsAddingMarking(false); $('#draw_canvas').css('display', 'none'); /*// change class $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking');*/ drawCanvas(); } }; /* get data marking from local storage */ function getDataClientStorage() { /*set default size and color */ if (!ClientData.penOpt_size()) { ClientData.penOpt_size(5); } if (!ClientData.penOpt_color()) { ClientData.penOpt_color("fe0000"); } if (!ClientData.maker_size()) { ClientData.maker_size(5); } if (!ClientData.maker_color()) { ClientData.maker_color("f8ff00"); } if (!ClientData.erase_size()) { ClientData.erase_size(5); } isAddingMarking = ClientData.IsAddingMarking(); penSize = ClientData.penOpt_size(); penColor = ClientData.penOpt_color(); makerSize = ClientData.maker_size(); makerColor = ClientData.maker_color(); eraseSize = ClientData.erase_size(); markingType = ClientData.MarkingType(); }; /* handle draw canvas */ function handleDrawCanvas() { disableButtonMarking(); if (ClientData.IsAddingMarking() == true) { if (ClientData.IsHideToolbar() == true) { ClientData.IsAddingMarking(true); ClientData.IsDisplayMarking(true); ClientData.IsHideToolbar(false); ShowMarking(); $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_off'); } } else { ClientData.IsAddingMarking(true); ClientData.IsDisplayMarking(true); ClientData.IsHideToolbar(false); /* fit page */ screenFit(); /* show marking */ ShowMarking(); /* display fullscreen */ /*var w = $("#wrapper").width(); var h = $("#wrapper").height();*/ handleDisplayToolbar(); /* invisible button fullscreen */ $('#footer_toolbar_2').hide(); /* draw again */ drawCanvas(); displayCanvasDraw(); disableAllControl(); // change class /*$('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_hover'); $('#imgmarkingtoolbar').removeClass(); $('#imgmarkingtoolbar').addClass('markingToolbar_hover');*/ } /* get data from local */ getDataClientStorage(); }; /*disable all control on page */ function disableAllControl() { /* set cursor pointer*/ $("#imgHome").css('cursor', 'default'); $("#imgBack").css('cursor', 'default'); $("#listbookmark").css('cursor', 'default'); $("#imgbookmark").css('cursor', 'default'); $("#listindex").css('cursor', 'default'); $("#copytext").css('cursor', 'default'); $("#imgmemo").css('cursor', 'default'); $("#imgaddmemo").css('cursor', 'default'); $("#imgmarking").css('cursor', 'default'); $("#imgmarkingtoolbar").css('cursor', 'default'); $("#firstpage").css('cursor', 'default'); $("#prevpage").css('cursor', 'default'); $("#nextpage").css('cursor', 'default'); $("#lastpage").css('cursor', 'default'); $("#zoomfit").css('cursor', 'default'); $("#zoomin").css('cursor', 'default'); $("#zoomout").css('cursor', 'default'); $("#control_screen").css('cursor', 'default'); $("#control_screen_2").css('cursor', 'default'); $("#slider_page").css('cursor', 'default'); $(".ui-slider-handle").css('cursor', 'default'); $('#imgHome').unbind('click'); $('#imgHome').removeClass(); $('#imgHome').addClass('home_off'); /* back button */ $('#imgBack').unbind('click'); $('#imgBack').removeClass(); $('#imgBack').addClass('back_off'); /*list bookmark */ $('#listbookmark').unbind('click'); $('#listbookmark').removeClass(); $('#listbookmark').addClass('bmList_off'); $('#imgbookmark').unbind('click'); $('#imgbookmark').removeClass(); $('#imgbookmark').addClass('bmAdd_off'); $('#listindex').unbind('click'); $('#listindex').removeClass(); $('#listindex').addClass('index_off'); $('#copytext').unbind('click'); $('#copytext').removeClass(); $('#copytext').addClass('copy_off'); /* imgage display memo */ $('#imgmemo').unbind('click'); $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay_off'); /* image add memo */ $('#imgaddmemo').unbind('click'); $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd_off'); $('#imgmarking').unbind('click'); $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_off'); $('#imgmarkingtoolbar').unbind('click'); $('#imgmarkingtoolbar').removeClass(); $('#imgmarkingtoolbar').addClass('markingToolbar_off'); $('#firstpage').unbind('click'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin_off'); $('#prevpage').unbind('click'); $('#prevpage').removeClass(); $('#prevpage').addClass('prev_off'); $('#nextpage').unbind('click'); $('#nextpage').removeClass(); $('#nextpage').addClass('next_off'); $('#lastpage').unbind('click'); $('#lastpage').removeClass(); $('#lastpage').addClass('last_off'); $('#zoomfit').unbind('click'); $('#zoomfit').removeClass(); $('#zoomfit').addClass('fit_off'); $('#zoomin').unbind('click'); $('#zoomin').removeClass(); $('#zoomin').addClass('expansion_off'); $('#zoomout').unbind('click'); $('#zoomout').removeClass(); $('#zoomout').addClass('reduction_off'); if (avwUserEnvObj.os != "android") { $("#slider_page").slider("option", "disabled", true); } disable('#txtSearch', '#txtSlider'); $('#button_next_canvas').css('display', 'none'); $('#button_pre_canvas').css('display', 'none'); }; /*enable all control on page */ function enableAllControl() { disableAllControl(); /* set cursor pointer*/ $("#imgHome").css('cursor', 'pointer'); $("#imgBack").css('cursor', 'pointer'); $("#listbookmark").css('cursor', 'pointer'); $("#imgbookmark").css('cursor', 'pointer'); $("#listindex").css('cursor', 'pointer'); $("#copytext").css('cursor', 'pointer'); $("#imgmemo").css('cursor', 'pointer'); $("#imgaddmemo").css('cursor', 'pointer'); $("#imgmarking").css('cursor', 'pointer'); $("#imgmarkingtoolbar").css('cursor', 'pointer'); $("#firstpage").css('cursor', 'pointer'); $("#prevpage").css('cursor', 'pointer'); $("#nextpage").css('cursor', 'pointer'); $("#lastpage").css('cursor', 'pointer'); $("#zoomfit").css('cursor', 'pointer'); // $("#zoomin").css('cursor', 'pointer'); // $("#zoomout").css('cursor', 'pointer'); $("#control_screen").css('cursor', 'pointer'); $("#control_screen_2").css('cursor', 'pointer'); $("#slider_page").css('cursor', 'pointer'); $(".ui-slider-handle").css('cursor', 'pointer'); $("#liAddMemo").css('cursor', 'pointer'); $("#liCopyMemo").css('cursor', 'pointer'); $("#liDeleteMemo").css('cursor', 'pointer'); $("#control_screen").removeClass(); $("#control_screen_2").removeClass(); $('#imgHome').bind('click', imgHome_click); $('#imgHome').removeClass(); $('#imgBack').bind('click', imgBack_click); $('#imgBack').removeClass(); /*list bookmark */ $('#listbookmark').bind('click', showListBookMark); $('#listbookmark').removeClass(); $('#imgbookmark').bind('click', bookmarkPage); $('#imgbookmark').removeClass(); $('#listindex').bind('click', showListPageIndex); $('#listindex').removeClass(); $('#copytext').bind('click', showCopyText); $('#copytext').removeClass(); /* image memo */ $('#imgmemo').bind('click', handleMemo); $('#imgmemo').removeClass(); /* image add memo */ $('#imgaddmemo').bind('click', handleAddMemo); $('#imgaddmemo').removeClass(); $('#imgmarking').bind('click', imgmarking_click); $('#imgmarking').removeClass(); if (ClientData.serviceOpt_marking() == 'Y') { $('#imgmarkingtoolbar').bind('click', handleDrawCanvas); $('#imgmarkingtoolbar').removeClass(); } checkDisableButtonZoom(); $("#slider_page").slider("option", "disabled", false); enable('#txtSearch', '#txtSlider'); if (avwUserEnvObj.os != "ipad" && avwUserEnvObj.os != "android") { $('#button_next_canvas').css('display', 'block'); $('#button_pre_canvas').css('display', 'block'); } if (isTouchDevice() == true) {/* set css for device */ $('#imgHome').addClass('home_device'); $('#imgBack').addClass('back_device'); $("#control_screen").addClass('toolbar_device'); $("#control_screen_2").addClass('toolbar_device'); var nBookmarkId = isExistBookmark(); if (nBookmarkId == -1) { $('#imgbookmark').addClass('bmAdd_device'); } else { $('#imgbookmark').addClass('bmAdd_hover'); } if (isDisplayBookMarkList == true) { $('#listbookmark').addClass('bmList_hover'); } else { $('#listbookmark').addClass('bmList_device'); } if (isDisplayCopyText == true) { $('#copytext').addClass('copy_hover'); } else { $('#copytext').addClass('copy_device'); } if (isDisplayListIndex == true) { $('#listindex').addClass('index_hover'); } else { $('#listindex').addClass('index_device'); } if (ClientData.IsDisplayMemo() == true) { $('#imgmemo').addClass('memoDisplay_hover'); } else { $('#imgmemo').addClass('memoDisplay_device'); } if (ClientData.IsAddingMemo() == true) { $('#imgaddmemo').addClass('memoAdd_hover'); } else { $('#imgaddmemo').addClass('memoAdd_device'); } if (ClientData.IsDisplayMarking() == true) { $('#imgmarking').addClass('marking_hover'); } else { $('#imgmarking').addClass('marking_device'); } if (ClientData.serviceOpt_marking() == 'Y') { if (ClientData.IsAddingMarking() == true) { $('#imgmarkingtoolbar').addClass('markingToolbar_hover'); } else { $('#imgmarkingtoolbar').addClass('markingToolbar_device'); } } } else { /* set css for PC */ $('#imgHome').addClass('home'); $('#imgBack').addClass('back'); /*$('#firstpage').addClass('begin'); $('#prevpage').addClass('prev'); $('#nextpage').addClass('next'); $('#lastpage').addClass('last');*/ $("#control_screen").addClass('toolbar'); $("#control_screen_2").addClass('toolbar'); var nBookmarkId = isExistBookmark(); if (nBookmarkId == -1) { $('#imgbookmark').addClass('bmAdd'); } else { $('#imgbookmark').addClass('bmAdd_hover'); } if (isDisplayBookMarkList == true) { $('#listbookmark').addClass('bmList_hover'); } else { $('#listbookmark').addClass('bmList'); } if (isDisplayCopyText == true) { $('#copytext').addClass('copy_hover'); } else { $('#copytext').addClass('copy'); } if (isDisplayListIndex == true) { $('#listindex').addClass('index_hover'); } else { $('#listindex').addClass('index'); } if (ClientData.IsDisplayMemo() == true) { $('#imgmemo').addClass('memoDisplay_hover'); } else { $('#imgmemo').addClass('memoDisplay'); } if (ClientData.IsAddingMemo() == true) { $('#imgaddmemo').addClass('memoAdd_hover'); } else { $('#imgaddmemo').addClass('memoAdd'); } if (ClientData.IsDisplayMarking() == true) { $('#imgmarking').addClass('marking_hover'); } else { $('#imgmarking').addClass('marking'); } if (ClientData.serviceOpt_marking() == 'Y') { if (ClientData.IsAddingMarking() == true) { $('#imgmarkingtoolbar').addClass('markingToolbar_hover'); } else { $('#imgmarkingtoolbar').addClass('markingToolbar'); } } } checkExistNextPrePage(); }; /* bookmark page */ function bookmarkPage() { ClientData.isChangedBookmark(true); var nBookmarkId = isExistBookmark(); if (nBookmarkId == -1) { //case not exist var enBookmark = new BookMarkEntity(); enBookmark.contentid = contentID; enBookmark.pageNo = changePageIndex(getPageIndex()); enBookmark.contentTitle = dataWebContentPage.contentTitle; enBookmark.contentTitleKana = dataWebContentPage.contentTitleKana; var listBM = []; if (ClientData.BookMarkData().length > 0) { listBM = ClientData.BookMarkData(); } listBM.push(enBookmark); ClientData.BookMarkData(listBM); //change class $('#imgbookmark').removeClass(); $('#imgbookmark').addClass('bmAdd_hover'); } else { //delete bookmark page var listBM = []; listBM = ClientData.BookMarkData(); listBM.splice(nBookmarkId, 1); ClientData.BookMarkData(listBM); //change class $('#imgbookmark').removeClass(); if (isTouchDevice() == true) { $('#imgbookmark').addClass('bmAdd_device'); } else { $('#imgbookmark').addClass('bmAdd'); } } }; /* function changePage Index->pageno */ function changePageIndex(page_index) { return dataWebContentPage.pages[page_index].pageNo; }; /* function change PageNo -> pageIndex */ function changePageNo(page_no) { var dataContent = dataWebContentPage.pages; for (var nIndex = 0; nIndex < dataContent.length; nIndex++) { if (dataContent[nIndex].pageNo == page_no) { return nIndex; } } return -1; }; /* check page had bookmark */ function isExistBookmark() { var nIndexBookmark = -1; var listBM = []; if (ClientData.BookMarkData().length > 0) { //get list bookmark listBM = ClientData.BookMarkData(); for (var nIndex = 0; nIndex < listBM.length; nIndex++) { //check bookmark belong contentID if (listBM[nIndex].contentid == contentID && listBM[nIndex].pageNo == changePageIndex(getPageIndex())) { return nIndex; } } } return nIndexBookmark; }; /* get list bookmark of content */ function getBookMarkListByContentID() { var bmList = []; var bmListResult = []; bmList = ClientData.BookMarkData(); for (var nIndex = 0; nIndex < bmList.length; nIndex++) { if (bmList[nIndex].contentid == contentID) { bmListResult.push(bmList[nIndex]); } } return bmListResult; }; /*get API WebContentPage */ function handleAPIWebContentPage(dataJson, pos) { var bmList = []; bmList = getBookMarkListByContentID(); var dataStored = arrThumbnailsLoaded; var sPageNo = []; var nIndexBookMark = -1; var lstPageNoBookMark = []; $('#bookmarkBoxHdBM').children().remove(); $('#bookmarkBoxHdBM').html('<a id="bookmarkClosing" class="delete" > </a>'); $("#bookmarkClosing").click(closeBookmarkBox); $('#bookmarkBoxHdBM').append(i18nText('txtShioriCtnLs')); $('#boxBookMark').css('z-index', '101'); $('#boxBookMark').css('display', 'block'); $('#boxBookMark').draggable({ handle: "h1" }); $("#boxBookMark").offset({ left: pos[0], top: pos[1] }); $("#divListBookmark").show(); $("#divListBookmark").offset({ left: pos[0], top: (pos[1] + $('#bookmarkBoxHdBM').height()) }); $('#divListBookmark').children().remove(); for (var nIndex = 0; nIndex < bmList.length; nIndex++) { nIndexBookMark = -1; var contentPage = dataJson.pages; for (var nIndexJson = 0; nIndexJson < contentPage.length; nIndexJson++) { if (contentPage[nIndexJson].pageNo == bmList[nIndex].pageNo) { nIndexBookMark = nIndexJson; break; } } if (nIndexBookMark != -1) { /* page exist */ var nStored = checkDataLoaded(bmList[nIndex].pageNo, dataStored); if (nStored != -1) { /* data loaded */ $('#divListBookmark').append( ' <li id="' + changePageNo(bmList[nIndex].pageNo) + '">' + ' <img id="img_bookmark_' + bmList[nIndex].pageNo + '" class="imgbox" src="' + formatStringBase64(dataStored[nStored].pageThumbnail) + '"/>' + ' <span class="mdltext">' + i18nText('txtPage') + (changePageNo(bmList[nIndex].pageNo) + 1) + '<br /> ' + truncate(htmlEncode(contentPage[nIndexBookMark].pageText), 20) + ' </span>' + ' </li>' ); //Resize Image var imgTemp = new Image(); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(dataStored[nStored].pageThumbnail); } else { /* data not loaded*/ $('#divListBookmark').append( ' <li id="' + changePageNo(bmList[nIndex].pageNo) + '">' + ' <img id="img_bookmark_' + bmList[nIndex].pageNo + '" class="imgbox" src="img/view_loading.gif" />' + ' <span class="mdltext">' + i18nText('txtPage') + (changePageNo(bmList[nIndex].pageNo) + 1) + '<br /> ' + truncate(htmlEncode(contentPage[nIndexBookMark].pageText), 20) + ' </span>' + ' </li>' ); //Resize Image var imgTemp = new Image(); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = "img/view_loading.gif"; /*avwCmsApiSync(ClientData.userInfo_accountPath(), "webContentPage", "GET", {sid:ClientData.userInfo_sid(),contentId: contentID,pageNos: bmList[nIndex].pageNo, thumbnailFlg:1}, function(data){ getDataLoaded(data.pages); //Resize Image var imgTemp = new Image(); $('#img_bookmark_' +data.pages[0].pageNo).attr('src',formatStringBase64(data.pages[0].pageThumbnail)); imgTemp.onload = function(){ if(imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(data.pages[0].pageThumbnail); }, null); */ lstPageNoBookMark.push(bmList[nIndex].pageNo); } } else { /* page deleted */ $('#divListBookmark').append( ' <li id="' + changePageNo(bmList[nIndex].pageNo) + '">' + ' <span class="mdltext">' + ' <span>' + i18nText('txtPage') + bmList[nIndex].pageNo + '</span> <br /> ' + ' </span>' + ' </li>' + ' <li>' + ' <span class="mdltext">' + ' <span style="color:red">' + i18nText('msgShioriDeleted') + '</span>' + ' </span>' + ' </li>' ); } } if (lstPageNoBookMark.length > 0) { isSendingData = true; loadDataBookmark(lstPageNoBookMark); } }; function loadDataBookmark(lstPageNo) { if (isSendingData == true) { avwCmsApi(ClientData.userInfo_accountPath(), "webContentPage", "GET", { sid: ClientData.userInfo_sid(), contentId: contentID, pageNos: lstPageNo[0], thumbnailFlg: 1 }, function (data) { getDataLoaded(data.pages); //Resize Image var imgTemp = new Image(); $('#img_bookmark_' + data.pages[0].pageNo).attr('src', formatStringBase64(data.pages[0].pageThumbnail)); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(data.pages[0].pageThumbnail); lstPageNo = jQuery.grep(lstPageNo, function (value) { return value != lstPageNo[0]; }); if (lstPageNo.length > 0) { loadDataBookmark(lstPageNo); } else { isSendingData = false; } }, null); } }; /* check data has load */ function checkDataLoaded(nPageNo, arrData) { var nIndex = -1; for (var n = 0; n < arrData.length; n++) { if (arrData[n].pageNo == nPageNo) { nIndex = n; break; } } return nIndex; }; /* get data load*/ function getDataLoaded(data) { var isExist = false; for (var i = 0; i < data.length; i++) { isExist = false; for (var n = 0; n < arrThumbnailsLoaded.length; n++) { if (data[i].pageNo == arrThumbnailsLoaded[n].pageNo) { isExist = true; break; } } /* insert if not exist */ if (isExist == false) { arrThumbnailsLoaded.push(data[i]); } } /* sort data */ arrThumbnailsLoaded.sort(function (a, b) { var a1 = a.pageNo, b1 = b.pageNo; if (a1 == b1) return 0; return a1 > b1 ? 1 : -1; }); }; /* event for list bookmark: changePageNo */ function clickBookmark() { changePage($(this).attr('id')); /* close popup */ // $('#divListBookmark').dialog("close"); $("#overlay").hide(); $('#listbookmark').removeClass(); $('#listbookmark').addClass('bmList'); $("#divListBookmark").hide(); $('#boxBookMark').css('display', 'none'); }; /* event close list bookmark box */ function closeBookmarkBox() { $("#divListBookmark").hide(); isSendingData = false; $('#boxBookMark').css('display', 'none'); isDisplayBookMarkList = false; /* unlock dialog overlay */ $("#overlay").hide(); //change class $('#listbookmark').removeClass(); if (isTouchDevice() == true) { $('#listbookmark').addClass('bmList_device'); } else { $('#listbookmark').addClass('bmList'); } }; /* sort list bookmark */ function sortBookmarkList() { var bmList = []; bmList = ClientData.BookMarkData(); bmList.sort(function (a, b) { var a1 = a.pageNo, b1 = b.pageNo; if (a1 == b1) return 0; return a1 > b1 ? 1 : -1; }); ClientData.BookMarkData(bmList); }; /* get list info bookmark */ function getBookmarklist(pos) { var isExistBookMarkInContent = false; sortBookmarkList(); var bmList = []; bmList = ClientData.BookMarkData(); for (var nIndex = 0; nIndex < bmList.length; nIndex++) { if (bmList[nIndex].contentid == contentID) { isExistBookMarkInContent = true; break; } } if (isExistBookMarkInContent == false) { $('#divListBookmark').children().remove(); $('#divListBookmark').append('<span class="last">' + i18nText('msgShioriNotExists') + '</span>'); // $("#divListBookmark").dialog({ // show: "blind", // modal: true, // resizable:false, // width: WIDTH_DIALOG_BOOKMARK, // height: HEIGHT_DIALOG_BOOKMARK_NO_BOOKMARK, // title: i18nText('txtShioriCtnLs'), // position: pos}); //title start $('#bookmarkBoxHdBM').children().remove(); $('#bookmarkBoxHdBM').html('<a id="bookmarkClosing" class="delete" > </a>'); $("#bookmarkClosing").click(closeBookmarkBox); $('#bookmarkBoxHdBM').append(i18nText('txtShioriCtnLs')); //title end //lockLayout(); $('#boxBookMark').css('z-index', '101'); $('#boxBookMark').css('display', 'block'); $('#boxBookMark').draggable({ handle: "h1" }); $("#boxBookMark").offset({ left: pos[0], top: pos[1] }); $("#divListBookmark").show(); $("#divListBookmark").offset({ left: pos[0], top: (pos[1] + $('#bookmarkBoxHdBM').height()) }); } else { //display dialog // $("#divListBookmark").dialog({ // show: "blind", // modal: true, // width: WIDTH_DIALOG_BOOKMARK, // height:HEIGHT_DIALOG_BOOKMARK, // resizable:false, // title: i18nText('txtShioriCtnLs'), // position: pos}); handleAPIWebContentPage(dataWebContentPage, pos) } }; /* init Image bookmark */ function initImageBookmark() { if (isExistBookmark() == -1) { //change class $('#imgbookmark').removeClass(); $('#imgbookmark').addClass('bmAdd_off'); } else { //change class $('#imgbookmark').removeClass(); $('#imgbookmark').addClass('bmAdd'); } }; /*event click show dialog bookmark */ function showListBookMark(e) { var array = [e.pageX, e.pageY]; isDisplayBookMarkList = true; //change class $('#listbookmark').removeClass(); $('#listbookmark').addClass('bmList_hover'); /* display dialog overlay */ $("#overlay").show(); getBookmarklist(array); }; /*event click show dialog index*/ function showListPageIndex(e) { isDisplayListIndex = true; var array = [e.pageX, e.pageY]; getPageIndexJson(array); //change class $('#listindex').removeClass(); $('#listindex').addClass('index_hover'); /* display dialog overlay */ $("#overlay").show(); }; /* event close list bookmark box */ function closeIndexBox() { isDisplayListIndex = false; $("#divListIndex").hide(); $('#boxIndex').css('display', 'none'); //change class $('#listindex').removeClass(); if (isTouchDevice() == true) { $('#listindex').addClass('index_device'); } else { $('#listindex').addClass('index'); } /* unlock dialog overlay */ $("#overlay").hide(); }; /* get list info bookmark */ function getPageIndexJson(pos) { if (dataJsonType5.length > 0) { $('#divListIndex').children().remove(); // $("#divListIndex").dialog({ // show: "blind", // modal: true, // width: WIDTH_DIALOG_INDEX, // height:HEIGHT_DIALOG_INDEX, // resizable:false, // closeOnEscape: false, // title: i18nText('txtIndex'), // position: pos}); //title start $('#indexBoxHdIndex').children().remove(); $('#indexBoxHdIndex').html('<a id="indexClosing" class="delete" > </a>'); $("#indexClosing").click(closeIndexBox); $('#indexBoxHdIndex').append(i18nText('txtIndex')); //title end //lockLayout(); $('#boxIndex').css('z-index', '101'); $('#boxIndex').css('display', 'block'); $('#boxIndex').draggable({ handle: "h1" }); $("#boxIndex").offset({ left: pos[0], top: pos[1] }); $("#divListIndex").show(); $("#divListIndex").offset({ left: pos[0], top: (pos[1] + $('#indexBoxHdIndex').height()) }); //set data for dialog index var dataContent = dataJsonType5; var arrData = new Array(); $.each(dataContent, function (i, value) { if (dataContent[i].level == 0) { //add parent node var node = new TreeNode(); node.IsCategory = true; //node.Text = htmlEncode(truncateByBytes(dataContent[i].title, 30)); /* check data text */ if (getBytes(dataContent[i].title) > 30) { node.Text = htmlEncode(truncateByBytes(dataContent[i].title, 30)) + '...'; } else { node.Text = htmlEncode(dataContent[i].title); } node.id = dataContent[i].ID; node.Value = dataContent[i].destPageNumber; AddChidrenNode(node, dataContent); arrData.push(node); } }); var tree = new TreeViewIndex(); tree.IsShowTotal = false; tree.Show("divListIndex", arrData, "listIndex_Callback"); $("#divListIndex").treeview(); $(".treeview, .treeview ul").css('padding', '0px 8px 0'); } else { $('#divListIndex').children().remove(); $('#divListIndex').append('<span style="color:#333333; font-size:12px; cursor:default; text-decoration:none;">' + i18nText('msgNoIndex') + '</span>'); // //show dialog index // $("#divListIndex").dialog({ // show: "blind", // modal: true, // resizable:false, // width: WIDTH_DIALOG_INDEX, // height:HEIGHT_DIALOG_INDEX_NO_INDEX, // title: i18nText('txtIndex'), // position: pos}); //title start $('#indexBoxHdIndex').children().remove(); $('#indexBoxHdIndex').html('<a id="indexClosing" class="delete" > </a>'); $("#indexClosing").click(closeIndexBox); $('#indexBoxHdIndex').append(i18nText('txtIndex')); //title end //lockLayout(); $('#boxIndex').css('z-index', '101'); $('#boxIndex').css('display', 'block'); $('#boxIndex').draggable({ handle: "h1" }); $("#boxIndex").offset({ left: pos[0], top: pos[1] }); $("#divListIndex").show(); $("#divListIndex").offset({ left: pos[0], top: (pos[1] + $('#indexBoxHdIndex').height()) }); } }; /* create child node for list page index */ function AddChidrenNode(nodeParent, data) { var dataChild = []; $.each(data, function (index, value) { if (data[index].parentID == nodeParent.id) { dataChild.push(data[index]); } }); $.each(dataChild, function (i, value) { //add child node var item = new TreeNode(); item.IsCategory = false; //item.Text = htmlEncode(truncateByBytes(dataChild[i].title,30)); /* check data text */ if (getBytes(dataChild[i].title) > 30) { item.Text = htmlEncode(truncateByBytes(dataChild[i].title, 30)) + '...'; } else { item.Text = htmlEncode(dataChild[i].title); } item.id = dataChild[i].ID; item.Value = dataChild[i].destPageNumber; for (var nIndex = 0; nIndex < data.length; nIndex++) { if (data[nIndex].parentID == item.id) { item.IsCategory = true; break; } } AddChidrenNode(item, data); nodeParent.ChildNodes.push(item); }); }; /* event click on list index */ function listIndex_Callback(selectedNode) { var node = new TreeNode(); node = selectedNode; // Hide dialog index $("#divListIndex").dialog('close'); changePage(node.Value - 1); }; /*event click show copy text */ function showCopyText(e) { /* display dialog overlay */ if (avwUserEnvObj.os == "android") { copyText(); } else { isDisplayCopyText = true; //change class $('#copytext').removeClass(); $('#copytext').addClass('copy_hover'); $("#overlay").show(); var array = [e.pageX, e.pageY]; var contentPage = dataWebContentPage.pages; handleCopyTextData(contentPage, array) } }; function copyText() { var w = window.open('contentview_textcopy.html'); }; function getText() { /* init var page text */ var data = dataWebContentPage.pages; var sPageText = ''; var w = $("#wrapper").width() / 2 - $('#boxCopyText').width() / 2; var h = $("#wrapper").height() / 2 - $('#boxCopyText').height() / 2; for (var nIndex = 0; nIndex < data.length; nIndex++) { /* get text of current page */ if (data[nIndex].pageNo == changePageIndex(getPageIndex())) { sPageText = htmlEncode(data[nIndex].pageText); break; } } if (sPageText == '') { return { text: i18nText('txtNoTextCopy'), title: i18nText('txtTextCopy') + ' | ' + i18nText('sysAppTitle') }; } else { var strPattern = "\n"; var strTemp = sPageText; strTemp = strTemp.replaceAll(strPattern, "<br/>"); strTemp += "<br/>"; return { text: strTemp, title: i18nText('txtTextCopy') + ' | ' + i18nText('sysAppTitle') }; } }; /* event close copy text box */ function closeCopyTextBox() { isDisplayCopyText = false; $("#divCopyText").hide(); $('#boxCopyText').css('display', 'none'); //change class $('#copytext').removeClass(); if (isTouchDevice() == true) { $('#copytext').addClass('copy_device'); } else { $('#copytext').addClass('copy'); } /* unlock dialog overlay */ $("#overlay").hide(); }; /* handle data copy text */ function handleCopyTextData(data, pos) { /* init var page text */ var sPageText = ''; var w = $("#wrapper").width() / 2 - $('#boxCopyText').width() / 2; var h = $("#wrapper").height() / 2 - $('#boxCopyText').height() / 2; for (var nIndex = 0; nIndex < data.length; nIndex++) { /* get text of current page */ if (data[nIndex].pageNo == changePageIndex(getPageIndex())) { sPageText = htmlEncode(data[nIndex].pageText); break; } } if (sPageText == '') { /* create data on dialog */ $('#divCopyText').children().remove(); $('#divCopyText').append('<li class="last">' + i18nText('txtNoTextCopy') + '</li>'); // $("#divCopyText").dialog({ // show: "blind", // modal: true, // resizable:false, // width: WIDTH_DIALOG_COPYTEXT, // height: HEIGHT_DIALOG_COPYTEXT_NO_COPYTEXT, // title: i18nText('txtTextCopy'), // position: pos}); //title start $('#bookmarkBoxHdCT').children().remove(); $('#bookmarkBoxHdCT').html('<a id="copyTextClosing" class="delete" style="padding-top:0px;"> </a>'); $("#copyTextClosing").click(closeCopyTextBox); $('#bookmarkBoxHdCT').append(i18nText('txtTextCopy')); //title end //lockLayout(); $('#boxCopyText').css('z-index', '101'); $('#boxCopyText').css('display', 'block'); $('#boxCopyText').draggable({ handle: "h1" }); $("#boxCopyText").offset({ left: w, top: h }); $("#divCopyText").show(); //$("#divCopyText").offset({left:"45%",top:(45% + $('#bookmarkBoxHdCT').height())}); //$("#boxCopyText").offset({left:"45%",top:"45%"}); } else { /* create data on dialog */ $('#divCopyText').children().remove(); //$('#divCopyText').append('<li class="last">' + sPageText + '</li>'); var strPattern = "\n"; var strTemp = sPageText; strTemp = strTemp.replaceAll(strPattern, "<br/>"); strTemp += "<br/>"; $('#divCopyText').append('<div class="last" id="txtTextCopy" style="word-wrap:break-word;line-height: 20px">' + strTemp + '</div>'); /* display dialog */ // $("#divCopyText").dialog({ // show: "blind", // modal: true, // width: WIDTH_DIALOG_COPYTEXT, // height:HEIGHT_DIALOG_COPYTEXT, // resizable: false, // title: i18nText('txtTextCopy'), // position: pos}); //title start $('#bookmarkBoxHdCT').children().remove(); $('#bookmarkBoxHdCT').html('<a id="copyTextClosing" class="delete" style="padding-top:0px;"> </a>'); $("#copyTextClosing").click(closeCopyTextBox); $('#bookmarkBoxHdCT').append(i18nText('txtTextCopy')); //title end //lockLayout(); $('#boxCopyText').css('z-index', '101'); $('#boxCopyText').css('display', 'block'); //$('#boxCopyText').draggable({ handle: "h1" }); $("#boxCopyText").offset({ left: w, top: h }); $("#divCopyText").show(); //$("#divCopyText").offset({left:w,top:(h + $('#bookmarkBoxHdCT').height())}); //$("#boxCopyText").offset({left:"45%",top:"45%"}); /*$('#bookmarkBoxHdCT').mousedown(function(){ $('#boxCopyText').draggable({ handle: "h1" }); }); $('#bookmarkBoxHdCT').mouseup(function(){ $('#boxCopyText').unbind('draggable'); });*/ if (isTouchDevice() == true) { document.getElementById('bookmarkBoxHdCT').addEventListener('touchstart', eventStart_CopyText, false); document.getElementById('bookmarkBoxHdCT').addEventListener('touchend', eventEnd_CopyText, false); } else { document.getElementById('bookmarkBoxHdCT').addEventListener('mousedown', eventStart_CopyText, false); document.getElementById('bookmarkBoxHdCT').addEventListener('mouseup', eventEnd_CopyText, false); } /*$('#boxCopyText h1').touchstart(function(e){ }); $('#boxCopyText h1').touchend(function(e){ });*/ } }; /* event touch start header copytext */ function eventStart_CopyText(e) { e.preventDefault(); $('#boxCopyText').draggable({ handle: "h1" }); }; /* event touch end header copytext */ function eventEnd_CopyText(e) { e.preventDefault(); $("#boxCopyText").draggable("destroy"); }; /* get data using for search */ function getSearchDataFromJson() { //get data from JSON file var arrPageNo = ''; for (var nIndex = 0; nIndex < totalPage; nIndex++) { if (nIndex == 0) { arrPageNo += (nIndex + 1); } else { arrPageNo += "," + (nIndex + 1); } } avwCmsApi(ClientData.userInfo_accountPath(), "webContentPage", "GET", { sid: ClientData.userInfo_sid(), contentId: contentID, thumbnailFlg: 0 }, function (data) { contentName = data.contentTitle; dataWebContentPage = data; }, null); }; /*event click show dialog search*/ function showListSearchResult() { $('#txtSearch').keydown(function (e) { if (e.keyCode == 13) { searchHandle(); /* display dialog overlay */ //$("#overlay").show(); return false; } }); }; /* event close searching result box */ function closeSearchingBox() { isSendingData = false; $("#divSearchResult").hide(); $('#boxSearching').css('display', 'none'); /* unlock dialog overlay */ //$("#overlay").hide(); }; /*format Image string */ function formatStringBase64(imgStr) { var outputString = 'data:image/jpeg;base64,' + imgStr; return outputString; }; /* cut string */ function truncate(strInput, length) { if (strInput.length <= length) { return strInput; } else { return strInput.substring(0, length) + "..."; } }; /* search content */ function searchHandle() { var w = $("#main").width() - $(".hdRcolumn").width(); var pos = [w, marginY]; if ($('#txtSearch').val() != '') { var dataStored = arrThumbnailsLoaded; var contentPage = dataWebContentPage.pages; var myRegExp = new RegExp($('#txtSearch').val()); var sPageNo = []; var lstPageNo = []; var isExistData = false; for (var nIndex = 0; nIndex < contentPage.length; nIndex++) { if (myRegExp.test(contentPage[nIndex].pageText)) { //searchResult.push(contentPage[nIndex]); sPageNo.push(contentPage[nIndex]); } } if (sPageNo.length > 0) { //title start $('#bookmarkBoxHdSearching').children().remove(); $('#bookmarkBoxHdSearching').html('<a id="searchingResultClosing" class="delete" > </a>'); $("#searchingResultClosing").click(closeSearchingBox); $('#bookmarkBoxHdSearching').append(i18nText('txtSearchResult')); //title end //lockLayout(); $('#boxSearching').css('z-index', '101'); $('#boxSearching').css('display', 'block'); $('#boxSearching').draggable({ handle: "h1" }); $("#boxSearching").offset({ left: pos[0], top: pos[1] }); $("#divSearchResult").show(); $("#divSearchResult").offset({ left: pos[0], top: (pos[1] + $('#bookmarkBoxHdSearching').height() - 2) }); $('#divSearchResult').children().remove(); for (var i = 0; i < sPageNo.length; i++) { var nStored = checkDataLoaded(sPageNo[i].pageNo, dataStored); if (nStored != -1) { /* data loaded */ $('#divSearchResult').append( ' <li id="' + changePageNo(sPageNo[i].pageNo) + '">' + ' <img id="img_search_' + sPageNo[i].pageNo + '" class="imgbox" src="' + formatStringBase64(dataStored[nStored].pageThumbnail) + '"/>' + ' <span class="mdltext">' + i18nText('txtPage') + (changePageNo(sPageNo[i].pageNo) + 1) + '<br /> ' + htmlEncode(truncate(sPageNo[i].pageText, 20)) + ' </span>' + ' </li>' ); //Resize Image var imgTemp = new Image(); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(dataStored[nStored].pageThumbnail); } else { $('#divSearchResult').append( ' <li id="' + changePageNo(sPageNo[i].pageNo) + '">' + ' <img id="img_search_' + sPageNo[i].pageNo + '" class="imgbox" src="img/view_loading.gif"/>' + ' <span class="mdltext">' + i18nText('txtPage') + (changePageNo(sPageNo[i].pageNo) + 1) + '<br /> ' + htmlEncode(truncate(sPageNo[i].pageText, 20)) + ' </span>' + ' </li>' ); //Resize Image var imgTemp = new Image(); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = "img/view_loading.gif"; lstPageNo.push(sPageNo[i].pageNo); /*avwCmsApi(ClientData.userInfo_accountPath(), "webContentPage", "GET", {sid:ClientData.userInfo_sid(),contentId: contentID,pageNos: sPageNo[i].pageNo, thumbnailFlg:1}, function(data){ getDataLoaded(data.pages); //Resize Image var imgTemp = new Image(); $('#img_search_' +data.pages[0].pageNo).attr('src',formatStringBase64(data.pages[0].pageThumbnail)); imgTemp.onload = function(){ if(imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(data.pages[0].pageThumbnail); }, null); */ } } if (lstPageNo.length > 0) { isSendingData = true; loadDataSearch(lstPageNo); } } else { $('#divSearchResult').children().remove(); $('#divSearchResult').append('<span class="last">' + i18nText('txtNoSearchResult') + '</span>'); // $("#divSearchResult").dialog({ // show: "blind", // modal: true, // resizable:false, // width: WIDTH_DIALOG_SEARCH, // height: HEIGHT_DIALOG_SEARCH_NO_SEARCH, // title: i18nText('txtSearchResult'), // position: pos}); //title start $('#bookmarkBoxHdSearching').children().remove(); $('#bookmarkBoxHdSearching').html('<a id="searchingResultClosing" class="delete" > </a>'); $("#searchingResultClosing").click(closeSearchingBox); $('#bookmarkBoxHdSearching').append(i18nText('txtSearchResult')); //title end //lockLayout(); $('#boxSearching').css('z-index', '101'); $('#boxSearching').css('display', 'block'); $('#boxSearching').draggable({ handle: "h1" }); $("#boxSearching").offset({ left: pos[0], top: pos[1] }); $("#divSearchResult").show(); $("#divSearchResult").offset({ left: pos[0], top: (pos[1] + $('#bookmarkBoxHdSearching').height() - 2) }); } } }; function loadDataSearch(lstPageNo) { if (isSendingData == true) { avwCmsApi(ClientData.userInfo_accountPath(), "webContentPage", "GET", { sid: ClientData.userInfo_sid(), contentId: contentID, pageNos: lstPageNo[0], thumbnailFlg: 1 }, function (data) { getDataLoaded(data.pages); //Resize Image var imgTemp = new Image(); $('#img_search_' + data.pages[0].pageNo).attr('src', formatStringBase64(data.pages[0].pageThumbnail)); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(data.pages[0].pageThumbnail); lstPageNo = jQuery.grep(lstPageNo, function (value) { return value != lstPageNo[0]; }); if (lstPageNo.length > 0) { loadDataSearch(lstPageNo); } else { isSendingData = false; } }, null); } }; /* load data to dialog search */ function loadDataToDialogSearch(searchResultTemp) { var contentPage = dataWebContentPage.pages; var myRegExp = new RegExp($('#txtSearch').val()); var searchResult = []; //search content for (var nIndex = 0; nIndex < contentPage.length; nIndex++) { if (myRegExp.test(contentPage[nIndex].pageText)) { //var n = jQuery.inArray(contentPage[nIndex].pageNo,searchResultTemp); for (var n = 0; n < searchResultTemp.length; n++) { if (searchResultTemp[n].pageNo == contentPage[nIndex].pageNo) { searchResult.push(searchResultTemp[n]); break; } } } } /* create data on dialog */ $('#divSearchResult').children().remove(); for (var nIndex = 0; nIndex < searchResult.length; nIndex++) { $('#divSearchResult').append( ' <li id="' + changePageNo(searchResult[nIndex].pageNo) + '">' + ' <img class="imgbox" src="' + formatStringBase64(searchResult[nIndex].pageThumbnail) + '"/>' + ' <span class="mdltext">' + i18nText('txtPage') + (changePageNo(searchResult[nIndex].pageNo) + 1) + '<br /> ' + htmlEncode(truncate(searchResult[nIndex].pageText, 20)) + ' </span>' + ' </li>' ); //Resize Image var imgTemp = new Image(); imgTemp.onload = function () { if (imgTemp.width > imgTemp.height) { $("img.imgbox").attr('height', ''); $("img.imgbox").removeAttr('height'); $("img.imgbox").attr('width', '43'); } else { $("img.imgbox").attr('width', ''); $("img.imgbox").removeAttr('width'); $("img.imgbox").attr('height', '43'); } }; imgTemp.src = formatStringBase64(searchResult[nIndex].pageThumbnail); } }; /* event for list search results */ function clickSearchDetail() { // Hide dialog $("#divSearchResult").dialog('close'); changePage($(this).attr('id')); }; function playBGMOfPage(page_index_bg) { if (avwUserEnvObj.os == "ipad") { if ($('#playaudiopage').children().length > 0) { $('#playaudiopage').children().remove(); } getPageObjectsByPageIndex(pageObjectsData, page_index_bg); for (var nIndex = 0; nIndex < pageObjects.length; nIndex++) { if (pageObjects[nIndex].mediaType == '3' && pageObjects[nIndex].playType == '2') { stopAllAudio(); TypeAudio2 = pageObjects[nIndex].playType; srcAudioType2 = pageObjects[nIndex].audioFile; if (ClientData.userOpt_musicMode() == "1") { $('#playaudiopage').html( ' <audio id="play_audio_2" loop="loop" >' + ' <source src="' + srcAudioType2 + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudiopage').html( ' <audio id="play_audio_2" >' + ' <source src="' + srcAudioType2 + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } document.getElementById('play_audio_2').load(); document.getElementById('play_audio_2').play(); document.getElementById("play_audio_2").pause(); } } } }; function playBGMOfContent() { if (avwUserEnvObj.os == "ipad" && isJumpNotFromFirstPage == true) { isJumpNotFromFirstPage = false; getPageObjectsByPageIndex(pageObjectsData, 0); for (var nIndex = 0; nIndex < pageObjects.length; nIndex++) { if (pageObjects[nIndex].mediaType == '3' && pageObjects[nIndex].playType == '1') { stopAllAudio(); TypeAudio1 = pageObjects[nIndex].playType; srcAudioType1 = pageObjects[nIndex].audioFile; if (ClientData.userOpt_musicMode() == "1") { $('#playaudioallpage').html( ' <audio id="play_audio_1" loop="loop" >' + ' <source src="' + srcAudioType1 + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudioallpage').html( ' <audio id="play_audio_1" >' + ' <source src="' + srcAudioType1 + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } document.getElementById('play_audio_1').load(); document.getElementById('play_audio_1').play(); document.getElementById("play_audio_1").pause(); } } } }; /* event next page */ function nextPage_click() { if (getContent().hasNextPage()) { playBGMOfContent(); playBGMOfPage(getPageIndex() + 1); disableAllControl(); $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: getPageIndex() + 2 }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, (getPageIndex() + 1)); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); var tran = new Transition(); tran.flipNextPage(); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); } }; /* display error screen*/ function showErrorScreen() { // エラーメッセージの表示 var errMes = i18nText('msgPageImgErr'); /*var tags = '<div id="avw-sys-error" style="text-align:center; vertical-align:middle;">' +errMes+ '</div>'; $('body').prepend(tags); $('#avw-sys-error').css( { 'opacity': 0.7, 'position': 'fixed', 'top': '0', 'left': '0', 'width': $(window).width(), 'height': $(window).height(), 'background': '#999', 'z-index': 100 }) // resize error page $(window).resize(function() { $('#avw-sys-error').css( { 'width': $(window).width(), 'height': $(window).height() }); });*/ $('#divImageLoading').css('display', 'none'); lockLayout(); /* show error messages */ $().toastmessage({ position: 'middle-center' }); $().toastmessage('showToast', { type: 'error', sticky: true, text: errMes, close: function () { isShowErrorMessage = false; } }); $('.toast-type-error').css('height', '100px'); $('.toast-type-error > p').css('padding-top', '35px'); $('.toast-item-close').live('click', imgBack_click); }; /* event prev page */ function prevPage_click() { if (getContent().hasPreviousPage()) { playBGMOfContent(); playBGMOfPage(getPageIndex() - 1); disableAllControl(); $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); //pageImages = getURLPageImage("webContentPageImage") + "?contentId=" + contentID + "&sid=" + ClientData.userInfo_sid() + "&pageNo=" + (getPageIndex() - 1); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: getPageIndex() }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, (getPageIndex() - 1)); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); var tran = new Transition(); tran.flipPreviousPage(); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); } }; /* event first page */ function firstPage_click() { if (getContent().pageIndex != 0) { playBGMOfContent(); playBGMOfPage(0); disableAllControl(); $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: 1 }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, 0); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); var tran = new Transition(); tran.flipToPage(0); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); } }; /* event last page */ function lastPage_click() { if (getContent().pageIndex != (totalPage - 1)) { playBGMOfContent(); playBGMOfPage(totalPage - 1); disableAllControl(); $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); //pageImages = getURLPageImage("webContentPageImage") + "?contentId=" + contentID + "&sid=" + ClientData.userInfo_sid() + "&pageNo=" + (totalPage - 1); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: totalPage }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, totalPage - 1); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); $('#divImageLoading').css('display', 'none'); var tran = new Transition(); tran.flipToPage(totalPage - 1); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); } }; /* move to page ?? */ function changePage(page_index) { // Make sure page_index is number page_index = Number(page_index); if (page_index != getContent().pageIndex) { playBGMOfContent(); playBGMOfPage(page_index); disableAllControl(); $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: page_index + 1 }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, page_index); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); var tran = new Transition(); tran.flipToPage(page_index); }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); } else if (ClientData.IsJumpBack() == true || ClientData.common_prePageNo()) { getContent().setPageImages(totalPage, pageImages) .setPageObjects(pageObjects) .setUpPage(0); } }; /* add event draw on canvas */ function drawOnCanvas() { tool = new tool_drawing(); if (isTouchDevice() == true) { initializeCanvas(document.getElementById('draw_canvas')); initializeCanvas(document.getElementById('marker_canvas')); } else { // Attach the mousedown, mousemove and mouseup event listeners. canvas_draw.addEventListener('mousedown', ev_canvas, false); canvas_draw.addEventListener('mousemove', ev_canvas, false); canvas_draw.addEventListener('mouseup', ev_canvas, false); canvas_draw.addEventListener('mouseout', ev_canvas, false); canvas_draw.addEventListener('touchstart', ev_canvas, false); canvas_draw.addEventListener('touchmove', ev_canvas, false); canvas_draw.addEventListener('touchend', ev_canvas, false); canvas_marker.addEventListener('mousedown', ev_canvas, false); canvas_marker.addEventListener('mousemove', ev_canvas, false); canvas_marker.addEventListener('mouseup', ev_canvas, false); canvas_marker.addEventListener('mouseout', ev_canvas, false); } }; function drawMouseMove(contextDraw, ev) { if (tool.started && isPressLeftMouse == true) { if (isMoveOutDrawCanvas == true) { contextDraw.moveTo(ev._x, ev._y); sx = ev._x; sy = ev._y; isMoveOutDrawCanvas = false; } if (markingType == 'eraser') { //context.clearRect(ev._x, ev._y, ClientData.erase_size(), ClientData.erase_size()); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.lineWidth = eraseSize; contextDraw.lineJoin = 'round'; contextDraw.lineCap = 'round'; contextDraw.lineTo(sx, sy); contextDraw.stroke(); contextDraw.globalCompositeOperation = 'source-over'; } else if (markingType == 'pen') { contextDraw.lineCap = "round"; contextDraw.lineJoin = "bevel"; contextDraw.lineWidth = penSize; contextDraw.strokeStyle = "#" + penColor; contextDraw.lineTo(ev._x, ev._y); contextDraw.stroke(); } else if (markingType == 'maker') { contextDraw.beginPath(); var halfSize = makerSize / 2; var quotSize = makerSize / 4; var ptStart = [ { x: sx - quotSize, y: sy - halfSize }, { x: sx + quotSize, y: sy - halfSize }, { x: sx + quotSize, y: sy + halfSize }, { x: sx - quotSize, y: sy + halfSize } ]; var ptEnd = [ { x: ev._x - quotSize, y: ev._y - halfSize }, { x: ev._x + quotSize, y: ev._y - halfSize }, { x: ev._x + quotSize, y: ev._y + halfSize }, { x: ev._x - quotSize, y: ev._y + halfSize } ]; if (sx > ev._x) { if (sy > ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蟾ヲ荳翫↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.closePath(); } else if (sy < ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蟾ヲ荳九↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.closePath(); } else { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蟾ヲ縺ォ謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.closePath(); } } else if (sx < ev._x) { if (sy > ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蜿ウ荳翫↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.closePath(); } else if (sy < ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蜿ウ荳九↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.closePath(); } else { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 蜿ウ縺ォ謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.closePath(); } } else { if (sy > ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 荳翫↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineTo(ptEnd[0].x, ptEnd[0].y); contextDraw.lineTo(ptEnd[1].x, ptEnd[1].y); contextDraw.closePath(); } else if (sy < ev._y) { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 荳九↓謠冗判縺吶k蝣エ蜷・ contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptEnd[2].x, ptEnd[2].y); contextDraw.lineTo(ptEnd[3].x, ptEnd[3].y); contextDraw.closePath(); } else { contextDraw.beginPath(); contextDraw.globalCompositeOperation = 'destination-out'; contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalCompositeOperation = 'lighter'; contextDraw.closePath(); contextDraw.beginPath(); // 遘サ蜍輔↑縺励・蝣エ蜷・ contextDraw.moveTo(ptStart[0].x, ptStart[0].y); contextDraw.lineTo(ptStart[1].x, ptStart[1].y); contextDraw.lineTo(ptStart[2].x, ptStart[2].y); contextDraw.lineTo(ptStart[3].x, ptStart[3].y); contextDraw.closePath(); } } contextDraw.lineJoin = 'bevel'; contextDraw.lineCap = 'butt'; contextDraw.globalAlpha = 0.4; // Opacity 20% contextDraw.fillStyle = "#" + makerColor; contextDraw.fill(); contextDraw.globalAlpha = 1; // Opacity 100% } /* * 謠冗判繝「繝シ繝峨r謌サ縺・ */ contextDraw.globalCompositeOperation = 'source-over'; // 邨らせ繧剃ソ晏ュ・ sx = ev._x; sy = ev._y; } }; /* event mouse using for canvas */ function tool_drawing() { var tool = this; this.started = false; this.mousedown = function (ev) { ev.preventDefault(); /* set value sx,sy */ sx = ev._x; sy = ev._y; if ($("#marker_canvas").is(":hidden")) { context_draw.beginPath(); context_draw.moveTo(ev._x, ev._y); } else { context_marker.beginPath(); context_marker.moveTo(ev._x, ev._y); } if (isAddingMarking == true) { /* begin draw*/ isClearDrawing = false; if ($("#marker_canvas").is(":hidden")) { if (markingType == 'eraser') { context_draw.globalCompositeOperation = 'destination-out'; context_draw.lineWidth = eraseSize; context_draw.lineJoin = 'round'; context_draw.lineCap = 'round'; context_draw.lineTo(ev._x + 0.001, ev._y + 0.001); context_draw.stroke(); context_draw.globalCompositeOperation = 'source-over'; } else if (markingType == 'pen') { /* set flag */ isDrawing = true; context_draw.lineCap = "round"; context_draw.lineWidth = penSize; context_draw.strokeStyle = "#" + penColor; context_draw.lineTo(ev._x + 0.001, ev._y + 0.001); context_draw.stroke(); } else if (markingType == 'maker') { /* set flag */ isDrawing = true; context_draw.globalCompositeOperation = 'destination-out'; context_draw.lineWidth = makerSize; context_draw.lineHeight = makerSize; context_draw.lineTo(ev._x, ev._y + 0.001); context_draw.lineCap = 'square'; context_draw.strokeStyle = "#" + makerColor; context_draw.stroke(); context_draw.globalCompositeOperation = 'lighter'; context_draw.lineCap = "square"; context_draw.lineWidth = makerSize; context_draw.lineHeight = makerSize; context_draw.globalAlpha = 0.4; context_draw.strokeStyle = "#" + makerColor; context_draw.lineTo(ev._x, ev._y + 0.001); context_draw.stroke(); context_draw.globalAlpha = 1; } } else { if (markingType == 'eraser') { context_marker.globalCompositeOperation = 'destination-out'; context_marker.lineWidth = eraseSize; context_marker.lineJoin = 'round'; context_marker.lineCap = 'round'; context_marker.lineTo(ev._x + 0.001, ev._y + 0.001); context_marker.stroke(); context_marker.globalCompositeOperation = 'source-over'; } else if (markingType == 'pen') { /* set flag */ isDrawing = true; context_marker.lineCap = "round"; context_marker.lineWidth = penSize; context_marker.strokeStyle = "#" + penColor; context_marker.lineTo(ev._x + 0.001, ev._y + 0.001); context_marker.stroke(); } else if (markingType == 'maker') { /* set flag */ isDrawing = true; context_marker.globalCompositeOperation = 'destination-out'; context_marker.lineWidth = makerSize; context_marker.lineHeight = makerSize; context_marker.lineTo(ev._x, ev._y + 0.001); context_marker.lineCap = 'square'; context_marker.strokeStyle = "#" + makerColor; context_marker.stroke(); context_marker.globalCompositeOperation = 'lighter'; context_marker.lineCap = "square"; context_marker.lineWidth = makerSize; context_marker.lineHeight = makerSize; context_marker.globalAlpha = 0.4; context_marker.strokeStyle = "#" + makerColor; context_marker.lineTo(ev._x, ev._y + 0.001); context_marker.stroke(); context_marker.globalAlpha = 1; } } tool.started = true; if (ev.which == 1) { isPressLeftMouse = true; } } //context_draw.closePath(); }; this.mousemove = function (ev) { if (isAddingMarking == true) { if ($("#marker_canvas").is(":hidden")) { drawMouseMove(context_draw, ev); } else { drawMouseMove(context_marker, ev); } } }; this.mouseup = function (ev) { if (tool.started) { //tool.mousemove(ev); tool.started = false; //context_draw.closePath(); //isPressLeftMouse = false; } }; this.mouseout = function (ev) { if (tool.started) { //tool.mousemove(ev); //tool.started = false; //context_draw.closePath(); isMoveOutDrawCanvas = true; } /*if(isPressLeftMouse == true){ isMoveOutDrawCanvas = true; }else{ tool.started = false; }*/ }; /*tablet [start]*/ this.touchstart = function (ev) { /*ev.preventDefault(); tool.mousedown(ev);*/ var touches = ev.changedTouches, first = touches[0], type = ""; switch (ev.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type = "mousemove"; break; case "touchend": type = "mouseup"; break; default: return; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); ev.preventDefault(); }; this.touchmove = function (ev) { /*ev.preventDefault(); tool.mousemove(ev);*/ var touches = ev.changedTouches, first = touches[0], type = ""; switch (ev.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type = "mousemove"; break; case "touchend": type = "mouseup"; break; default: return; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); ev.preventDefault(); }; this.touchend = function (ev) { /*ev.preventDefault(); tool.mouseup(ev);*/ var touches = ev.changedTouches, first = touches[0], type = ""; switch (ev.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type = "mousemove"; break; case "touchend": type = "mouseup"; break; default: return; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); ev.preventDefault(); }; /* tablet [end]*/ } function ev_canvas(ev) { if (ev.offsetX || ev.offsetX == 0) { // Opera ev._x = ev.offsetX; ev._y = ev.offsetY; } else if (ev.layerX || ev.layerX == 0) { // Firefox ev._x = ev.layerX; ev._y = ev.layerY; } // Call the event handler of the tool. var func = tool[ev.type]; if (func) { func(ev); } }; $(document).mouseup(function (e) { if (e.which == 1) isPressLeftMouse = false }); /* handle display page from book mark page */ function handleFromBookMarkPage() { /* handle play BGM of content jump */ // getPageObjectsByPageIndex(pageObjectsData,0); // for(var nIndex = 0; nIndex < pageObjects.length; nIndex++){ // if(pageObjects[nIndex]. mediaType == '3' && pageObjects[nIndex]. playType == '1'){ // createAudio(pageObjects[nIndex].audioFile, pageObjects[nIndex].playType); // } // } isJumpNotFromFirstPage = true; /* check exist pageno */ if (ClientData.bookmark_pageNo()) { changePageWithoutSlide(changePageNo(ClientData.bookmark_pageNo())); ClientData.bookmark_pageNo(null) } }; /* handle display page from actiontype=10 mediaType =1 :jump to content */ function handleFromJumpContent() { /* handle play BGM of content jump */ // getPageObjectsByPageIndex(pageObjectsData,0); // for(var nIndex = 0; nIndex < pageObjects.length; nIndex++){ // if(pageObjects[nIndex]. mediaType == '3' && pageObjects[nIndex]. playType == '1'){ // createAudio(pageObjects[nIndex].audioFile, pageObjects[nIndex].playType); // } // } isJumpNotFromFirstPage = true; /* check exist pageno */ if (ClientData.common_prePageNo()) { //changePage(changePageNo(ClientData.common_prePageNo())); changePageWithoutSlide(changePageNo(ClientData.common_prePageNo())); //LocalStorageUtils.remove(Keys.common_prePageNo); ClientData.common_prePageNo(null) } }; /* handle button back */ function oldContent_Back() { /* handle play BGM of content jump */ // getPageObjectsByPageIndex(pageObjectsData,0); // for(var nIndex = 0; nIndex < pageObjects.length; nIndex++){ // if(pageObjects[nIndex]. mediaType == '3' && pageObjects[nIndex]. playType == '1'){ // createAudio(pageObjects[nIndex].audioFile, pageObjects[nIndex].playType); // } // } isJumpNotFromFirstPage = true; var oldDataBack = ClientData.JumpQueue(); var oldContent = oldDataBack[oldDataBack.length - 1]; /*move to page */ //changePage(oldContent.oldPageIndex); changePageWithoutSlide(oldContent.oldPageIndex); /*remove*/ oldDataBack.splice(oldDataBack.length - 1, 1); ClientData.JumpQueue(oldDataBack); ClientData.IsJumpBack(false); }; /* handle display or hide toolbar */ function handleDisplayToolbar() { if (isLoadingObject == false) { /* save marking */ var canvas = document.getElementById('draw_canvas'); var context = canvas.getContext('2d'); if (ClientData.IsAddingMarking() == true) { imgDrawingTemp = canvas.toDataURL("image/png"); imgMarkerTemp = canvas_marker.toDataURL("image/png;") } var w = $("#wrapper").width(); var h = $("#wrapper").height(); if ($("#header_toolbar").is(":hidden")) { isFullScreen = false; $('#footer_toolbar_1').show(); $('#footer_toolbar_2').hide(); $('#header_toolbar').show(); sizingNotFull(w, h); drawCanvas(); } else { isFullScreen = true; $('#header_toolbar').hide(); $('#footer_toolbar_2').show(); $('#footer_toolbar_1').hide(); sizingFullSize(w, h); drawCanvas(); } /* init image had draw */ //initDisplayMarking(); resizeCanvasDraw(); if (ClientData.IsAddingMarking() == true) { var img = new Image(); img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = imgDrawingTemp; var imgMarker = new Image(); imgMarker.onload = function () { context_marker.drawImage(imgMarker, 0, 0, canvas_marker.width, canvas_marker.height); }; img.src = imgMarkerTemp; } } closeDialogPopUpText(); }; /* resizing canvas draw */ function resizeCanvasDraw() { flip(); if (isFullScreen == true) { $("#draw_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top) .css('left', destRect.left + marginX); $("#marker_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top) .css('left', destRect.left + marginX); } else { $("#draw_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top + marginY) .css('left', destRect.left + marginX); $("#marker_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top + marginY) .css('left', destRect.left + marginX); } }; /* handle slider bar */ function handleSliderBar() { $("#slider_page").slider({ range: "max", min: 1, max: totalPage, value: getPageIndex() + 1, slide: function (event, ui) { $("#txtSlider").val(ui.value); //changePage(ui.value - 1); }, stop: function (event, ui) { changePage(ui.value - 1); } }); $("#txtSlider").val($("#slider_page").slider("value")); /* event change txtProcess */ $('#txtSlider').keydown(function (event) { if (event.keyCode == 13) { if ($('#txtSlider').val() <= 0) { $('#txtSlider').val('1'); } else if ($('#txtSlider').val() > totalPage) { $('#txtSlider').val(totalPage); } else if (/\D/g.test($('#txtSlider').val())) { $('#txtSlider').val('1'); } if ($('#txtSlider').val() - 1 != getPageIndex()) { $("#slider_page").slider("value", $('#txtSlider').val()); changePage($('#txtSlider').val() - 1); } } else { } }); }; /* event when change page */ function changeSlider(page_index) { $("#slider_page").slider("value", page_index + 1); $("#txtSlider").val(page_index + 1); }; /* handle display value tooltip */ function handleTooltip() { /*$('#imgHome').attr('title', i18nText('dspHome')); $('#imgBack').attr('title', i18nText('txtTooltipBack')); $('#listbookmark').attr('title', i18nText('txtShioriCtnLs')); $('#imgbookmark').attr('title', i18nText('txtTooltipBookmark')); $('#listindex').attr('title', i18nText('txtIndex')); $('#copytext').attr('title', i18nText('txtTextCopy')); $('#imgmemo').attr('title', i18nText('txtTooltipShowMemo')); $('#imgaddmemo').attr('title', i18nText('txtTooltipAddMemo')); $('#imgmarking').attr('title', i18nText('txtTooltipShowMarking')); $('#imgmarkingtoolbar').attr('title', i18nText('txtTooltipShowMarkingTool')); */ }; /* handle keydown */ $(document).keydown(function (e) { /* set fag true when click ctrl */ if (e.ctrlKey) { ctrlMode = true; } /* set hot key */ if (ctrlMode == true) { if (ClientData.IsAddingMarking() == true || isLoadingObject == true) { /* do nothing*/ } else { switch (e.keyCode) { /* move page */ case ShortKeys.MovePrevious: /* move prev */ if (getContent().hasPreviousPage()) { prevPage_click(); } break; case ShortKeys.MoveNext: /* move next */ if (getContent().hasNextPage()) { nextPage_click(); } break; /* zoom */ case ShortKeys.ZoomIn: /* zoomIn */ zoomIn(); break; case ShortKeys.ZoomOut: /* zoomOut */ zoomOut(); break; case ShortKeys.ZoomFit: /* screenFit*/ screenFit(); break; /* marking && toolbar */ case ShortKeys.ShowHideToolbar: /* handle toolbar */ handleDisplayToolbar(); break; case ShortKeys.ShowHideMarking: /* hide marking */ imgmarking_click(); break; } } } }); /* handle keydown */ $(document).keyup(function (e) { ctrlMode = false; }); /*$(document).mousemove(function(e){ if(e.which == 1 && !isPressLeftMouse){ e.which = 0; } })*/ /* get contentID */ function getContentID() { /* init contentID */ if (ClientData.common_preContentId()) { contentID = ClientData.common_preContentId(); ClientData.common_preContentId(null); } else if (ClientData.IsJumpBack() == true) { var dataJump = ClientData.JumpQueue(); contentID = dataJump[dataJump.length - 1].oldContentID; } else { contentID = ClientData.contentInfo_contentId(); } }; /* init flag marking, memo when init page */ function initFlagDisplay() { ClientData.IsDisplayMemo(false); ClientData.IsAddingMemo(false); if (ClientData.userOpt_makingDsp() == "1") { ClientData.IsDisplayMarking(true); } else { ClientData.IsDisplayMarking(false); } ClientData.IsAddingMarking(false); }; function onUnlock() { removeObject(); getPageObjectsByPageIndex(pageObjectsData, 0); /* handle play BGM of content jump */ for (var nIndex = 0; nIndex < pageObjects.length; nIndex++) { if (pageObjects[nIndex].mediaType == '3' && pageObjects[nIndex].playType == '1') { if (avwUserEnvObj.os == "ipad") { $('#play_audio_1').attr('src', pageObjects[nIndex].audioFile); //document.getElementById("play_audio_1").load(); document.getElementById("play_audio_1").play(); isPlayBGMUnlock = true; } else { createAudio(pageObjects[nIndex].audioFile, pageObjects[nIndex].playType); } } } getPageObjectsByPageIndex(pageObjectsData, getPageIndex()); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects).setUpPage(getPageIndex); }; function StartTimerUpdateLog() { /* set end log */ SetEndLog(contentID); setTimeout("StartTimerUpdateLog();", 1000); }; /* check status image show toolbar marking */ function checkStatusImageMarking() { if (ClientData.serviceOpt_marking() == 'Y') { $('#imgmarkingtoolbar').bind('click', handleDrawCanvas); } else { $('#imgmarkingtoolbar').unbind('click'); } }; /* set size bot toolbar for ipad */ function initDisplayToolbarDevice() { if (avwUserEnvObj.os == "ipad" || avwUserEnvObj.os == "android") { $('.transition').css('padding', '4px 0 0 0'); $('.sizing').css('padding', '4px 0 0 2px'); $('.toolbar').css('margin', '0 0 0 0'); } }; function resizeScreen() { /* save marking */ var canvas = document.getElementById('draw_canvas'); var context = canvas.getContext('2d'); if (ClientData.IsAddingMarking() == true) { imgDrawingTemp = canvas.toDataURL("image/png"); imgMarkerTemp = canvas_marker.toDataURL("image/png"); ; } sizingScreen(); resizeCanvasDraw(); drawCanvas(); if (ClientData.IsAddingMarking() == true) { var img = new Image(); img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = imgDrawingTemp; var imgMarker = new Image(); imgMarker.onload = function () { context_marker.drawImage(imgMarker, 0, 0, canvas_marker.width, canvas_marker.height); }; imgMarker.src = imgMarkerTemp; } }; function changePageWithoutSlide(pageMove) { disableAllControl(); var isExistBGMPageContent = false; getPageObjectsByPageIndex(pageObjectsData, pageMove); for (var nIndex = 0; nIndex < pageObjects.length; nIndex++) { if (pageObjects[nIndex].mediaType == '3' && pageObjects[nIndex].playType == '2') { isExistBGMPageContent = true; } } if (isExistBGMPageContent == false) { getPageObjectsByPageIndex(pageObjectsData, 0); for (var nIndex = 0; nIndex < pageObjects.length; nIndex++) { if (pageObjects[nIndex].mediaType == '3' && pageObjects[nIndex].playType == '1') { createAudio(pageObjects[nIndex].audioFile, pageObjects[nIndex].playType); } } } $('#divImageLoading').css('display', 'block'); // Clear canvas offscreen clearCanvas(document.getElementById("offscreen")); avwGrabContentPageImage(ClientData.userInfo_accountPath(), { contentId: contentID, sid: ClientData.userInfo_sid(), pageNo: pageMove + 1 }, function (data) { pageImages = data; /* get page Objects */ getPageObjectsByPageIndex(pageObjectsData, pageMove); getContent().setPageImages(totalPage, pageImages).setPageObjects(pageObjects); $('#divImageLoading').css('display', 'none'); isFirstLoad = true; // screenFit(); getContent().toPage(pageMove); //changeSlider(pageMove); /* handle slider bar */ handleSliderBar(); if (dataPageTitle[pageMove]) { if (dataPageTitle[pageMove] != '') { document.title = contentName + '_' + dataPageTitle[pageMove] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } }, function (xmlHttpRequest, txtStatus, errorThrown) { showErrorScreen(); }); }; /* set position model when resize*/ function changePosDialog() { $("#divDialogMemo").center(); $("#divDialogMemo").css('position', 'absolute'); $("#boxBookMark").center(); $("#boxIndex").center(); $("#boxCopyText").center(); $("#boxSearching").center(); $("#boxAddMemo").center(); $('#dlgPen').center(); $('#dlgMaker').center(); $('#dlgGomu').center(); $('#dlgMarking').center(); $('#bgmConfirm').center(); $("#bgmConfirm_page").center(); }; function closeDialogResize() { closeDialogPopUpText(); $('#pop_up_memo').hide(); }; function createTextConfirmAudio() { var text = i18nText('msgBGMPlayConfirm'); $('#txtAudio').html(text); var text = i18nText('msgBGMPagePlayConfirm'); $('#txtAudio_page').html(text); }; function initPage() { //$('body,html').animate({ scrollTop: 0 }, 350); $('#divImageLoading').css('display', 'block'); /* init footer toolbar */ $('#footer_toolbar_2').hide(); $('#footer_toolbar_1').show(); /* init pos bottom toolbar*/ initDisplayToolbarDevice(); /* check login */ if (!avwCheckLogin(ScreenIds.Login)) return; // Set event to prevent leave ToogleLogoutNortice(); // Lock screen LockScreen(); getContentID(); StartTimerUpdateLog(); /* set start log */ SetStartLog(contentID); /* get info of content */ //getDataJsonFile(); getJsonContentInfo(); initializeViewerComponent('wrapper'); /* handle display tooltip */ handleTooltip(); /* set text dialog confirm of audio */ createTextConfirmAudio(); /* handle toolbar */ $('#control_screen').click(handleDisplayToolbar); $('#control_screen_2').click(handleDisplayToolbar); /* bookmark Page */ $('#imgbookmark').click(bookmarkPage); $('#listbookmark').click(showListBookMark); $('#divListBookmark li').live('click', clickBookmark); /* close bookmark dialog */ //$("#bookmarkClosing").live('click',closeBookmarkBox); /* page index */ $('#listindex').click(showListPageIndex); $('#divSearchResult li').live('click', clickSearchDetail); /* copy text */ $('#copytext').click(showCopyText); /* close copy text dialog */ $("#copyTextClosing").click(closeCopyTextBox); /*event click next page button */ $('#nextpage').click(nextPage_click); $('#button_next_canvas').click(nextPage_click); /*event click prev page button */ $('#prevpage').click(prevPage_click); $('#button_pre_canvas').click(prevPage_click); /*event click fist page button */ $('#firstpage').click(firstPage_click); /*event click last page button */ $('#lastpage').click(lastPage_click); $("#imgBack").click(imgBack_click); $("#imgHome").click(imgHome_click); $("#btn_show_memo").click(showEditMemo); $("#btn_copy_memo").click(copyMemo); $('#memoClosing').click(closePopUpCopyMemo); $('#liAddMemo').click(click_liAddMemo); $('#liCopyMemo').click(click_liCopyMemo); $('#liDeleteMemo').click(click_liDeleteMemo); /*event search*/ showListSearchResult(); /* zoom event */ $('#zoomin').click(zoomIn); $('#zoomout').click(zoomOut); $('#zoomfit').click(screenFit); /* event memo */ $('#imgmemo').click(handleMemo); $('#imgaddmemo').click(handleAddMemo); /* event marking */ $('#imgmarking').click(imgmarking_click); $('#imgmarkingtoolbar').click(handleDrawCanvas); /*draw canvas*/ drawOnCanvas(); /*init flag */ initFlagDisplay(); sizingScreen(); /* move image check marking*/ $('#divCheckExistMarking').css('top', '70px'); $('#divCheckExistMarking').hide(); /* disable controls */ isLoadingObject = true; disableAllControl(); /* window resize event */ $(window).resize(function () { sizingScreen(); /* close dialog popuptext */ closeDialogResize(); }); $(document).ajaxComplete(function () { /*Init Page */ nAjaxLoad++; if (nAjaxLoad == 7) { /* handle from bookmark page */ //handleFromBookMarkPage(); /* check move content */ if (ClientData.bookmark_pageNo()) { //changePage(changePageNo(ClientData.bookmark_pageNo())); //changePageWithoutSlide(changePageNo(ClientData.bookmark_pageNo())); //ClientData.bookmark_pageNo(null) handleFromBookMarkPage(); } else if (ClientData.common_prePageNo()) { /* handle from jump content */ handleFromJumpContent(); } else if (ClientData.IsJumpBack() == true) { /* handle back */ oldContent_Back(); } else { if (getPageIndex() == 0) { getContent().setPageImages(totalPage, pageImages) .setPageObjects(pageObjects) .setUpPage(0); /* set pageTitle*/ if (dataPageTitle[0]) { if (dataPageTitle[0] != '') { document.title = contentName + '_' + dataPageTitle[0] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } /* handle slider bar */ handleSliderBar(); } } /* window resize event */ $(window).resize(function () { if (isTouchDevice() == true) { if (avwUserEnvObj.os == "android") { var tempRatio = document.documentElement.clientWidth / window.innerWidth; if (tempRatio <= 1) { // Adjust position for toolbar and footer bar var top = window.innerHeight - $("#footer_toolbar_1").height(); $("#wrapper").css("width", window.innerWidth); $("#wrapper").css("height", window.innerHeight); $("#footer_toolbar_1").css("top", top + "px"); $("#footer_toolbar_2").css("top", top + "px"); } else { var top = $(window).height() - $("#footer_toolbar_1").height(); $("#wrapper").css("width", $(window).width()); $("#wrapper").css("height", $(window).height()); $("#footer_toolbar_1").css("top", top + "px"); $("#footer_toolbar_2").css("top", top + "px"); } } } resizeScreen(); isChangeSizeScreen = false; /* change position dialog */ changePosDialog(); /* close dialog popuptext */ closeDialogResize(); }); /* check status button */ checkExistNextPrePage(); /*init Image Bookmark */ initImageBookmark(); $('#lblSlider').text('/ ' + totalPage); /* memo */ initImageMemo(); initImageAddMemo(); /* init image had draw */ initDisplayMarking(); /* check status */ checkStatusImageMarking(); trackTransforms(context_main); //nAjaxLoad = 0; if (isTouchDevice() == true) { if (avwUserEnvObj.os == "android") { standardRatio = document.documentElement.clientWidth / window.innerWidth; startDetectZoom({ time: 500, callbackFunction: function (oldRatio, newRatio, oldW, oldH, newW, newH) { currentRatio = newRatio; } }); var top = window.innerHeight - $("#footer_toolbar_1").height(); $("#wrapper").css("width", window.innerWidth); $("#wrapper").css("height", window.innerHeight); $("#footer_toolbar_1").css("top", top + "px"); $("#footer_toolbar_2").css("top", top + "px"); sizingScreen(); } } } }); }; $("document").ready(function () { if (avwUserEnvObj.os == 'ipad') { if (ClientData.IsRefresh() == true) { initPage(); } else { $('body, html').hide(); ClientData.IsRefresh(true); location.reload(); } } else { initPage(); } }); /* ========================================================================================================== */ /* rect object */ var Rect = function (x, y, w, h) { this.left = Math.floor(x); this.top = Math.floor(y); this.right = Math.floor(x + w); this.bottom = Math.floor(y + h); this.width = w; this.height = h; }; Rect.prototype.add = function (x, y) { this.left = Math.floor(this.left + x); this.right = Math.floor(this.right + x); this.top = Math.floor(this.top + y); this.bottom = Math.floor(this.bottom + y); this.width = this.right - this.left; this.height = this.bottom - this.top; }; Rect.prototype.center = function () { var x = (this.left + this.right) / 2; var y = (this.top + this.bottom) / 2; return new Point(Math.floor(x), Math.floor(y)); }; /** * CurrentPage Class Definition */ /* constructor */ var ContentPage = function (pageNum, pageImageUrl) { this.pageNumber = 0; this.pageImageUrl = pageImageUrl; this.bInitialized = false; /* init screen image */ this.image = null; /* array page objects */ this.pageObjects = new Array(); }; /* Load page */ ContentPage.prototype.load = function (onCompletedFunc) { /* load image */ this.image = new Image(); this.image.onerror = function () { //alert(this.pageImageUrl + " hasn't loaded.."); }; this.image.onload = function (context) { /* load complete */ if (onCompletedFunc) { onCompletedFunc(); } }; this.image.src = this.pageImageUrl; }; /* add 1 page to pageObject */ ContentPage.prototype.addPageObject = function (pageObject) { this.pageObjects.push(pageObject); }; /* init Json object using for init pages */ ContentPage.prototype.addPageObjects = function (pageObjects) { for (var i = 0; i < pageObjects.length; i++) { var obj = pageObjects[i]; var pageObj = null; switch (obj.mediaType) { case 1: //mediaType = 1 if (obj.actionType == 0) { pageObj = new imageNoAction( /* no action */ obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible ); } else if (obj.actionType == 1) { /* play video */ pageObj = new videoType1( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.mediaFile, obj.media ); } else if (obj.actionType == 2) { pageObj = new audioType1( /* play audio */ obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.audioFile ); } else if (obj.actionType == 3) { /*open new url */ pageObj = new linkURL( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.action, obj.linkUrl, obj.browserType ); } else if (obj.actionType == 4) { /*image preview */ pageObj = new imagePreview( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.imagePreview ); } else if (obj.actionType == 5) { /*jump page */ pageObj = new jumpPage( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.jumpPage ); } else if (obj.actionType == 6) { /*send mail */ pageObj = new sendMail( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.emailSubject, obj.emailAddress ); } else if (obj.actionType == 8) { /* show popup */ pageObj = new openPopUp( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.content ); } else if (obj.actionType == 10) { /* move to another content */ pageObj = new moveToContent( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.contentId, obj.pageNo ); } break; case 2: pageObj = new videoType2( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.mediaFile, obj.media, obj.embed ); break; case 3: pageObj = new audioType3( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.audioFile, obj.playType ); break; case 4: // mediaType = 4 objType4_5.push(obj); pageObj = new listImage( obj.mediaType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.dataObjects, obj.triggerType ); break; case 5: // mediaType = 5 objType4_5.push(obj); pageObj = new listVideo( obj.mediaType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.dataObjects ); break; case 6: // mediaType = 6 pageObj = new trigger( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.index, obj.target, obj.visible, obj.action ); break; case 7: // mediaType = 7 pageObj = new text( obj.mediaType, obj.actionType, obj.id, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.action, obj.content ); break; default: // default Object pageObj = new PageObject(); pageObj.setup( obj.mediaType, obj.actionType, obj.id, obj.imageUrl, obj.x, obj.y, obj.width, obj.height, obj.visible, obj.action ); } // add pageObject this.addPageObject(pageObj); } }; /* drawing for current page */ ContentPage.prototype.drawPage = function (context) { /*set status is loading page */ isLoadingObject = true; /* lock all controls in page */ disableAllControl(); /* init array image */ arrImage = []; nCountObjectLoad = 0; $('#divImageLoading').css('display', 'block'); var width = this.image.width; var height = this.image.height; /* set width canvas */ if (width > height) { if (widthContentImage > heightContentImage) { widthEachPage = widthContentImage; heightEachPage = heightContentImage; } else { widthEachPage = heightContentImage; heightEachPage = widthContentImage; } } else { if (widthContentImage < heightContentImage) { widthEachPage = widthContentImage; heightEachPage = heightContentImage; } else { widthEachPage = heightContentImage; heightEachPage = widthContentImage; } } $("#offscreen").attr('height', heightEachPage); $("#offscreen").attr('width', widthEachPage); var objPageTemp = this.pageObjects; var img = new Image(); img.onload = function () { context.drawImage(img, 0, 0, widthEachPage, heightEachPage); flip(); /* draw linkList */ drawGetWebContent4(context); if (objPageTemp.length > 0) { // draw object for (var i = 0; i < objPageTemp.length; i++) { if (objPageTemp[i].imageUrl != null) { objPageTemp[i].drawPageObject(context); } else { nCountObjectLoad++; if (nCountObjectLoad == pageObjects.length) { /* draw marking */ drawMarkingOnScreen(); /*set status is loading page */ isLoadingObject = false; /* enable controls in page */ if (ClientData.IsAddingMarking() == true) { disableAllControl(); enableButtonMarking() } else { enableAllControl(); } /*finish loading */ $('#divImageLoading').css('display', 'none'); /* set pos video */ zoomVideo(); } } } } else { /* draw marking */ drawMarkingOnScreen(); /*set status is loading page */ isLoadingObject = false; /* enable controls in page */ if (ClientData.IsAddingMarking() == true) { disableAllControl(); enableButtonMarking() } else { enableAllControl(); } /*finish loading */ $('#divImageLoading').css('display', 'none'); /* set pos video */ zoomVideo(); } }; img.src = this.image.src; }; /* If have hitTest on the objects within the page and return PageObject */ ContentPage.prototype.hitTest = function (px, py) { for (var i = 0; i < this.pageObjects.length; i++) { if (this.pageObjects[i].hitTest(px, py)) { return this.pageObjects[i]; } } return null; }; /* search by Object ID */ ContentPage.prototype.findById = function (id) { for (var i = 0; i < this.pageObjects.length; i++) { if (this.pageObjects[i].id == id) { return this.pageObjects[i]; } } return null; }; /** * PageObject Class Definition */ /* constructor */ var PageObject = function (id, imageUrl, x, y, w, h, visible, actionFunction, displayBorder) { }; /* setup each properties */ PageObject.prototype.setup = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, displayBorder) { this.mediaType = mediaType; this.actionType = actionType; this.id = id; this.x = x; this.y = y; this.width = w; this.height = h; this.displayBorder = displayBorder; this.visible = visible; this.imageUrl = imageUrl; this.image = new Image(); this.image.src = this.imageUrl; }; /* prototype hitTest */ PageObject.prototype.hitTest = function (px, py) { if (this.x <= px && px <= (this.x + this.width)) { if (this.y <= py && py <= (this.y + this.height)) { return true; } } return false; }; var check; /* draw page Object */ PageObject.prototype.drawPageObject = function (context) { if (this.visible) { /* init data */ var mediaType = this.mediaType; var displayBorder = this.displayBorder; var x = this.x; var y = this.y; var w = this.width; var h = this.height; if (mediaType == '5') { nCountObjectLoad++; context.strokeStyle = "black"; context.lineWidth = "1"; context.strokeRect(x, y, w, h); } if (this.imageUrl != '') { /* init image */ var img = new Image(); img.onload = function () { nCountObjectLoad++; /* create object store value image */ var objTemp = []; objTemp.mediaType = mediaType; objTemp.img = img; objTemp.x = x; objTemp.y = y; objTemp.w = w; objTemp.h = h; objTemp.displayBorder = displayBorder; /* push to array */ arrImage.push(objTemp); if (mediaType == '2') {/* media */ img.width = 50; img.height = 50; if (img.width > w) { context.drawImage(img, x, y, w, h); } else { /*draw image and border */ context.drawImage(img, x + ((w - img.width) / 2), y + ((h - img.height) / 2), img.width, img.height); if (displayBorder == '1') {/* draw border */ context.strokeStyle = "black"; context.lineWidth = "1"; context.strokeRect(x, y, w, h); } } } else if (mediaType == '3') {/* audio */ img.width = 50; img.height = 50; context.drawImage(img, x, y, img.width, img.height); } else { context.drawImage(img, x, y, w, h); } flip(); if (nCountObjectLoad == pageObjects.length) { /* draw image */ // for(var nIndex = 0; nIndex < arrImage.length; nIndex ++){ // if(arrImage[nIndex].mediaType == '2'){/* media */ // // if(arrImage[nIndex].img.width > arrImage[nIndex].w){ // context.drawImage(arrImage[nIndex].img, arrImage[nIndex].x, arrImage[nIndex].y, arrImage[nIndex].w, arrImage[nIndex].h); // }else{ // /*draw image and border */ // context.drawImage(arrImage[nIndex].img, arrImage[nIndex].x +((arrImage[nIndex].w - arrImage[nIndex].img.width)/2) , arrImage[nIndex].y + ((arrImage[nIndex].h- arrImage[nIndex].img.height)/2), arrImage[nIndex].img.width, arrImage[nIndex].img.height); // if(arrImage[nIndex].displayBorder == '1'){/* draw border */ // context.strokeStyle = "black"; // context.lineWidth = "1"; // context.strokeRect(arrImage[nIndex].x, arrImage[nIndex].y, arrImage[nIndex].w, arrImage[nIndex].h); // } // } // // }else if(arrImage[nIndex].mediaType == '3'){/* audio */ // context.drawImage(arrImage[nIndex].img, arrImage[nIndex].x, arrImage[nIndex].y, arrImage[nIndex].img.width, arrImage[nIndex].img.height); // }else{ // context.drawImage(arrImage[nIndex].img, arrImage[nIndex].x, arrImage[nIndex].y, arrImage[nIndex].w, arrImage[nIndex].h); // } // // } // flip(); /* draw marking */ drawMarkingOnScreen(); /*set status is loading page */ isLoadingObject = false; /* enable controls in page */ if (ClientData.IsAddingMarking() == true) { disableAllControl(); enableButtonMarking() } else { enableAllControl(); } /*finish loading */ $('#divImageLoading').css('display', 'none'); /* set pos video */ zoomVideo(); } }; img.src = this.imageUrl; } else { if (nCountObjectLoad == pageObjects.length) { /* draw marking */ drawMarkingOnScreen(); /*set status is loading page */ isLoadingObject = false; /* enable controls in page */ if (ClientData.IsAddingMarking() == true) { disableAllControl(); enableButtonMarking() } else { enableAllControl(); } /*finish loading */ $('#divImageLoading').css('display', 'none'); /* set pos video */ zoomVideo(); } } } }; /** * Content Class Definition */ var Content = function () { this.pageCount = 0; this.pageIndex = 0; this.pageImages = null; this.pageObjects = null; this.currentPage = null; }; /* ste page images (json data) */ Content.prototype.setPageImages = function (pageCount, imageUrls) { this.pageCount = pageCount; this.pageImages = imageUrls; return this; }; /* set page objects data (json data) */ Content.prototype.setPageObjects = function (pageObjects) { this.pageObjects = pageObjects; return this; }; /* Set up page */ Content.prototype.setUpPage = function (pageIndex) { this.currentPage = createPage( this.pageIndex, this.pageImages, this.pageObjects, function () { adjustPage(); }); return this; }; /* check next page exists */ Content.prototype.hasNextPage = function () { if ((this.pageIndex + 1) > (this.pageCount - 1)) { return false; } return true; }; /* setup next page */ Content.prototype.nextPage = function () { this.pageIndex++; if (this.pageIndex > (this.pageCount - 1)) { this.pageIndex = this.pageCount - 1; } this.setUpPage(this.pageIndex); return this; }; /* check previous page exists */ Content.prototype.hasPreviousPage = function () { if ((this.pageIndex - 1) < 0) { return false; } return true; }; /* setup previous page */ Content.prototype.previousPage = function () { this.pageIndex--; if (this.pageIndex < 0) { this.pageIndex = 0; } this.setUpPage(this.pageIndex); return this; }; /* setup previous page */ Content.prototype.toPage = function (index) { this.pageIndex = eval(index); if (this.pageIndex < 0) { this.pageIndex = 0; } this.setUpPage(this.pageIndex); return this; }; /* check status button move page when change page */ function checkExistNextPrePage() { //check next page if (getContent().hasNextPage()) { //$('#nextpage').show(); //enable('#nextpage'); $('#nextpage').unbind('click'); $('#nextpage').bind('click', nextPage_click); $('#lastpage').unbind('click'); $('#lastpage').bind('click', lastPage_click); if (isTouchDevice() == true) { $('#nextpage').removeClass(); $('#nextpage').addClass('next_device'); $('#lastpage').removeClass(); $('#lastpage').addClass('last_device'); } else { $('#nextpage').removeClass(); $('#nextpage').addClass('next'); $('#lastpage').removeClass(); $('#lastpage').addClass('last'); } } else { //$('#nextpage').hide(); //disable('#nextpage'); $('#nextpage').unbind('click'); $('#lastpage').unbind('click'); if (isTouchDevice() == true) { $('#nextpage').removeClass(); $('#nextpage').addClass('next_off'); $('#lastpage').removeClass(); $('#lastpage').addClass('last_off'); } else { $('#nextpage').removeClass(); $('#nextpage').addClass('next_off'); $('#lastpage').removeClass(); $('#lastpage').addClass('last_off'); } $('#button_next_canvas').css('opacity', '0'); } //check prev page if (getContent().hasPreviousPage()) { //$('#prevpage').show(); //enable('#prevpage'); $('#prevpage').unbind('click'); $('#prevpage').bind('click', prevPage_click); $('#firstpage').unbind('click'); $('#firstpage').bind('click', firstPage_click); if (isTouchDevice() == true) { $('#prevpage').removeClass(); $('#prevpage').addClass('prev_device'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin_device'); } else { $('#prevpage').removeClass(); $('#prevpage').addClass('prev'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin'); } } else { //$('#prevpage').hide(); //disable('#prevpage'); $('#prevpage').unbind('click'); $('#firstpage').unbind('click'); if (isTouchDevice() == true) { $('#prevpage').removeClass(); $('#prevpage').addClass('prev_off'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin_off'); } else { $('#prevpage').removeClass(); $('#prevpage').addClass('prev_off'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin_off'); } $('#button_pre_canvas').css('opacity', '0'); } }; /* init variable */ var content = new Content(); var srcRect = new Rect(0, 0, 0, 0); var destRect = new Rect(0, 0, 0, 0); var isDestPositionDetect = false; var destPosX = 0, destPosY = 0; var moveX = 0, moveY = 0; var userScale = 1; var scaleDelta = 0.5; var scaleX, scaleY; var canvasObject; var contextObject; var objType4_5 = []; /*var objType5; var isObjType4 = false; var isObjType5 = false;*/ /* variable for event mouse */ var moveFlag = false; var cancelClick = false; var timeCreateMemo; var imageData; var isLoadBackgroundComplete = false; /* Point objects */ var Point = function (x, y) { this.x = x; this.y = y; }; /** * constants */ var marginX = 13; var marginY = 65; /** * Transition Class Definition */ var Transition = function () { }; /* Flip Next Page Transition */ Transition.prototype.flipNextPage = function () { var w = $('#main').attr('width'); removeObject(); if (getContent().hasNextPage()) { context_main.clearRect(0, 0, canvas_main.width, canvas_main.height); $('#main').animate( { left: '-' + w + 'px' }, { duration: "slow", complete: function () { // change page $('#main').css('left', w + 'px'); // animate $('#main').animate( { left: marginX + 'px' }, { duration: 'slow', complete: function () { isFirstLoad = true; screenFit(); } }); //change pageIndex and image bookmark getContent().nextPage(); initImageBookmark(); checkExistNextPrePage(); changeSlider(getContent().pageIndex); /* init image had draw */ initDisplayMarking(); /* change title of page */ if (dataPageTitle[getContent().pageIndex]) { if (dataPageTitle[getContent().pageIndex] != '') { document.title = contentName + '_' + dataPageTitle[getContent().pageIndex] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } /* set end log */ SetEndLog(contentID); } }); } }; /* Flip Previous Page Transition */ Transition.prototype.flipPreviousPage = function () { var w = $('#main').attr('width'); removeObject(); if (getContent().hasPreviousPage()) { context_main.clearRect(0, 0, canvas_main.width, canvas_main.height); $('#main').animate( { left: w + 'px' }, { duration: "slow", complete: function () { $('#main').css('left', -w + 'px'); $('#main').animate( { left: marginX + 'px' }, { duration: 'slow', complete: function () { isFirstLoad = true; screenFit(); } }); //change pageIndex and image bookmark getContent().previousPage(); initImageBookmark(); checkExistNextPrePage(); changeSlider(getContent().pageIndex); /* init image had draw */ initDisplayMarking(); /* change title of page */ if (dataPageTitle[getContent().pageIndex]) { if (dataPageTitle[getContent().pageIndex] != '') { document.title = contentName + '_' + dataPageTitle[getContent().pageIndex] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } /* set end log */ SetEndLog(contentID); } }); } }; /* Flip Page Transition */ Transition.prototype.flipToPage = function (index) { var w = $('#main').attr('width'); if (index == getContent().pageIndex) { /* init image had draw */ initDisplayMarking(); } else if (index < getContent().pageIndex) { context_main.clearRect(0, 0, canvas_main.width, canvas_main.height); removeObject(); $('#main').animate( { left: w + 'px' }, { duration: "slow", complete: function () { $('#main').css('left', -w + 'px'); $('#main').animate( { left: marginX + 'px' }, { duration: 'slow', complete: function () { isFirstLoad = true; screenFit(); } }); //change pageIndex and image bookmark getContent().toPage(index); initImageBookmark(); checkExistNextPrePage(); changeSlider(index); /* init image had draw */ initDisplayMarking(); /* change title of page */ if (dataPageTitle[index]) { if (dataPageTitle[index] != '') { document.title = contentName + '_' + dataPageTitle[index] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } /* set end log */ SetEndLog(contentID); } } ); } else { context_main.clearRect(0, 0, canvas_main.width, canvas_main.height); removeObject(); $('#main').animate( { left: '-' + w + 'px' }, { duration: "slow", complete: function () { $('#main').css('left', w + 'px'); $('#main').animate( { left: marginX + 'px' }, { duration: 'slow', complete: function () { isFirstLoad = true; screenFit(); } }); //change pageIndex and image bookmark getContent().toPage(index); initImageBookmark(); checkExistNextPrePage(); changeSlider(index); /* init image had draw */ initDisplayMarking(); /* change title of page */ if (dataPageTitle[index]) { if (dataPageTitle[index] != '') { document.title = contentName + '_' + dataPageTitle[index] + ' | ' + i18nText('sysAppTitle'); } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } } else { document.title = contentName + ' | ' + i18nText('sysAppTitle'); } /* set end log */ SetEndLog(contentID); } }); } }; /* remove all object when change page */ function removeObject() { $('#text').children().remove(); /* close dialog */ if (isOpenPopUpText == true) { isOpenPopUpText = false; ClosePopupText(); } $("#bgmConfirm").hide(); $("#boxCopyText").hide(); $("#boxSearching").hide(); $("#boxIndex").hide(); $("#boxBookMark").hide(); $('#pop_up_memo').hide(); isSendingData = false; isDisplayBookMarkList = false; isDisplayCopyText = false; isDisplayListIndex = false; if ($('#playvideo').children().length > 0) { $('#playvideo').children().remove(); } if ($('#playaudio').children().length > 0) { $('#playaudio').children().remove(); } if ($('#playaudiopage').children().length > 0) { if (avwUserEnvObj.os != "ipad") { $('#playaudiopage').children().remove(); } } if (avwUserEnvObj.browser == 'firefox') { srcAudioType0 = ''; TypeAudio0 = ''; srcAudioType2 = ''; TypeAudio2 = ''; } else { /* do nothing */ } hideDialog(); /* play background audio */ playAllAudio(); /* mediaType = 4 */ mediaType4_changeImage = 0; }; /* Initialize PageViewer Component */ function initializeViewerComponent(viewId) { /* add some tags we need.*/ $('#' + viewId).prepend( '<canvas id="main"></canvas>' + '<canvas id="offscreen"></canvas>' + '<canvas id="draw_canvas"></canvas>' + '<canvas id="marker_canvas"></canvas>' + '<div id="playvideo"></div>' + '<div id="playaudio" style="width:0px; height:0px;"></div>' + '<div id="playaudiopage" style="width:0px; height:0px;"></div>' + '<div id="playaudioallpage" style="width:0px; height:0px;"></div>' + '<div id="text"></div>' ); /* apply css style */ $('#main').css( { 'position': 'absolute', 'top': marginY + 'px', 'left': marginX + 'px', 'box-shadow': '3px 3px 14px #333', 'background-color': 'rgba(153, 153, 153, 0.7)', 'border-radius': '4px' } ); $('#offscreen').css( { 'visibility': 'hidden', 'display': 'none' } ); $('#marker_canvas').css( { 'display': 'none', 'position': 'absolute', 'cursor': 'default' } ); $('#draw_canvas').css( { 'display': 'none', 'position': 'absolute', 'cursor': 'default' } ); $('#playvideo').css( { 'position': 'fixed', 'top': marginY + 'px', 'left': marginX + 'px' } ); //set default event setDefaultEvent(); /*init canvas value */ canvas_marker = document.getElementById('marker_canvas'); context_marker = canvas_marker.getContext('2d'); canvas_draw = document.getElementById('draw_canvas'); context_draw = canvas_draw.getContext('2d'); canvas_main = document.getElementById('main'); context_main = canvas_main.getContext('2d'); canvas_offscreen = document.getElementById('offscreen'); context_offscreen = canvas_offscreen.getContext('2d'); }; function onClick_CanvasMain(event) { if (!cancelClick) { //change coordinates var imagePt = screenToImage(event.pageX, event.pageY); var canvasWidth = $('#offscreen').width(); posXPopupMemo = event.pageX; posYPopupMemo = event.pageY; if ((event.pageX - marginX) >= destRect.left && (event.pageX - marginX) <= destRect.right) { /* click add memo */ if (ClientData.IsAddingMemo() == true) { if (!ClientData.memo_copyText()) { AddMemo(contentID, changePageIndex(getPageIndex()), $('#divDialogMemo'), event.pageX, event.pageY, function () { //set flag change memo ClientData.isChangedMemo(true); ClientData.IsAddingMemo(false); /* refresh draw memo */ drawMemoOnScreen(); //change image $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); }); } else { if (typeSelectMemo == 1) { /* add new */ AddMemo(contentID, changePageIndex(getPageIndex()), $('#divDialogMemo'), posXPopupMemo, posYPopupMemo, function () { //set flag change memo ClientData.isChangedMemo(true); ClientData.IsAddingMemo(false); /* refresh draw memo */ drawMemoOnScreen(); //change image $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); }); } else if (typeSelectMemo == 2) { /* copy */ CopyMemo(ClientData.memo_copyText(), contentID, changePageIndex(getPageIndex()), $('#divDialogMemo'), posXPopupMemo, posYPopupMemo, function () { //set flag change memo ClientData.isChangedMemo(true); ClientData.IsAddingMemo(false); /* refresh draw memo */ drawMemoOnScreen(); //change image $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); }); } } } else { var isClickMemo = false; if (isOpenPopUpText == true) { isOpenPopUpText = false; ClosePopupText(); } if (isOpenPopUpMemo == true) { isOpenPopUpMemo = false; $("#pop_up_memo").hide(); } /* click memo edit */ if (ClientData.IsDisplayMemo() == true) { getAllMemoOfPage(); /* check exist object memo in mouse position */ for (var nIndex = 0; nIndex < memoObjects.length; nIndex++) { var hitPageObjMemo = memoObjects[nIndex]; if (hitPageObjMemo.hitTest(imagePt.x, imagePt.y)) { //console.log("PageObject Hit!! Id: " + hitPageObjMemo.id); //hitPageObjMemo.action(); /* save object memo */ objEditMemo = hitPageObjMemo; var posMemoX = event.pageX; var posMemoY = event.pageY; if (imagePt.y > heightEachPage - $("#pop_up_memo").height()) { posMemoY = posMemoY - $("#pop_up_memo").height(); } if (imagePt.x > widthEachPage - $("#pop_up_memo").width()) { posMemoX = posMemoX - $("#pop_up_memo").width(); } /*display pop-up-memo */ $("#pop_up_memo").css('top', posMemoY).css('left', posMemoX); $("#pop_up_memo").show(); /*set true for flag click memo */ isClickMemo = true; isOpenPopUpMemo = true; } } } /* click pageObject */ if (isClickMemo == false) { var isClickLinkList = false; /* check exist object in mouse position */ var hitPageObj = getContent().currentPage.hitTest(imagePt.x, imagePt.y); if (hitPageObj) { //console.log("PageObject Hit!! Id: " + hitPageObj.id); hitPageObj.action(); } else { /* check click link list */ for (var nIndex = 0; nIndex < webGetContentType4Objects.length; nIndex++) { var hitPageObjLinkList = webGetContentType4Objects[nIndex]; if (hitPageObjLinkList.hitTest(imagePt.x, imagePt.y)) { //console.log("PageObject Hit!! Id: " + hitPageObjLinkList.id); hitPageObjLinkList.action(); /*set true for flag click memo */ isClickLinkList = true; } } if (isClickLinkList == false && ClientData.IsAddingMarking() == false) { /* area next and prev page */ var cwMain = $('#main').width(); if (event.pageX > 0 && event.pageX < 300) { prevPage_click(); } else if (event.pageX > (cwMain - 300) && event.pageX < cwMain) { nextPage_click(); } } } } } } else { if (ClientData.IsAddingMarking() == false && isCopyMemo == false) { var cwMain = $('#main').width(); if (event.pageX > 0 && event.pageX < 300) { prevPage_click(); } else if (event.pageX > (cwMain - 300) && event.pageX < cwMain) { nextPage_click(); } } } } cancelClick = false; }; function mouseMove_canvasMain(event) { event.preventDefault(); /* base image move when userScale over 1 */ if (moveFlag && userScale != 1) { $('#main').css('cursor', 'pointer'); cancelClick = true; var mx; var my; // calc mouse moving distance if (avwUserEnvObj.os != "ipad" && avwUserEnvObj.os != "android") { mx = event.pageX - px; my = event.pageY - py; } else { mx = event.targetTouches[0].pageX - px; my = event.targetTouches[0].pageY - py; } // scaling // var sx = (destRect.right - destRect.left) / (srcRect.right - srcRect.left); // var sy = (destRect.bottom - destRect.top) / (srcRect.bottom - srcRect.top); var sx = 1 / userScale; var sy = 1 / userScale; // calc scaling moving distance moveX = Math.round(-mx * sx); moveY = Math.round(-my * sy); // store current mouse point if (avwUserEnvObj.os != "ipad" && avwUserEnvObj.os != "android") { px = event.pageX; py = event.pageY; } else { px = event.targetTouches[0].pageX; py = event.targetTouches[0].pageY; } // redraw flip(); zoomVideo(); closeDialogPopUpText(); } var cwMain = $('#main').width(); var chMain = $('#main').height(); /* handle image prev on canvas */ if (getContent().hasPreviousPage()) { $('#button_pre_canvas').mousemove(function () { if (getContent().hasPreviousPage()) { $(this).css('opacity', '1'); } else { $(this).css('opacity', '0'); } }); if (event.pageX > 0 && event.pageX < 300) { $('#button_pre_canvas').css('opacity', '0.25'); } else { $('#button_pre_canvas').css('opacity', '0'); } } else { $('#button_pre_canvas').css('opacity', '0'); } /* handle image next on canvas */ if (getContent().hasNextPage()) { $('#button_next_canvas').mousemove(function () { if (getContent().hasNextPage()) { $(this).css('opacity', '1'); } else { $(this).css('opacity', '0'); } }); if (event.pageX > (cwMain - 300) && event.pageX < cwMain) { $('#button_next_canvas').css('opacity', '0.25'); } else { $('#button_next_canvas').css('opacity', '0'); } } else { $('#button_next_canvas').css('opacity', '0'); } }; function mouseDown_CanvasMain(event) { moveFlag = true; if (isTouchDevice() != true) { event.preventDefault(); } $('#main').css('cursor', 'default'); /*if(event.originalEvent) { if(event.originalEvent.targetTouches) { if(event.originalEvent.targetTouches[0].pageX) { px = event.originalEvent.targetTouches[0].pageX; } } }*/ // if(event.originalEvent.targetTouches[0].pageY){ // py = event.originalEvent.targetTouches[0].pageY; // } //py = Number(event.originalEvent.targetTouches[0].pageY); if (avwUserEnvObj.os != "ipad" && avwUserEnvObj.os != "android") { px = event.pageX; py = event.pageY; } else { px = event.targetTouches[0].pageX; py = event.targetTouches[0].pageY; } // document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none'; // lastX = event.offsetX || (event.pageX - canvas_main.offsetLeft); // lastY = event.offsetY || (event.pageY - canvas_main.offsetTop); // dragStart = context_main.transformedPoint(lastX,lastY); }; function mouseUp_CanvasMain(event) { moveFlag = false; $('#main').css('cursor', 'default'); }; /* View Component setDefaultEvent */ function setDefaultEvent() { document.getElementById('main').addEventListener('click', onClick_CanvasMain, false); document.getElementById('divCheckExistMarking').addEventListener('click', onClick_CanvasMain, false); if (isTouchDevice() == true) { document.getElementById('main').addEventListener('touchstart', mouseDown_CanvasMain, false); document.getElementById('main').addEventListener('touchmove', mouseMove_canvasMain, false); document.getElementById('main').addEventListener('touchend', mouseUp_CanvasMain, false); } else { document.getElementById('main').addEventListener('mousedown', mouseDown_CanvasMain, false); document.getElementById('main').addEventListener('mousemove', mouseMove_canvasMain, false); document.getElementById('main').addEventListener('mouseup', mouseUp_CanvasMain, false); document.getElementById('divCheckExistMarking').addEventListener('mousedown', mouseDown_CanvasMain, false); document.getElementById('divCheckExistMarking').addEventListener('mousemove', mouseMove_canvasMain, false); document.getElementById('divCheckExistMarking').addEventListener('mouseup', mouseUp_CanvasMain, false); $('#main').mouseout(function (event) { if (moveFlag) { moveFlag = false; } $('#button_pre_canvas').css('opacity', '0'); $('#button_next_canvas').css('opacity', '0'); }); } /*$('#main').bind("click",onClick_CanvasMain); $('#main').bind("mousemove touchmove",mouseMove_canvasMain); $('#main').bind("mousedown touchstart",mouseDown_CanvasMain); $('#main').bind("mouseup touchend",mouseUp_CanvasMain); document.getElementById('main').addEventListener('click',onClick_CanvasMain,false); document.getElementById('main').addEventListener('touchstart',mouseDown_CanvasMain,false); document.getElementById('main').addEventListener('mousedown',mouseDown_CanvasMain,false); document.getElementById('main').addEventListener('mousemove touchmove',mouseMove_canvasMain,false); document.getElementById('main').addEventListener('mouseup touchend',mouseUp_CanvasMain,false);*/ }; /*disable all control when click copy memo */ function disableControlsCopyMemo() { /* set cursor pointer*/ $("#imgHome").css('cursor', 'default'); $("#imgBack").css('cursor', 'default'); $("#listbookmark").css('cursor', 'default'); $("#imgbookmark").css('cursor', 'default'); $("#listindex").css('cursor', 'default'); $("#copytext").css('cursor', 'default'); $("#imgmemo").css('cursor', 'default'); $("#imgaddmemo").css('cursor', 'default'); $("#imgmarking").css('cursor', 'default'); $("#imgmarkingtoolbar").css('cursor', 'default'); $("#firstpage").css('cursor', 'default'); $("#prevpage").css('cursor', 'default'); $("#nextpage").css('cursor', 'default'); $("#lastpage").css('cursor', 'default'); $('#imgHome').unbind('click'); $('#imgHome').removeClass(); $('#imgHome').addClass('home_off'); /* back button */ $('#imgBack').unbind('click'); $('#imgBack').removeClass(); $('#imgBack').addClass('back_off'); /*list bookmark */ $('#listbookmark').unbind('click'); $('#listbookmark').removeClass(); $('#listbookmark').addClass('bmList_off'); $('#imgbookmark').unbind('click'); $('#imgbookmark').removeClass(); $('#imgbookmark').addClass('bmAdd_off'); $('#listindex').unbind('click'); $('#listindex').removeClass(); $('#listindex').addClass('index_off'); $('#copytext').unbind('click'); $('#copytext').removeClass(); $('#copytext').addClass('copy_off'); /* imgage display memo */ $('#imgmemo').unbind('click'); $('#imgmemo').removeClass(); $('#imgmemo').addClass('memoDisplay_off'); /* image add memo */ $('#imgaddmemo').unbind('click'); $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd_off'); $('#imgmarking').unbind('click'); $('#imgmarking').removeClass(); $('#imgmarking').addClass('marking_off'); /* check is loading page */ $('#imgmarkingtoolbar').unbind('click'); $('#imgmarkingtoolbar').removeClass(); $('#imgmarkingtoolbar').addClass('markingToolbar_off'); $('#firstpage').unbind('click'); $('#firstpage').removeClass(); $('#firstpage').addClass('begin_off'); $('#prevpage').unbind('click'); $('#prevpage').removeClass(); $('#prevpage').addClass('prev_off'); $('#nextpage').unbind('click'); $('#nextpage').removeClass(); $('#nextpage').addClass('next_off'); $('#lastpage').unbind('click'); $('#lastpage').removeClass(); $('#lastpage').addClass('last_off'); if (avwUserEnvObj.os != "android") { $("#slider_page").slider("option", "disabled", true); } disable('#txtSearch', '#txtSlider'); $('#button_next_canvas').css('display', 'none'); $('#button_pre_canvas').css('display', 'none'); }; /*enable all control when finish copy memo */ function enableControlsCopyMemo() { disableControlsCopyMemo(); /* set cursor pointer*/ $("#imgHome").css('cursor', 'pointer'); $("#imgBack").css('cursor', 'pointer'); $("#listbookmark").css('cursor', 'pointer'); $("#imgbookmark").css('cursor', 'pointer'); $("#listindex").css('cursor', 'pointer'); $("#copytext").css('cursor', 'pointer'); $("#imgmemo").css('cursor', 'pointer'); $("#imgaddmemo").css('cursor', 'pointer'); $("#imgmarking").css('cursor', 'pointer'); $("#imgmarkingtoolbar").css('cursor', 'pointer'); $("#firstpage").css('cursor', 'pointer'); $("#prevpage").css('cursor', 'pointer'); $("#nextpage").css('cursor', 'pointer'); $("#lastpage").css('cursor', 'pointer'); $("#control_screen").removeClass(); $("#control_screen_2").removeClass(); $('#imgHome').bind('click', imgHome_click); $('#imgHome').removeClass(); $('#imgBack').bind('click', imgBack_click); $('#imgBack').removeClass(); /*list bookmark */ $('#listbookmark').bind('click', showListBookMark); $('#listbookmark').removeClass(); $('#imgbookmark').bind('click', bookmarkPage); $('#imgbookmark').removeClass(); $('#listindex').bind('click', showListPageIndex); $('#listindex').removeClass(); $('#copytext').bind('click', showCopyText); $('#copytext').removeClass(); /* image memo */ $('#imgmemo').bind('click', handleMemo); $('#imgmemo').removeClass(); /* image add memo */ $('#imgaddmemo').bind('click', handleAddMemo); $('#imgaddmemo').removeClass(); $('#imgmarking').bind('click', imgmarking_click); $('#imgmarking').removeClass(); if (ClientData.serviceOpt_marking() == 'Y') { $('#imgmarkingtoolbar').bind('click', handleDrawCanvas); $('#imgmarkingtoolbar').removeClass(); } /*$('#firstpage').bind('click',firstPage_click); $('#firstpage').removeClass(); $('#prevpage').bind('click',prevPage_click); $('#prevpage').removeClass(); $('#nextpage').bind('click',nextPage_click); $('#nextpage').removeClass(); $('#lastpage').bind('click',lastPage_click); $('#lastpage').removeClass();*/ $("#slider_page").slider("option", "disabled", false); enable('#txtSearch', '#txtSlider'); if (avwUserEnvObj.os != "ipad" && avwUserEnvObj.os != "android") { $('#button_next_canvas').css('display', 'block'); $('#button_pre_canvas').css('display', 'block'); } if (isTouchDevice() == true) {/* set css for device */ $('#imgHome').addClass('home_device'); $('#imgBack').addClass('back_device'); /*$('#firstpage').addClass('begin_device'); $('#prevpage').addClass('prev_device'); $('#nextpage').addClass('next_device'); $('#lastpage').addClass('last_device');*/ $("#control_screen").addClass('toolbar_device'); $("#control_screen_2").addClass('toolbar_device'); var nBookmarkId = isExistBookmark(); if (nBookmarkId == -1) { $('#imgbookmark').addClass('bmAdd_device'); } else { $('#imgbookmark').addClass('bmAdd_hover'); } if (isDisplayBookMarkList == true) { $('#listbookmark').addClass('bmList_hover'); } else { $('#listbookmark').addClass('bmList_device'); } if (isDisplayCopyText == true) { $('#copytext').addClass('copy_hover'); } else { $('#copytext').addClass('copy_device'); } if (isDisplayListIndex == true) { $('#listindex').addClass('index_hover'); } else { $('#listindex').addClass('index_device'); } if (ClientData.IsDisplayMemo() == true) { $('#imgmemo').addClass('memoDisplay_hover'); } else { $('#imgmemo').addClass('memoDisplay_device'); } if (ClientData.IsAddingMemo() == true) { $('#imgaddmemo').addClass('memoAdd_hover'); } else { $('#imgaddmemo').addClass('memoAdd_device'); } if (ClientData.IsDisplayMarking() == true) { $('#imgmarking').addClass('marking_hover'); } else { $('#imgmarking').addClass('marking_device'); } if (ClientData.serviceOpt_marking() == 'Y') { if (ClientData.IsAddingMarking() == true) { $('#imgmarkingtoolbar').addClass('markingToolbar_hover'); } else { $('#imgmarkingtoolbar').addClass('markingToolbar_device'); } } } else { /* set css for PC */ $('#imgHome').addClass('home'); $('#imgBack').addClass('back'); /*$('#firstpage').addClass('begin'); $('#prevpage').addClass('prev'); $('#nextpage').addClass('next'); $('#lastpage').addClass('last');*/ $("#control_screen").addClass('toolbar'); $("#control_screen_2").addClass('toolbar'); var nBookmarkId = isExistBookmark(); if (nBookmarkId == -1) { $('#imgbookmark').addClass('bmAdd'); } else { $('#imgbookmark').addClass('bmAdd_hover'); } if (isDisplayBookMarkList == true) { $('#listbookmark').addClass('bmList_hover'); } else { $('#listbookmark').addClass('bmList'); } if (isDisplayCopyText == true) { $('#copytext').addClass('copy_hover'); } else { $('#copytext').addClass('copy'); } if (isDisplayListIndex == true) { $('#listindex').addClass('index_hover'); } else { $('#listindex').addClass('index'); } if (ClientData.IsDisplayMemo() == true) { $('#imgmemo').addClass('memoDisplay_hover'); } else { $('#imgmemo').addClass('memoDisplay'); } if (ClientData.IsAddingMemo() == true) { $('#imgaddmemo').addClass('memoAdd_hover'); } else { $('#imgaddmemo').addClass('memoAdd'); } if (ClientData.IsDisplayMarking() == true) { $('#imgmarking').addClass('marking_hover'); } else { $('#imgmarking').addClass('marking'); } if (ClientData.serviceOpt_marking() == 'Y') { if (ClientData.IsAddingMarking() == true) { $('#imgmarkingtoolbar').addClass('markingToolbar_hover'); } else { $('#imgmarkingtoolbar').addClass('markingToolbar'); } } } checkExistNextPrePage(); }; /* Change Coordinate Screen to Image */ function screenToImage(x, y) { var pt = new Point(0, 0); // get current position of mouse on screen if (isFullScreen == true) { pt.x = x - marginX; pt.y = y; } else { pt.x = x - marginX; pt.y = y - marginY; } var sx = (destRect.right - destRect.left) / (srcRect.right - srcRect.left); var sy = (destRect.bottom - destRect.top) / (srcRect.bottom - srcRect.top); // change size image correct var nx = (pt.x - destRect.left) / sx; var ny = (pt.y - destRect.top) / sy; pt.x = Math.floor(nx + srcRect.left); pt.y = Math.floor(ny + srcRect.top); //console.log('screenToImage ' + srcRect.right + ' ' + srcRect.left + ' ' + destRect.right + ' ' + destRect.left + ' ' + x + ' ' + sx + ' ' + nx + ' ' + pt.x + ' ' + srcRect.bottom + ' ' + srcRect.top + ' ' + destRect.bottom + ' ' + destRect.top + ' ' + y + ' ' + sy + ' ' + ny + ' ' + pt.y); return pt; }; /* grab viewer content object */ function getContent() { return content; }; /* create page */ function createPage(pageNumber, pageImage, pageObjects, onCompleteFunc) { var page = new ContentPage(pageNumber, pageImage); /* add page Object */ page.addPageObjects(pageObjects); /* load page */ page.load(onCompleteFunc); return page; }; /* Adjust page size */ function adjustPage(width, height) { /*$("#offscreen").attr('height', getContent().currentPage.image.height); $("#offscreen").attr('width', getContent().currentPage.image.width); */ drawCanvas(); }; /* draw Canvas */ function drawCanvas() { var canvas = document.getElementById('offscreen'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); /* draw canvas */ draw(context); /*screen to image */ //flip(); }; /* draw memo */ function drawMemoOnScreen() { var canvas = document.getElementById('offscreen'); var context = canvas.getContext('2d'); if (ClientData.IsDisplayMemo() == true) { memoObjects = []; /*get data memo */ var memoData = ClientData.MemoData(); for (var nIndex = 0; nIndex < memoData.length; nIndex++) { if (memoData[nIndex].contentid == contentID && memoData[nIndex].pageNo == changePageIndex(getPageIndex())) { /* create object of memo */ var memoObject = null; if (memoData[nIndex].posY > heightEachPage - 50) { memoData[nIndex].posY = heightEachPage - 50; } if (memoData[nIndex].posX > widthEachPage - 50) { memoData[nIndex].posX = widthEachPage - 50; } memoObject = new memo( nIndex, memoData[nIndex].Text, memoData[nIndex].posX, memoData[nIndex].posY, 36, 47, "img/memo.png" ); memoObjects.push(memoObject); memoObject.drawMemo(context); } } } }; /* get all memo on page */ function getAllMemoOfPage() { if (ClientData.IsDisplayMemo() == true) { memoObjects = []; /*get data memo */ var memoData = ClientData.MemoData(); for (var nIndex = 0; nIndex < memoData.length; nIndex++) { if (memoData[nIndex].contentid == contentID && memoData[nIndex].pageNo == changePageIndex(getPageIndex())) { /* create object of memo */ var memoObject = null; if (memoData[nIndex].posY > heightEachPage - 50) { memoData[nIndex].posY = heightEachPage - 50; } if (memoData[nIndex].posX > widthEachPage - 50) { memoData[nIndex].posX = widthEachPage - 50; } memoObject = new memo( nIndex, memoData[nIndex].Text, memoData[nIndex].posX, memoData[nIndex].posY, 50, 50, "img/memo.png" ); memoObjects.push(memoObject); } } } }; /* draw webGetContent4 */ function drawGetWebContent4(context) { webGetContentType4Objects = []; for (var nIndex = 0; nIndex < dataJsonType4.length; nIndex++) { /* get data belong current page*/ if (changePageIndex(getPageIndex()) == dataJsonType4[nIndex].page) { var dataLinkList = dataJsonType4[nIndex].linkList; for (var nLinkList = 0; nLinkList < dataLinkList.length; nLinkList++) { /* create object webContentTyp4 */ var dataObject = null; dataObject = new webContentType4( nLinkList, dataLinkList[nLinkList].linkLocationX, dataLinkList[nLinkList].linkLocationY, dataLinkList[nLinkList].linkLocationWidth, dataLinkList[nLinkList].linkLocationHeight, "img/webGetContent4.png", dataLinkList[nLinkList].linkKind, dataLinkList[nLinkList].destURI, dataLinkList[nLinkList].destPageNumber ); webGetContentType4Objects.push(dataObject); dataObject.drawObject(context); } } } }; /* draw marking */ function drawMarkingOnScreen() { var canvas = document.getElementById('offscreen'); var context = canvas.getContext('2d'); var canvasWidth = $('#offscreen').width(); var canvasHeight = $('#offscreen').height(); var indexMarking; if (ClientData.IsAddingMarking() == false && ClientData.IsDisplayMarking() == true) { var isExistDrawing = false; /* get data marking on local */ var dataMarking = ClientData.MarkingData(); for (var nIndex = 0; nIndex < dataMarking.length; nIndex++) { if (dataMarking[nIndex].contentid == contentID && dataMarking[nIndex].pageNo == changePageIndex(getPageIndex())) { /*create image */ var img = new Image(); img.onload = function () { //context.drawImage(img,dataMarking[indexMarking].left,0,dataMarking[indexMarking].right - dataMarking[indexMarking].left,dataMarking[indexMarking].bottom - dataMarking[indexMarking].top,0,0,canvasWidth,canvasHeight); context.drawImage(img, 0, 0, canvasWidth, canvasHeight); flip(); /* set flag */ isExistDrawing = true; /* draw memo */ drawMemoOnScreen(); }; img.src = dataMarking[nIndex].content; indexMarking = nIndex; } } if (isExistDrawing == false) { /* draw memo */ drawMemoOnScreen(); } } else { /* draw memo */ drawMemoOnScreen(); } }; /*draw canvas*/ function draw(context) { context.save(); /* draw page objects */ getContent().currentPage.drawPage(context); /* draw memo */ //drawMemoOnScreen(); context.restore(); initImageCheckMarking(); }; /* init image if exist marking in page */ function initImageCheckMarking() { /* set draw image if exist */ var dataMarking = ClientData.MarkingData(); var isExistMarking = false; for (var nIndex = 0; nIndex < dataMarking.length; nIndex++) { if (dataMarking[nIndex].contentid == contentID && dataMarking[nIndex].pageNo == changePageIndex(getPageIndex())) { isExistMarking = true; break; } } /* init image display or not */ if (ClientData.IsAddingMarking() == true) { $('#divCheckExistMarking').hide(); } else { if (isExistMarking == true) { $('#divCheckExistMarking').show(); } else { $('#divCheckExistMarking').hide(); } } }; var leftCanvas = 0; var topCanvas = 0; var count = 0; /* display to screen */ function flip() { var canvas = document.getElementById('main'); var offscreen = document.getElementById('offscreen'); var context = canvas.getContext('2d'); var contextOffscreen = offscreen.getContext('2d'); // init rect if (srcRect.width == 0) { srcRect = new Rect(0, 0, offscreen.width, offscreen.height); } // display rect srcRect.add(moveX, moveY); // fix rect if (srcRect.left < 0) { srcRect.left = 0; srcRect.right = srcRect.left + srcRect.width; } else if (srcRect.right > offscreen.width) { srcRect.left = offscreen.width - srcRect.width; srcRect.right = offscreen.width } if (srcRect.top < 0) { srcRect.top = 0; srcRect.bottom = srcRect.top + srcRect.height; } else if (srcRect.bottom > offscreen.height) { srcRect.top = offscreen.height - srcRect.height; srcRect.bottom = offscreen.height; } // target rect var width = offscreen.width; var height = offscreen.height; var aspect = offscreen.width / offscreen.height; if (canvas.width > canvas.height) { height = canvas.height; width = height * aspect; /*if(width > canvas.width) { width = canvas.width; height = width / aspect; }*/ } else { width = canvas.width; height = width / aspect; } if (height > canvas.height) { var size = canvas.height / height; height = canvas.height; width = width * size; } if (width > canvas.width) { var size = canvas.width / width; width = canvas.width; height = height * size; } if (userScale != 1 && width < canvas.width) { width = width * userScale; if (width > canvas.width) { //var size = canvas.width / width; width = canvas.width; //height = height * size; } } else if (userScale != 1 && height < canvas.height) { height = height * userScale; if (height > canvas.height) { //var size = canvas.height / height; height = canvas.height; //width = width * size; } } var destX = 0, destY = 0; destX = (canvas.width / 2) - (width / 2); destY = (canvas.height / 2) - (height / 2); if (destX < 0) { destX = 0; } if (destY < 0) { destY = 0; } if (srcRect.left < 0) { srcRect.left = 0; } if (srcRect.top < 0) { srcRect.top = 0; } destRect = new Rect(destX, destY, width, height); /* get position for drawing canvas*/ if (isFirstLoad == true) { nPositionCanvas.left = destRect.left; nPositionCanvas.right = destRect.right; nPositionCanvas.top = destRect.top; nPositionCanvas.bottom = destRect.bottom; $("#draw_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top + marginY) .css('left', destRect.left + marginX); $("#marker_canvas").attr('height', destRect.bottom - destRect.top) .attr('width', destRect.right - destRect.left) .css('top', destRect.top + marginY) .css('left', destRect.left + marginX); isFirstLoad = false; } leftCanvas = destX; topCanvas = destY; // change scale scaleX = offscreen.width / width; scaleY = offscreen.height / height; // draw canvas context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.drawImage(offscreen, srcRect.left, srcRect.top, srcRect.right - srcRect.left, srcRect.bottom - srcRect.top, destRect.left, destRect.top, width, height); context.restore(); }; /* mediaType = 1 and actionType = 0 linkURL object*/ var imageNoAction = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { //no action }; }; imageNoAction.prototype = new PageObject(); /* mediaType=1 Video object : extends PageObject */ var videoType1 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, mediaFile, media) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { if (media != '') { /* stop all audio on page */ stopAllAudio(); createVideoFulScreen(mediaFile, id); $("#btnCloseVideo").click(function (e) { hideDialog(); /* play audio */ playAllAudio(); }); showDialog(true); } }; }; videoType1.prototype = new PageObject(); /* mediaType=1 and actionType = 2 Audio object : extends PageObject */ var audioType1 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, audioFile) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { createAudio(audioFile, "0") }; }; audioType1.prototype = new PageObject(); /* mediaType = 1 and actionType = 3 linkURL object*/ var linkURL = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, linkUrl, browserType) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, null); this.action = function () { window.open(linkUrl, "_blank", "new window"); }; }; linkURL.prototype = new PageObject(); /* mediaType = 1 and actionType = 4 imagePreview object*/ var imagePreview = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, imagePreview) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { createImagePreview(); showImagePreview($('#divImagePreview'), imagePreview); $("#btnClose").live('click', hideDialog); showDialog(true); }; }; imagePreview.prototype = new PageObject(); function showDialog(modal) { $("#overlay").show(); $("#dialog").fadeIn(300); if (modal) { $("#overlay").unbind("click"); } else { $("#overlay").click(function (e) { hideDialog(); }); } }; function hideDialog() { $("#overlay").hide(); $("#dialog").fadeOut(300); $('#dialog').children().remove(); }; function createImagePreview() { $('#dialog').prepend( '<h1 style="height:25px;background:url(./img/viewer/pophdbg.png) 0 0 repeat" >' + '<img src="img/viewer/x.png" style="margin:3px 3px 0px 21px" id="btnClose" class="align_right" ></img>' + '</h1>' + '<div id="divImagePreview" class="content_image_preview">' + '</div>' ); $('#dialog').css('box-shadow', '0px 0px 3px 1px #666'); $('#dialog').css('border', 'solid 1px #666'); $('#dialog').draggable({ handle: "h1" }); }; /* mediaType = 1 and actionType = 5 jumpPage object*/ var jumpPage = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, jumpPage) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { if ((Number(jumpPage) - 1) != getPageIndex()) { changePage(Number(jumpPage) - 1); } }; }; jumpPage.prototype = new PageObject(); /* mediaType = 1 and actionType = 6 send mail object*/ var sendMail = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, emailSubject, emailAddress) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { MailTo(emailAddress, emailSubject); }; }; sendMail.prototype = new PageObject(); /* mediaType = 1 and actionType = 8 open popup object*/ var openPopUp = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, content) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { isOpenPopUpText = true; var pt1 = imageToScreen(x, y + h / 2); if (userScale > 1) { OpenPopupText(posXPopupMemo, posYPopupMemo, content, $('#dialogPopUp'), $('#arrow')); } else if ($("#header_toolbar").is(":hidden")) { OpenPopupText(pt1.x, pt1.y - 65, content, $('#dialogPopUp'), $('#arrow')); } else { OpenPopupText(pt1.x, pt1.y, content, $('#dialogPopUp'), $('#arrow')); } }; }; openPopUp.prototype = new PageObject(); /* mediaType = 1 and actionType = 10 move to Content object*/ var moveToContent = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, contentId, pageNo) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { /* set end log */ SetEndLog(contentID); RegisterLog(); ClientData.common_preContentId(contentId); ClientData.common_prePageNo(pageNo); /* store old page */ var oldContent = { oldContentID: contentID, oldPageIndex: getPageIndex() }; var dataJump = ClientData.JumpQueue(); dataJump.push(oldContent); ClientData.JumpQueue(dataJump); avwScreenMove(ScreenIds.ContentView) }; }; moveToContent.prototype = new PageObject(); /* mediaType=2 Video object : extends PageObject */ var videoType2 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, mediaFile, media, embed) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, embed); this.action = function () { /*stop audio on page */ stopAllAudio(); if (embed == "1") { showVideoObject(x, y, w, h, mediaFile, false); } else { if (media != '') { $('#playvideo').children().remove(); createVideoFulScreen(mediaFile, id); $("#btnCloseVideo").click(function (e) { hideDialog(); /*play audio if exist */ playAllAudio(); }); showDialog(true); } } }; }; videoType2.prototype = new PageObject(); /* create video on page */ function createVideoFulScreen(video, id) { $('#dialog').css('box-shadow', '0px 0px 3px 1px #666'); $('#dialog').css('border', 'solid 1px #666'); $('#dialog').draggable({ handle: "h1" }); $('#dialog').children().remove(); if (ClientData.userOpt_videoMode() == "1") {/* loop video */ $('#dialog').html( '<h1 style="height:25px;background:url(./img/viewer/pophdbg.png) 0 0 repeat">' + ' <img src="img/viewer/x.png" style="margin:3px 3px 0px 21px" id="btnCloseVideo" class="align_right" ></img>' + '</h1>' + ' <div id="videoMedia' + id + '">' + ' <video style="height:90%; width:100%;" class="mov" id="videoOnPopUp" autoplay controls loop>' + ' <source src="' + video + '" type="video/mp4"> ' + ' </video>' + ' </div>' ); } else { $('#dialog').html( '<h1 style="height:25px;background:url(./img/viewer/pophdbg.png) 0 0 repeat">' + ' <img src="img/viewer/x.png" style="margin:3px 3px 0px 21px" id="btnCloseVideo" class="align_right" width=25px" ></img>' + '</h1>' + ' <div id="videoMedia' + id + '">' + ' <video style="height:90%; width:100%;" id="videoOnPopUp" class="mov" autoplay controls>' + ' <source src="' + video + '" type="video/mp4"> ' + ' </video>' + ' </div>' ); } $('#videoOnPopUp').css('height', ($('#dialog').height() - 25) + "px"); //showControlsVideo($('#videoOnPopUp')); }; /* handle display controls of video */ function showControlsVideo(target) { $(target).click(function () { $(target).attr('controls', ''); }); $(target).mouseout(function () { $(target).removeAttr('controls'); }); $(target).removeAttr('controls'); }; /* show video*/ function showVideoObject(x, y, width, height, src, isFullscreen) { var pt1 = imageToScreen(x, y); var pt2 = imageToScreen(x + width, y + height); if (isFullScreen == true) { pt2.y = pt2.y - marginY; pt1.y = pt1.y - marginY; } //getPosVideo(x, y, (pt2.x - pt1.x), (pt2.y - pt1.y)); getPosVideo(x, y, width, height); if (isFullscreen === false) { $('#playvideo').attr('z-order', '1000'); $('#playvideo').css('left', pt1.x + 'px'); $('#playvideo').css('top', pt1.y + 'px'); $('#playvideo').children().remove(); if (ClientData.userOpt_videoMode() == "1") {/* loop video */ $('#playvideo').html('<video class="mov" id="videoOnPage" ' + 'width="' + (pt2.x - pt1.x) + '" ' + 'height="' + (pt2.y - pt1.y) + '" ' + 'autoplay controls loop>' + ' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' + ' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' + '</video>' ); } else { $('#playvideo').html('<video class="mov" id="videoOnPage"' + 'width="' + (pt2.x - pt1.x) + '" ' + 'height="' + (pt2.y - pt1.y) + '" ' + 'autoplay controls>' + ' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' + ' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' + '</video>' ); } } else { $('#playvideo').attr('z-order', '1000'); $('#playvideo').html('<video class="mov" id="videoOnPage" src="' + src + '" ' + 'autoplay controls></video>'); } //showControlsVideo($('#videoOnPage')); }; /* mediaType=3 Audio object : extends PageObject */ var audioType3 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, audioFile, playType) { if (playType == "0") { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { createAudio(audioFile, playType); }; } else { createAudio(audioFile, playType); this.setup(mediaType, actionType, id, null, x, y, w, h, visible, null, null); this.action = function () { }; } }; audioType3.prototype = new PageObject(); /* stop all audio on page */ function stopAllAudio() { if (avwUserEnvObj.browser == 'firefox') { $('#playaudiopage').children().remove(); $('#playaudioallpage').children().remove(); $('#playaudio').children().remove(); } else { if (document.getElementById("play_audio_0") != undefined) { document.getElementById("play_audio_0").pause(); } if (document.getElementById("play_audio_1") != undefined) { document.getElementById("play_audio_1").pause(); } if (document.getElementById("play_audio_2") != undefined) { document.getElementById("play_audio_2").pause(); } } }; /* play all audio on page */ function playAllAudio() { if (avwUserEnvObj.browser == 'firefox') { if (srcAudioType0 != '') { createAudio(srcAudioType0, TypeAudio0); } else if (srcAudioType2 != '') { createAudio(srcAudioType2, TypeAudio2); } else if (TypeAudio1 != '') { createAudio(srcAudioType1, TypeAudio1); } } else { if (document.getElementById("play_audio_0") != undefined) { if (avwUserEnvObj.os == "ipad") { //document.getElementById("play_audio_0").load(); } document.getElementById("play_audio_0").play(); } else if (document.getElementById("play_audio_2") != undefined) { if (avwUserEnvObj.os == "ipad") { //document.getElementById("play_audio_2").load(); } document.getElementById("play_audio_2").play(); } else if (document.getElementById("play_audio_1") != undefined) { if (avwUserEnvObj.os == "ipad") { //document.getElementById("play_audio_1").load(); } document.getElementById("play_audio_1").play(); } } }; var srcAudioType0 = ''; var TypeAudio0; var srcAudioType1 = ''; var TypeAudio1; var srcAudioType2 = ''; var TypeAudio2; /* create audio on page */ function createAudio(audio, type) { // if(avwUserEnvObj.browser == 'firefox'){ // audio = audio.replace("webResourceDownload/", "webResourceDownload"); // } if (audio != '') { if (type == "0") { /* play when click */ stopAllAudio(); TypeAudio0 = type; srcAudioType0 = audio; if (ClientData.userOpt_musicMode() == "1") { if (avwUserEnvObj.browser == 'firefox') { $('#playaudio').html( ' <embed id="play_audio_0" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" loop="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudio').html( ' <audio id="play_audio_0" loop="loop" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudio').html( ' <audio id="play_audio_0" loop="loop" autoplay ="autoplay">' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } else { if (avwUserEnvObj.browser == 'firefox') { $('#playaudio').html( ' <embed id="play_audio_0" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudio').html( ' <audio id="play_audio_0">' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudio').html( ' <audio id="play_audio_0" autoplay ="autoplay">' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } if (avwUserEnvObj.os == "ipad") { document.getElementById("play_audio_0").load(); document.getElementById("play_audio_0").play(); } } else if (type == "1") { /* play all page */ if (document.getElementById("play_audio_1") != undefined) { if (ClientData.userOpt_musicMode() == "1") { if (avwUserEnvObj.browser == 'firefox') { $('#playaudioallpage').html( ' <embed id="play_audio_1" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" loop="true" hidden="true"> </embed>' ); } else { document.getElementById("play_audio_1").play(); } } else { if (avwUserEnvObj.browser == 'firefox') { $('#playaudioallpage').html( ' <embed id="play_audio_1" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" hidden="true"> </embed>' ); } else { document.getElementById("play_audio_1").play(); } } } else { TypeAudio1 = type; srcAudioType1 = audio; if (ClientData.userOpt_musicMode() == "1") { if (avwUserEnvObj.browser == 'firefox') { $('#playaudioallpage').html( ' <embed id="play_audio_1" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" loop="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudioallpage').html( ' <audio id="play_audio_1" loop="loop" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudioallpage').html( ' <audio id="play_audio_1" loop="loop" autoplay="autoplay" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } else { if (avwUserEnvObj.browser == 'firefox') { $('#playaudioallpage').html( ' <embed id="play_audio_1" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudioallpage').html( ' <audio id="play_audio_1" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudioallpage').html( ' <audio id="play_audio_1" autoplay = "autoplay" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } // Check to play BGM on ipad if (avwUserEnvObj.os == "ipad") { // Show confim message to play background music $("#bgmConfirm_dspCancel").unbind('click'); $("#bgmConfirm_dspCancel").click(function () { $("#bgmConfirm").hide(); }); $("#bgmConfirm_dspOK").unbind('click'); $("#bgmConfirm_dspOK").click(function () { document.getElementById('play_audio_1').load(); document.getElementById('play_audio_1').play(); $("#bgmConfirm").hide(); }); $("#bgmConfirm").show(); $("#bgmConfirm").center(); } } } else if (type == "2") { /* play on page */ if (document.getElementById("play_audio_2") == undefined) { stopAllAudio(); TypeAudio2 = type; srcAudioType2 = audio; if (ClientData.userOpt_musicMode() == "1") { if (avwUserEnvObj.browser == 'firefox') { $('#playaudiopage').html( ' <embed id="play_audio_2" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" loop="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudiopage').html( ' <audio id="play_audio_2" loop="loop" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudiopage').html( ' <audio id="play_audio_2" loop="loop" autoplay ="autoplay">' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } else { if (avwUserEnvObj.browser == 'firefox') { $('#playaudiopage').html( ' <embed id="play_audio_2" src="' + audio + '&key=' + (new Date()).toIdString() + '" autostart="true" hidden="true"> </embed>' ); } else if (avwUserEnvObj.os == "ipad") { $('#playaudiopage').html( ' <audio id="play_audio_2" >' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } else { $('#playaudiopage').html( ' <audio id="play_audio_2" autoplay ="autoplay">' + ' <source src="' + audio + '&key=' + (new Date()).toIdString() + '" type="audio/mpeg" />' + ' </audio>' ); } } // Check to play BGM on ipad if (avwUserEnvObj.os == "ipad") { // Show confim message to play background music $("#bgmConfirm_dspCancel_page").unbind('click'); $("#bgmConfirm_dspCancel_page").click(function () { $("#bgmConfirm_page").hide(); }); $("#bgmConfirm_dspOK_page").unbind('click'); $("#bgmConfirm_dspOK_page").click(function () { document.getElementById('play_audio_2').load(); document.getElementById('play_audio_2').play(); $("#bgmConfirm_page").hide(); }); $("#bgmConfirm_page").show(); $("#bgmConfirm_page").center(); } } } } else { stopAllAudio(); } }; /* mediaType=4 list image object : extends PageObject */ var listImage = function (mediaType, id, imageUrl, x, y, w, h, visible, imageObjects, triggerType) { this.setup(mediaType, null, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { if (triggerType == '1') { mediaType4_changeImage++; /* check index bigger than length object */ if (mediaType4_changeImage > (imageObjects.length - 1)) { mediaType4_changeImage = 0; } /* draw image */ var imageObj = new Image(); imageObj.onload = function () { var canvasObject = document.getElementById("offscreen"); var contextObject = canvasObject.getContext("2d"); contextObject.drawImage(imageObj, x, y, w, h); flip(); }; imageObj.src = imageObjects[mediaType4_changeImage].fileName; } }; }; listImage.prototype = new PageObject(); /* mediaType=5 Replace Video object : extends PageObject */ var listVideo = function (mediaType, id, imageUrl, x, y, w, h, visible, videoObjects) { this.setup(mediaType, null, id, imageUrl, x, y, w, h, visible, null, null); this.action = function () { }; }; listVideo.prototype = new PageObject(); /* mediaType=6 Trigger object : extends PageObject */ var trigger = function (mediaType, actionType, id, imageUrl, x, y, w, h, index, target, visible, actionFunction) { this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, null); this.action = function () { // draw object /*if(isObjType4 == true){ for(var nIndex = 0; nIndex < objType4.imageObjects.length; nIndex++) { if(objType4.imageObjects[nIndex].index == index){ alert(target); changeImageType4(objType4,nIndex); break; } } }else if(isObjType5 == true){ for(var nIndex = 0; nIndex < objType5.videoObjects.length; nIndex++) { if(objType5.videoObjects[nIndex].index == index){ showVideoObject(objType5.x, objType5.y, objType5.width, objType5.height,objType5.videoObjects[nIndex].fileName,false); break; } } }*/ for (var nIndex = 0; nIndex < objType4_5.length; nIndex++) { for (var nIndex1 = 0; nIndex1 < objType4_5[nIndex].dataObjects.length; nIndex1++) { if (objType4_5[nIndex].dataObjects[nIndex1].index == index && objType4_5[nIndex].id == target) { if (objType4_5[nIndex].mediaType == '4') { /*image*/ changeImageType4(objType4_5, nIndex, nIndex1); } else { /* video */ stopAllAudio(); showVideoObject(objType4_5[nIndex].x, objType4_5[nIndex].y, objType4_5[nIndex].width, objType4_5[nIndex].height, objType4_5[nIndex].dataObjects[nIndex1].fileName, false); } break; } } } }; }; trigger.prototype = new PageObject(); /* change main image of media type 4 */ function changeImageType4(objTarget, nIndex, nIndex1) { var imageObj = new Image(); imageObj.onload = function () { var canvasObject = document.getElementById("offscreen"); var contextObject = canvasObject.getContext("2d"); contextObject.drawImage(imageObj, objTarget[nIndex].x, objTarget[nIndex].y, objTarget[nIndex].width, objTarget[nIndex].height); flip(); }; imageObj.src = objTarget[nIndex].dataObjects[nIndex1].fileName; }; /* mediaType = 7 write text object*/ var text = function (mediaType, actionType, id, x, y, w, h, visible, actionFunction, content) { //var imageUrl = displayText(x,y,w,h,id,content); var imageUrl = getTextObjectImage(w, h, content); this.setup(mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, null); this.action = function () { }; }; text.prototype = new PageObject(); /* var pxText; var pyText; */ /* display text on canvas*/ /* function displayText(x, y, width, height,id,content) { var canvasObject = document.getElementById("offscreen"); var contextObject = canvasObject.getContext("2d"); var dataHtml = "<div align='center'><font face='MS Pゴシック' style='LETTER-SPACING:-0.2px;LINE-HEIGHT:120%;FONT-SIZE:11px' color='#333333' letterspacing='0' kerning='1'><font style='LETTER-SPACING:-0.2px;LINE-HEIGHT:120%;FONT-SIZE:16px' color='#cc0000'><u>TEXT</u></font></font></div><div align='center'><font face='MS Pゴシック' style='LETTER-SPACING:-0.2px;LINE-HEIGHT:120%;FONT-SIZE:11px' color='#333333' letterspacing='0' kerning='1'><font style='LETTER-SPACING:-0.2px;LINE-HEIGHT:120%;FONT-SIZE:16px' color='#cc0000'><u>TEXT</u></font></font></div>"; var data = "<svg xmlns='http://www.w3.org/2000/svg' width='196' height='261'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + dataHtml + "</div>" + "</foreignObject>" + "</svg>"; var DOMURL = self.URL || self.webkitURL || self; //var img = new Image(); var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svg); return url; }; */ function imageToScreen(x, y) { var pt = new Point(0, 0); // scale vertical and horizontal var sx = (destRect.right - destRect.left) / (srcRect.right - srcRect.left); var sy = (destRect.bottom - destRect.top) / (srcRect.bottom - srcRect.top); pt.x = Math.round(sx * (x - srcRect.left)) + destRect.left + marginX; pt.y = Math.round(sy * (y - srcRect.top)) + destRect.top + marginY; return pt; }; /* Adjust Component size */ function sizingNotFull(width, height) { //adjust size of canvas using for draw if (isTouchDevice() == true) { $("#main").css('top', marginY); $("#main").attr('height', height - (marginY * 2)) .attr('width', width - (marginX * 2)); } else { $("#main").attr('height', height - (marginY * 2)) .attr('width', width - (marginX * 2)) .css('top', marginY); } $("#draw_canvas").css('cursor', 'default'); $("#marker_canvas").css('cursor', 'default'); if (userScale != 1) { changeScale(userScale); flip(); } /* move image check marking*/ $('#divCheckExistMarking').css('top', '70px'); $('#divCheckExistMarking').show(); }; /* Adjust Component size */ function sizingFullSize(width, height) { // adjust size of body if (isTouchDevice() == true) { $("#main").css('top', '0px'); $("#main").attr('height', height) .attr('width', width - (marginX * 2)); } else { $("#main").attr('height', height) .attr('width', width - (marginX * 2)) .css('top', '0px'); } //adjust size of canvas using for draw $("#draw_canvas").css('cursor', 'default'); $("#marker_canvas").css('cursor', 'default'); if (userScale != 1) { changeScale(userScale); flip(); } /* move image check marking*/ $('#divCheckExistMarking').css('top', '5px'); if (ClientData.IsAddingMarking() == true) { $('#divCheckExistMarking').hide(); } else { $('#divCheckExistMarking').show(); } }; /* zoom video */ var pxVideo; var pyVideo; var wVideo; var hVideo; var videoScale; function getPosVideo(px, py, width, height, scale) { pxVideo = px; pyVideo = py; wVideo = width; hVideo = height; videoScale = scale; }; function zoomVideo() { var objVideo = document.getElementsByTagName('video'); if (objVideo.length > 0) { var pt1 = imageToScreen(pxVideo, pyVideo); var pt2 = imageToScreen(pxVideo + wVideo, pyVideo + hVideo); if (isFullScreen == true) { pt2.y = pt2.y - marginY; pt1.y = pt1.y - marginY; } $('#playvideo').attr('z-order', '1000'); $('#playvideo').css('left', pt1.x + 'px'); $('#playvideo').css('top', pt1.y + 'px'); $(objVideo[0]).attr('width', pt2.x - pt1.x); $(objVideo[0]).attr('height', pt2.y - pt1.y); /*$('#playvideo').html('<video class="mov" src="' + src + '" ' + 'width="' + (pt2.x - pt1.x) + '" ' + 'height="' + (pt2.y - pt1.y) + '" ' + 'autoplay controls></video>'); */ } }; var scaleFactor = 1.1; var zoom = function (clicks) { var pt = context_main.transformedPoint(lastX, lastY); context_main.translate(lastX, lastY); var factor = Math.pow(scaleFactor, clicks); context_main.scale(factor, factor); maxposY += canvas_main.width * (factor - 1); context_main.translate(-lastX, -lastY); }; // Adds ctx.getTransform() - returns an SVGMatrix // Adds ctx.transformedPoint(x,y) - returns an SVGPoint function trackTransforms(ctx) { var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); var xform = svg.createSVGMatrix(); ctx.getTransform = function () { return xform; }; var savedTransforms = []; var save = ctx.save; ctx.save = function () { savedTransforms.push(xform.translate(0, 0)); return save.call(ctx); }; var restore = ctx.restore; ctx.restore = function () { xform = savedTransforms.pop(); return restore.call(ctx); }; var scale = ctx.scale; ctx.scale = function (sx, sy) { xform = xform.scaleNonUniform(sx, sy); return scale.call(ctx, sx, sy); }; var rotate = ctx.rotate; ctx.rotate = function (radians) { xform = xform.rotate(radians * 180 / Math.PI); return rotate.call(ctx, radians); }; var translate = ctx.translate; ctx.translate = function (dx, dy) { xform = xform.translate(dx, dy); return translate.call(ctx, dx, dy); }; var transform = ctx.transform; ctx.transform = function (a, b, c, d, e, f) { var m2 = svg.createSVGMatrix(); m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f; xform = xform.multiply(m2); return transform.call(ctx, a, b, c, d, e, f); }; var setTransform = ctx.setTransform; ctx.setTransform = function (a, b, c, d, e, f) { xform.a = a; xform.b = b; xform.c = c; xform.d = d; xform.e = e; xform.f = f; return setTransform.call(ctx, a, b, c, d, e, f); }; var pt = svg.createSVGPoint(); ctx.transformedPoint = function (x, y) { pt.x = x; pt.y = y; return pt.matrixTransform(xform.inverse()); } }; /* zoomIn event */ function zoomIn() { userScale += scaleDelta; if (userScale > 4) { userScale = 4; } else { changeScale(userScale); flip(); /* zoom video */ zoomVideo(); } checkDisableButtonZoom(); /* close dialog popuptext */ closeDialogPopUpText(); }; /* close dialog pop */ function closeDialogPopUpText() { if (isOpenPopUpText == true) { isOpenPopUpText = false; ClosePopupText(); } }; function checkDisableButtonZoom() { if (userScale >= 4) { $('#zoomin').removeClass(); $('#zoomin').addClass('expansion_off'); $("#zoomin").css('cursor', 'default'); } else { $('#zoomin').unbind('click'); $('#zoomin').bind('click', zoomIn); $('#zoomin').removeClass(); if (isTouchDevice() == true) { $('#zoomin').addClass('expansion_device'); } else { $('#zoomin').addClass('expansion'); } $("#zoomin").css('cursor', 'pointer'); } if (userScale <= 1) { $('#zoomout').removeClass(); $('#zoomout').addClass('reduction_off'); $("#zoomout").css('cursor', 'default'); } else { $('#zoomout').unbind('click'); $('#zoomout').bind('click', zoomOut); $('#zoomout').removeClass(); if (isTouchDevice() == true) { $('#zoomout').addClass('reduction_device'); } else { $('#zoomout').addClass('reduction'); } $("#zoomout").css('cursor', 'pointer'); } if (userScale == 1) { $('#zoomfit').removeClass(); $('#zoomfit').addClass('fit_off'); $("#zoomfit").css('cursor', 'default'); } else { $('#zoomfit').unbind('click'); $('#zoomfit').bind('click', screenFit); $('#zoomfit').removeClass(); if (isTouchDevice() == true) { $('#zoomfit').addClass('fit_device'); } else { $('#zoomfit').addClass('fit'); } $("#zoomfit").css('cursor', 'pointer'); } }; /* zoomOut event */ function zoomOut() { userScale -= scaleDelta; if (userScale < 1) { userScale = 1; } else { changeScale(userScale); flip(); /* zoom video */ zoomVideo(); } checkDisableButtonZoom(); /* close dialog popuptext */ closeDialogResize(); }; /* restore screen size */ function screenFit() { var canvas = document.getElementById('main'); var offScreen = document.getElementById('offscreen'); context_main.clearRect(0, 0, canvas_main.width, canvas_main.height); srcRect = new Rect(0, 0, offScreen.width, offScreen.height); userScale = 1; moveX = 0; moveY = 0; flip(); /* zoom video */ zoomVideo(); checkDisableButtonZoom(); /* close dialog popuptext */ closeDialogResize(); }; /* change Scale screen*/ function changeScale(scale) { var canvas = document.getElementById('main'); var offScreen = document.getElementById('offscreen'); var sc = srcRect.center(); var sw = offScreen.width, sh = offScreen.height; var width = offScreen.width; var height = offScreen.height; var aspect = offScreen.width / offScreen.height; if (canvas.width > canvas.height) { height = canvas.height; width = height * aspect; /*if(width > canvas.width) { width = canvas.width; height = width / aspect; }*/ } else { width = canvas.width; height = width / aspect; } if (height > canvas.height) { var size = canvas.height / height; height = canvas.height; width = width * size; } if (width > canvas.width) { var size = canvas.width / width; width = canvas.width; height = height * size; } if (width < canvas.width) { //if(width >= height){ width = width * scale; if (width > canvas.width) { sw /= scale; sh = sw / (canvas.width / canvas.height); } else { sh /= scale; } //}else if(height <= canvas.height){ } else if (height < canvas.height) { height = height * scale; if (height > canvas.height) { sh /= scale; sw = sh / (canvas.height / canvas.width); } else { sw /= scale; } } else { sh /= scale; sw /= scale; } srcRect.left = sc.x - Math.round(sw / 2); srcRect.top = sc.y - Math.round(sh / 2); srcRect.right = Math.round(srcRect.left + sw); srcRect.bottom = Math.round(srcRect.top + sh); srcRect.width = srcRect.right - srcRect.left; srcRect.height = srcRect.bottom - srcRect.top; }; /* change Scale screen*/ function changeScaleDrawCanvas(scale) { var canvas = document.getElementById('draw_canvas'); var offScreen = document.getElementById('draw_canvas'); var sc = srcRect.center(); var sw = offScreen.width, sh = offScreen.height; sw /= scale; sh /= scale; srcRect.left = sc.x - Math.floor(sw / 2); srcRect.top = sc.y - Math.floor(sh / 2); srcRect.right = srcRect.left + sw; srcRect.bottom = srcRect.top + sh; srcRect.width = sw; srcRect.height = sh; }; function encode(data) { var str = String.fromCharCode.apply(null, data); return btoa(str).replace(/.{76}(?=.)/g, '$&\n'); }; /* ----------------------------------- Create memo --------------------------------*/ var memoObjects = []; /* constructor */ var MemoObject = function (id, text, x, y, width, heigth, imageUrl, action) { }; /* setup each properties */ MemoObject.prototype.setup = function (id, text, x, y, w, h, imageUrl) { this.text = text; this.id = id; this.x = x; this.y = y; this.width = w; this.height = h; this.imageUrl = imageUrl; }; /* prototype hitTest */ MemoObject.prototype.hitTest = function (px, py) { if (this.x <= px && px <= (this.x + this.width)) { if (this.y <= py && py <= (this.y + this.height)) { return true; } } return false; }; /* draw Memo */ MemoObject.prototype.drawMemo = function (context) { var posX = this.x; var posY = this.y; var objWidth = this.width; var objHeigth = this.height; var imageObj = new Image(); imageObj.onload = function () { context.drawImage(imageObj, posX, posY, objWidth, objHeigth); flip(); }; imageObj.src = this.imageUrl; }; /* create memo object */ var memo = function (id, text, x, y, w, h, imageUrl) { this.setup(id, text, x, y, w, h, imageUrl); this.action = function () { EditMemo(id, 0, 0, $('#divDialogMemo'), function () { /*set flag change memo */ ClientData.isChangedMemo(true); }); }; }; memo.prototype = new MemoObject(); /*click showEditMemo() */ function showEditMemo() { objEditMemo.action(); }; /*click copyMemo() */ function copyMemo() { //isCopyMemo = true; ClientData.memo_copyText(objEditMemo.text); //disableControlsCopyMemo(); $("#pop_up_memo").hide(); }; /* ----------------------------------- End create memo -----------------------------*/ /* ----------------------------------- Create webGetContentType4 --------------------------------*/ var webGetContentType4Objects = []; /* constructor */ var WebGetContentTyp4Object = function (id, x, y, width, heigth, imageUrl, action) { }; /* setup each properties */ WebGetContentTyp4Object.prototype.setup = function (id, x, y, w, h, imageUrl) { this.id = id; this.x = x; this.y = y; this.width = w; this.height = h; this.imageUrl = imageUrl; }; /* prototype hitTest */ WebGetContentTyp4Object.prototype.hitTest = function (px, py) { if (this.x <= px && px <= (this.x + this.width)) { if (this.y <= py && py <= (this.y + this.height)) { return true; } } return false; }; /* draw Memo */ WebGetContentTyp4Object.prototype.drawObject = function (context) { var posX = this.x; var posY = this.y; var objWidth = this.width; var objHeigth = this.height; var imageObj = new Image(); imageObj.onload = function () { context.globalAlpha = 0.4; context.drawImage(imageObj, posX, posY, objWidth, objHeigth); flip(); context.globalAlpha = 1; }; imageObj.src = this.imageUrl; }; /* create memo object */ var webContentType4 = function (id, x, y, w, h, imageUrl, linkKind, destURI, destPageNumber) { this.setup(id, x, y, w, h, imageUrl); this.action = function () { if (linkKind == "1") { window.open(destURI, "_blank", "new window"); } else if (linkKind == "0") { changePage(changePageNo(destPageNumber)); } }; }; webContentType4.prototype = new WebGetContentTyp4Object(); /* ----------------------------------- End create webGetContentType4 -----------------------------*/ function imgBack_click() { /* set end log */ SetEndLog(contentID); RegisterLog(); window.onbeforeunload = null; if (ClientData.JumpQueue()) { var oldDataBack = ClientData.JumpQueue(); if (oldDataBack.length > 0) { avwScreenMove(ScreenIds.ContentView); ClientData.IsJumpBack(true); } else { /*check back */ if (ClientData.BookmarkScreen()) { avwScreenMove(ClientData.BookmarkScreen()); } else { window.history.back(); } } } else { /*check back */ if (ClientData.BookmarkScreen()) { avwScreenMove(ClientData.BookmarkScreen()); } else { window.history.back(); } } }; function imgHome_click(e) { e.preventDefault(); /* set end log */ SetEndLog(contentID); RegisterLog(); //window.location.href = ScreenIds.Home; avwScreenMove(ScreenIds.Home); }; function closePopUpCopyMemo() { $('#boxAddMemo').hide(); //ClientData.memo_copyText(null); ClientData.IsAddingMemo(false); /* unlock dialog overlay */ $("#overlay").hide(); //change class $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); }; function click_liAddMemo(event) { typeSelectMemo = 1; $('#boxAddMemo').hide(); /* unlock dialog overlay */ $("#overlay").hide(); //ClientData.memo_copyText(null); //ClientData.IsAddingMemo(false); }; function click_liCopyMemo() { typeSelectMemo = 2; $('#boxAddMemo').hide(); /* unlock dialog overlay */ $("#overlay").hide(); //ClientData.memo_copyText(null); //ClientData.IsAddingMemo(false); }; function click_liDeleteMemo() { $('#boxAddMemo').hide(); ClientData.memo_copyText(null); ClientData.IsAddingMemo(false); /* unlock dialog overlay */ $("#overlay").hide(); //change class $('#imgaddmemo').removeClass(); $('#imgaddmemo').addClass('memoAdd'); };