
//名前空間用のオブジェクトを用意する
var CONTENTVIEW_INITOBJECT = {};

/* init Image memo */
CONTENTVIEW_INITOBJECT.initImageMemo = function() {
    if (ClientData.IsDisplayMemo() == true) {
        //change class
        $('#imgmemo').removeClass();
        $('#imgmemo').addClass('memoDisplay_hover');

    } else {
        //change class
        $('#imgmemo').removeClass();
        $('#imgmemo').addClass('memoDisplay');
    }
};

/* init Image add memo */
CONTENTVIEW_INITOBJECT.initImageAddMemo = function() {
    if (ClientData.IsAddingMemo() == true) {
        //change class
        $('#imgaddmemo').removeClass();
        $('#imgaddmemo').addClass('memoAdd_hover');

    } else {
        //change class
        $('#imgaddmemo').removeClass();
        $('#imgaddmemo').addClass('memoAdd');

    }
};

/*check display marking?? */
CONTENTVIEW_INITOBJECT.initDisplayMarking = function() {
    if (ClientData.IsDisplayMarking() == true) {
        // change class
        $('#imgmarking').removeClass();
        $('#imgmarking').addClass('marking_hover');

        if (ClientData.IsAddingMarking() == true) {
            if (ClientData.IsHideToolbar() == false) {
            	CONTENTVIEW_MARKING.ShowMarking();
            }

            CONTENTVIEW_GENERAL.disableAllControl();
        }
        else {

            //change image
            if(ClientData.serviceOpt_marking() == 'Y'){
                $('#imgmarkingtoolbar').removeClass();
                $('#imgmarkingtoolbar').addClass('markingToolbar');
            }
        }
    }
    else {
        $("#dlgMarking").hide();

        // change class
        $('#imgmarking').removeClass();
        $('#imgmarking').addClass('marking');

        $('#draw_canvas').css('display', 'none');

        //change image
        if(ClientData.serviceOpt_marking() == 'Y'){
            $('#imgmarkingtoolbar').removeClass();
            $('#imgmarkingtoolbar').addClass('markingToolbar');
        }

    }
};


/* init Image bookmark */
CONTENTVIEW_INITOBJECT.initImageBookmark = function() {
    if (CONTENTVIEW.isExistBookmark() == -1) {
        //change class
        $('#imgbookmark').removeClass();
        $('#imgbookmark').addClass('bmAdd_off');

    } else {
        //change class
        $('#imgbookmark').removeClass();
        $('#imgbookmark').addClass('bmAdd');
    }
};


/* init flag marking, memo when init page */
CONTENTVIEW_INITOBJECT.initFlagDisplay = function() {
    ClientData.IsDisplayMemo(false);
    ClientData.IsAddingMemo(false);
    if (ClientData.userOpt_makingDsp() == "1") {
        ClientData.IsDisplayMarking(true);
    } else {
        ClientData.IsDisplayMarking(false);
    }
    ClientData.IsAddingMarking(false);
};


/* set size bot toolbar for ipad */
CONTENTVIEW_INITOBJECT.initDisplayToolbarDevice = function() {
    if (CONTENTVIEW_GENERAL.avwUserEnvObj.isIos() || CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()) {
        $('.transition').css('padding', '4px 0 0 0');
        $('.sizing').css('padding', '4px 0 0 2px');
        $('.toolbar').css('margin', '0 0 0 0');
    }
};

//START : TRB00034 - DATE : 09/11/2013 - Editor : Long  - Summary : Fix for center loading image
CONTENTVIEW_INITOBJECT.setLoadingSize = function(){
    var width = $(window).width() / 2;
    var objWidth = $('#divImageLoading').width() /2 ;
    var result = width - objWidth;

    $('#divImageLoading').css('left', result);
};
//END : TRB00034 - DATE : 09/11/2013 - Editor : Long  - Summary : Fix for center loading image
CONTENTVIEW_INITOBJECT.initPage = function() {

	CONTENTVIEW_INITOBJECT.setLoadingSize();
    $('#divImageLoading').css('display', 'block');

    /* init footer toolbar */
    $('#footer_toolbar_2').hide();
    $('#footer_toolbar_1').show();

    /* init pos bottom toolbar*/
    CONTENTVIEW_INITOBJECT.initDisplayToolbarDevice();

    // Lock screen
    //COMMON.LockScreen();

    CONTENTVIEW.StartTimerUpdateLog();

    /* set start log */
    COMMON.SetStartLog(CONTENTVIEW_GENERAL.contentID);

    /* get info of content */
    if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_Image){
    	CONTENTVIEW_GETDATA.getContentInfoTypeImage();
    }
    else if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_NoFile){
    	CONTENTVIEW_GETDATA.getPageTransitionConfig();
        CONTENTVIEW_CONTENTTYPENONE.getJsonContentInfoTyeNone(CONTENTVIEW_INITOBJECT.ajaxComplete4);
    }
    else{
    	CONTENTVIEW_CALLAPI.getJsonContentInfo(CONTENTVIEW_INITOBJECT.ajaxComplete8);
    	CONTENTVIEW_GETDATA.getPageTransitionConfig();
    }

    CONTENTVIEW_INITOBJECT.initializeViewerComponent('wrapper');

    /* handle display tooltip */
    CONTENTVIEW.handleTooltip();

    /* set text dialog confirm of audio */
    CONTENTVIEW_CREATEOBJECT.createTextConfirmAudio();

    /* handle toolbar */
    $('#control_screen').click(CONTENTVIEW.handleDisplayToolbar);
    $('#control_screen_2').click(CONTENTVIEW.handleDisplayToolbar);

    /* bookmark Page */
    $('#imgbookmark').click(CONTENTVIEW.bookmarkPage);
    $('#listbookmark').click(CONTENTVIEW_EVENTS.showListBookMark);
    $('#divListBookmark li').die();
    $('#divListBookmark li').live('click', CONTENTVIEW_EVENTS.clickBookmark);

    if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_PDF){
        /* page index */
        $('#listindex').click(CONTENTVIEW_EVENTS.showListPageIndex);
        $('#divSearchResult li').die();
        $('#divSearchResult li').live('click', CONTENTVIEW_EVENTS.clickSearchDetail);
        /* copy text */

        if(ClientData.serviceOpt_copy_text() == 'Y') {

        	$('#copytext').click(CONTENTVIEW_EVENTS.showCopyText);
        } else {
        	$('#copytext').unbind('click');
        	$('#copytext').removeClass();
            $('#copytext').addClass('copy_off');
        }
       // sessionStorage.removeItem('copy_text');
        /* close copy text dialog */
        //$("#copyTextClosing").click(CONTENTVIEW_EVENTS.closeCopyTextBox);
        $("#copyTextClosing").on({
        	'click touchend': function(ev){
        		CONTENTVIEW_EVENTS.closeCopyTextBox(ev);
        		return false;
        	},
        	'touchstart touchmove': function(){
        		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
        		return false;
        	}
        });

    }

    /*event click next page button */
    $('#nextpage').click(CONTENTVIEW_EVENTS.nextPage_click);
    $('#button_next_canvas').click(CONTENTVIEW_EVENTS.nextPage_click);
    /*event click prev page button */
    $('#prevpage').click(CONTENTVIEW_EVENTS.prevPage_click);
    $('#button_pre_canvas').click(CONTENTVIEW_EVENTS.prevPage_click);
    /*event click fist page button */
    $('#firstpage').click(CONTENTVIEW_EVENTS.firstPage_click);
    /*event click last page button */
    $('#lastpage').click(CONTENTVIEW_EVENTS.lastPage_click);

    $("#imgBack").click(CONTENTVIEW_EVENTS.imgBack_click);
    $("#imgHome").click(CONTENTVIEW_EVENTS.imgHome_click);
    $("#btn_show_memo").click(CONTENTVIEW_CREATEOBJECT.showEditMemo);
    $("#btn_copy_memo").click(CONTENTVIEW_CREATEOBJECT.copyMemo);
    //$('#memoClosing').click(CONTENTVIEW_EVENTS.closePopUpCopyMemo);
    $("#memoClosing").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_EVENTS.closePopUpCopyMemo(ev);
            return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });

    $('#liAddMemo').click(CONTENTVIEW_EVENTS.click_liAddMemo);
    $('#liCopyMemo').click(CONTENTVIEW_EVENTS.click_liCopyMemo);
    $('#liDeleteMemo').click(CONTENTVIEW_EVENTS.click_liDeleteMemo);

    if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_PDF){
        /*event search*/
    	CONTENTVIEW_EVENTS.showListSearchResult();
    }

    /* zoom event */
    $('#zoomin').click(CONTENTVIEW.zoomIn);
    $('#zoomout').click(CONTENTVIEW.zoomOut);
    $('#zoomfit').click(CONTENTVIEW.screenFit);

    /* event memo */
    $('#imgmemo').click(CONTENTVIEW.handleMemo);
    $('#imgaddmemo').click(CONTENTVIEW_EVENTS.handleAddMemo);

    /* event marking */
    $('#imgmarking').click(CONTENTVIEW_EVENTS.imgmarking_click);
    $('#imgmarkingtoolbar').click(CONTENTVIEW.handleDrawCanvas);

    /*draw canvas*/
    CONTENTVIEW.drawOnCanvas();

    /*init flag */
    CONTENTVIEW_INITOBJECT.initFlagDisplay();

    CONTENTVIEW.sizingScreen();

    /* move image check marking*/
    $('#divCheckExistMarking').css('top', '70px');
    $('#divCheckExistMarking').hide();

    /* move image check memo*/
    $('#divCheckExistMemo').css('top', '125px');
    $('#divCheckExistMemo').hide();

    /* disable controls */
    CONTENTVIEW_GENERAL.isLoadingObject = true;
    CONTENTVIEW_GENERAL.disableAllControl();

    /* window resize event */
    $(window).resize(function () {
    	CONTENTVIEW.setViewportForWin8();

        CONTENTVIEW.sizingScreen();
        /* close dialog popuptext */
        CONTENTVIEW.closeDialogResize();
        CONTENTVIEW_INITOBJECT.setLoadingSize();
    });

};

CONTENTVIEW_INITOBJECT.ajaxComplete8 = function(){

    /* handle from bookmark page */
    //handleFromBookMarkPage();
    /* check move content */
    if (ClientData.bookmark_pageNo()) {
    	CONTENTVIEW.handleFromBookMarkPage();
    } else if (ClientData.common_prePageNo()) {
        /* handle from jump content */
    	CONTENTVIEW.handleFromJumpContent();
    } else if (ClientData.IsJumpBack() == true) {
        /* handle back */
    	CONTENTVIEW.oldContent_Back();
    } else {
        if (CONTENTVIEW_GETDATA.getPageIndex() == 0) {

        	//コンテンツ差し替えチェック
        	CONTENTVIEW.deleteMaxPageOverData();

            if(CONTENTVIEW_INITOBJECT.isHasPageBGM()){
            	CONTENTVIEW.isPendingContentBGM = true;
            } else {
            	CONTENTVIEW.isPendingContentBGM = false;
            }

            //console.log("CONTENTVIEW_GENERAL.isFullScreen:" + CONTENTVIEW_GENERAL.isFullScreen);

            CONTENTVIEW_GETDATA.getContent().setPageImages(CONTENTVIEW_GENERAL.totalPage, CONTENTVIEW_GENERAL.pageImages)
			 				.setPageObjects(CONTENTVIEW_GENERAL.pageObjects)
			 				.setUpPage(0);

            CONTENTVIEW_CREATEOBJECT.createPageBGM();

            //Get next
            if(CONTENTVIEW_GENERAL.totalPage > 1){
            	CONTENTVIEW_GETDATA.getNextPageObjectsByPageIndex(CONTENTVIEW_GENERAL.pageObjectsData, CONTENTVIEW_GETDATA.getPageIndex() + 1);
                //Render next page
                CONTENTVIEW_GETDATA.renderNextPage();
            }

            /* set pageTitle*/
            if (CONTENTVIEW_GENERAL.dataPageTitle[0]) {
                if (CONTENTVIEW_GENERAL.dataPageTitle[0] != '') {
                    document.title = CONTENTVIEW_GENERAL.contentName + '_' + CONTENTVIEW_GENERAL.dataPageTitle[0] + ' | ' + I18N.i18nText('sysAppTitle');
                } else {
                    document.title = CONTENTVIEW_GENERAL.contentName + ' | ' + I18N.i18nText('sysAppTitle');
                }
            } else {
                document.title = CONTENTVIEW_GENERAL.contentName + ' | ' + I18N.i18nText('sysAppTitle');
            }

            /* handle slider bar */
            CONTENTVIEW.handleSliderBar();
        }
    }

    /* window resize event */
    $(window).resize(function () {
    	CONTENTVIEW_INITOBJECT.setLoadingSize();
        if (COMMON.isTouchDevice() == true) {
            if (CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()) {
                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");
                }
            }
        }

        CONTENTVIEW.resizeScreen();
        CONTENTVIEW_GENERAL.isChangeSizeScreen = false;

        /* change position dialog */
        CONTENTVIEW.changePosDialog();

        /* close dialog popuptext */
        CONTENTVIEW.closeDialogResize();

    });

    /* check status button */
    CONTENTVIEW.checkExistNextPrePage();

    /*init Image Bookmark */
    CONTENTVIEW_INITOBJECT.initImageBookmark();

    $('#lblSlider').text('/ ' + CONTENTVIEW_GENERAL.totalPage);
    /* memo */
    CONTENTVIEW_INITOBJECT.initImageMemo();
    CONTENTVIEW_INITOBJECT.initImageAddMemo();

    /* init image had draw */
    CONTENTVIEW_INITOBJECT.initDisplayMarking();

    /* check status */
    CONTENTVIEW.checkStatusImageMarking();

    CONTENTVIEW.trackTransforms(CONTENTVIEW_GENERAL.context_main);

    if (COMMON.isTouchDevice() == true) {
        if (CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()) {
        	CONTENTVIEW_GENERAL.standardRatio = document.documentElement.clientWidth / window.innerWidth;
            ZOOM_DETECTOR.startDetectZoom({ time: 500,
                callbackFunction: function (oldRatio, newRatio, oldW, oldH, newW, newH) {
                	CONTENTVIEW_GENERAL.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");
            CONTENTVIEW.sizingScreen();
        }
    }
    CONTENTVIEW.setViewportForWin8();

    //console.log("ajaxComp8 end");
};

CONTENTVIEW_INITOBJECT.ajaxComplete4 = function(){

	if(CONTENTVIEW_GENERAL.contentType != COMMON.ContentTypeKeys.Type_NoFile){
		return;
	}

	/* handle from bookmark page */
	//handleFromBookMarkPage();
	/* check move content */
	if (ClientData.bookmark_pageNo()) {
		CONTENTVIEW.handleFromBookMarkPage();
	} else if (ClientData.common_prePageNo()) {
		/* handle from jump content */
		CONTENTVIEW.handleFromJumpContent();
	} else if (ClientData.IsJumpBack() == true) {
		/* handle back */
		CONTENTVIEW.oldContent_Back();
	} else {
		if (CONTENTVIEW_GETDATA.getPageIndex() == 0) {
			if(CONTENTVIEW_INITOBJECT.isHasPageBGM()){
				CONTENTVIEW.isPendingContentBGM = true;
			}

			CONTENTVIEW_GETDATA.getContent().setPageImages(CONTENTVIEW_GENERAL.totalPage, CONTENTVIEW_GENERAL.pageImages)
			.setPageObjects(CONTENTVIEW_GENERAL.pageObjects)
			.setUpPage(0);
			CONTENTVIEW_CREATEOBJECT.createPageBGM();

			if(CONTENTVIEW_GENERAL.totalPage > 1){
				CONTENTVIEW_GETDATA.getNextPageObjectsByPageIndex(CONTENTVIEW_GENERAL.pageObjectsData, CONTENTVIEW_GETDATA.getPageIndex() + 1);
				//Render next page
				CONTENTVIEW_GETDATA.renderNextPage();
			}

			/* set pageTitle*/
			if (CONTENTVIEW_GENERAL.dataPageTitle[0]) {
				if (CONTENTVIEW_GENERAL.dataPageTitle[0] != '') {
					document.title = CONTENTVIEW_GENERAL.contentName + '_' + CONTENTVIEW_GENERAL.dataPageTitle[0] + ' | ' + I18N.i18nText('sysAppTitle');
				} else {
					document.title = CONTENTVIEW_GENERAL.contentName + ' | ' + I18N.i18nText('sysAppTitle');
				}
			} else {
				document.title = CONTENTVIEW_GENERAL.contentName + ' | ' + I18N.i18nText('sysAppTitle');
			}

			/* handle slider bar */
			CONTENTVIEW.handleSliderBar();
		}
	}

	/* window resize event */
	$(window).resize(function () {

		if (COMMON.isTouchDevice() == true) {
			if (CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()) {
				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");
				}
			}
		}

		CONTENTVIEW.resizeScreen();
		CONTENTVIEW_GENERAL.isChangeSizeScreen = false;

		/* change position dialog */
		CONTENTVIEW.changePosDialog();

		/* close dialog popuptext */
		CONTENTVIEW.closeDialogResize();

	});

	/* check status button */
	CONTENTVIEW.checkExistNextPrePage();

	/*init Image Bookmark */
	CONTENTVIEW_INITOBJECT.initImageBookmark();

	$('#lblSlider').text('/ ' + CONTENTVIEW_GENERAL.totalPage);
	/* memo */
	CONTENTVIEW_INITOBJECT.initImageMemo();
	CONTENTVIEW_INITOBJECT.initImageAddMemo();

	/* init image had draw */
	CONTENTVIEW_INITOBJECT.initDisplayMarking();

	/* check status */
	CONTENTVIEW.checkStatusImageMarking();

	CONTENTVIEW.trackTransforms(CONTENTVIEW_GENERAL.context_main);

	if (COMMON.isTouchDevice() == true) {
		if (CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()) {
			CONTENTVIEW_GENERAL.standardRatio = document.documentElement.clientWidth / window.innerWidth;
			ZOOM_DETECTOR.startDetectZoom({ time: 500,
				callbackFunction: function (oldRatio, newRatio, oldW, oldH, newW, newH) {
					CONTENTVIEW_GENERAL.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");
			CONTENTVIEW.sizingScreen();
		}
	}

	CONTENTVIEW.setViewportForWin8();

};

//START TRB00069
CONTENTVIEW_INITOBJECT.isHasPageBGM = function(){

    var iResult = false;
    CONTENTVIEW_GETDATA.getPageObjectsByPageIndex(CONTENTVIEW_GENERAL.pageObjectsData, 0);
    for (var nIndex = 0; nIndex < CONTENTVIEW_GENERAL.pageObjects.length; nIndex++) {
        if (CONTENTVIEW_GENERAL.pageObjects[nIndex].mediaType == '3' && CONTENTVIEW_GENERAL.pageObjects[nIndex].playType == '2') {
            iResult = true;
            break;
        }
    }

    return iResult;
};

//END TRB00069

CONTENTVIEW_INITOBJECT.initPageMediaAndHtmlType = function(){
    //$('#divImageLoading').css('display', 'block');

    /* init footer toolbar */
    $('#footer_toolbar_2').hide();
    $('#footer_toolbar_1').show();

    /* init pos bottom toolbar*/
    CONTENTVIEW_INITOBJECT.initDisplayToolbarDevice();

    // Lock screen
    if(ClientData.serviceOpt_encryption() != 'Y') {
   	 	COMMON.LockScreen();
    }

    //START TRB00094 - Editor : Long - Date : 09/26/2013 - Summary : Setting log
    CONTENTVIEW.StartTimerUpdateLog();

    /* set start log */
    COMMON.SetStartLog(CONTENTVIEW_GENERAL.contentID);
    //END TRB00094 - Editor : Long - Date : 09/26/2013 - Summary : Setting log

    //enable SpecifyControl
    CONTENTVIEW.enableSpecifyControl();

    //Display overlay dialog for specify content type
    CONTENTVIEW.displayOverlayForSpecifyContentType();

    //Resize window
    $(window).resize(function () {

        //Check if content is zooming
        if(CONTENTVIEW.isZoomingContent){
            //var $container = $("#dialog");
           // var w = window.innerWidth;
            //var h = window.innerHeight;

            //$container.css('height', h);
            //$container.css('width', w);
        }
    });

    CONTENTVIEW.handleSliderBar();
    $('#lblSlider').text('/ ' + 1);

    if (CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid() == false) {
        $("#slider_page").slider("option", "disabled", true);
    }

    COMMON.disable('#txtSearch', '#txtSlider');
};

//ビュアーのキャンバスの表示領域をクリアする
CONTENTVIEW_INITOBJECT.clearViewerComponent = function(){

	if ($('#canvasWrapper').length) {

		//次回開いた時に残るので消す
		var canvas = document.getElementById('main');
		var context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);

		$('#mainPre').html('');
		$('#main').html('');
		$('#mainNext').html('');
		$('#playvideo').html('');
		$('#offscreenPre').html('');
		$('#offscreen').html('');
		$('#offscreenNext').html('');
		$('#draw_canvas').html('');
		$('#marker_canvas').html('');
		$('#playaudio').html('');
		$('#playaudiopage').html('');
		$('#playaudioallpage').html('');
		$('#text').html('');
	}

};

//Start: Function: No.4 - Editor : Long - Date : 08/09/2013 - Summary : Create next and previous canvas
/* Initialize PageViewer Component */
CONTENTVIEW_INITOBJECT.initializeViewerComponent = function(viewId) {

	if ($('#canvasWrapper').length) {
		CONTENTVIEW_INITOBJECT.clearViewerComponent();
	} else {
	    /* add some tags we need.*/
	    $('#' + viewId).prepend(
	        '<div id="canvasWrapper">' +
	        '<canvas id="mainPre"></canvas>' +
	        '<canvas id="main"></canvas>' +
	        '<canvas id="mainNext"></canvas>' +
	        '<div id="playvideo"></div>' +
	        '</div>' +
	        '<canvas id="offscreenPre"></canvas>' +
	        '<canvas id="offscreen"></canvas>' +
	        '<canvas id="offscreenNext"></canvas>' +
	        '<canvas id="draw_canvas"></canvas>' +
	        '<canvas id="marker_canvas"></canvas>' +
	        '<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 */
    $('#canvasWrapper').css(
        {
            'position': 'absolute',
            'height' : '100%',
            'width' : '100%',
            'left': '0px'

        }
    );

    //Start : Function : No.20 - Editor : Le Long - Date: 27/08/2013 - Summary : For performing on ipad. On Android 4.1.x do not use overflow : hidden in parent canvas
                                                                            //to avoid draw duplicate canvas bug.

    if(CONTENTVIEW_GENERAL.avwUserEnvObj.isIos()){
        $('#wrapper').css('overflow', 'hidden');
    }

    //End: Function : No.20 - Editor : Le Long - Date: 27/08/2013 - Summary : For performing on ipad. On Android 4.1.x do not use overflow : hidden in parent canvas
                                                                            //to avoid draw duplicate canvas bug.

    $('#main').css(
        {
            'position': 'absolute',
            'top': CONTENTVIEW.marginY + 'px',
            'left': CONTENTVIEW.marginX + 'px',
            'box-shadow': '3px 3px 14px #333',
            'border-radius': '4px',
            'z-index' : '0'

        }
    );


    if(CONTENTVIEW_GENERAL.animateType == CONTENTVIEW_GENERAL.animateTypeKeys.Type_Slide){
        $('#mainNext').css(
            {

                'position': 'absolute',
                'top': CONTENTVIEW.marginY + 'px',
                'left': CONTENTVIEW.marginX + 'px',
                'box-shadow': '3px 3px 14px #333',
                'border-radius': '4px',
                'display': 'none',
                'z-index' : '0'
            }
        );
        $('#mainPre').css(
            {

                'position': 'absolute',
                'top': CONTENTVIEW.marginY + 'px',
                'left': CONTENTVIEW.marginX + 'px',
                'box-shadow': '3px 3px 14px #333',
                'border-radius': '4px',
                'display': 'none',
                'z-index' : '0'
            }
        );
    }
    else{
        $('#mainNext').css(
            {

                'position': 'absolute',
                'top': CONTENTVIEW.marginY + 'px',
                'left': CONTENTVIEW.marginX + 'px',
                'box-shadow': '3px 3px 14px #333',
                'border-radius': '4px',
                'display': 'none',
                'z-index' : '0'
            }
        );
        $('#mainPre').css(
            {

                'position': 'absolute',
                'top': CONTENTVIEW.marginY + 'px',
                'left': CONTENTVIEW.marginX + 'px',
                'box-shadow': '3px 3px 14px #333',
                'border-radius': '4px',
                'display': 'none',
                'z-index' : '0'
            }
        );
    }

    $('#offscreen').css(
        {
            'visibility': 'hidden',
            'display': 'none'
        }
    );
     $('#offscreenPre').css(
        {
            'visibility': 'hidden',
            'display': 'none'
        }
    );
     $('#offscreenNext').css(
        {
            'visibility': 'hidden',
            'display': 'none'
        }
    );

    $('#marker_canvas').css(
        {
            'display': 'none',
            'position': 'absolute',
            'cursor': 'default',
            'z-index' : '0'

        }
    );

    $('#draw_canvas').css(
        {
            'display': 'none',
            'position': 'absolute',
            'cursor': 'default',
            'z-index' : '0'
        }
    );

    $('#playvideo').css(
        {
            'position': 'absolute',
            'top': CONTENTVIEW.marginY + 'px',
            'left': CONTENTVIEW.marginX + 'px',
            'z-index': 0
        }
    );

    //set default event
    CONTENTVIEW.setDefaultEvent();

    /*init canvas value */
    CONTENTVIEW_GENERAL.canvas_marker = document.getElementById('marker_canvas');
    CONTENTVIEW_GENERAL.context_marker = CONTENTVIEW_GENERAL.canvas_marker.getContext('2d');
    CONTENTVIEW_GENERAL.canvas_draw = document.getElementById('draw_canvas');
    CONTENTVIEW_GENERAL.context_draw = CONTENTVIEW_GENERAL.canvas_draw.getContext('2d');
    CONTENTVIEW_GENERAL.canvas_main = document.getElementById('main');
    CONTENTVIEW_GENERAL.context_main = CONTENTVIEW_GENERAL.canvas_main.getContext('2d');
    CONTENTVIEW_GENERAL.canvas_offscreen = document.getElementById('offscreen');
    CONTENTVIEW_GENERAL.context_offscreen = CONTENTVIEW_GENERAL.canvas_offscreen.getContext('2d');
};
//End: Function: No.4 - Editor : Long - Date : 08/09/2013 - Summary : Create next and previous canvas

/* init image if exist marking in page */
CONTENTVIEW_INITOBJECT.initImageCheckMarking = function() {
    /* set draw image if exist */
    var dataMarking = ClientData.MarkingData();
    var isExistMarking = false;

    //Start Function: No.12 - Editor : Long

    var tempPageNo = 0;
    if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_Image)
    {
        tempPageNo = 1;
    }
    else{
        tempPageNo = CONTENTVIEW.changePageIndex(CONTENTVIEW_GETDATA.getPageIndex());
    }
    //End Function: No.12 - Editor : Long


    for (var nIndex = 0; nIndex < dataMarking.length; nIndex++) {
        if (dataMarking[nIndex].contentid == CONTENTVIEW_GENERAL.contentID
		&& dataMarking[nIndex].pageNo == tempPageNo) {
            isExistMarking = true;
            break;
        }
    }

    /* init image display or not */
    if (ClientData.IsAddingMarking() == true) {
        $('#divCheckExistMarking').hide();
    } else {
        if (isExistMarking == true) {
            $('#divCheckExistMarking').show();
        } else {
            $('#divCheckExistMarking').hide();
        }
    }
};

/* init image if exist memo in page */
CONTENTVIEW_INITOBJECT.initImageCheckMemo = function() {
    /* set draw image if exist */
    var dataMemo = ClientData.MemoData();
    var isExistMemo = false;

    //Start Function: No.12 - Editor : Long

    var tempPageNo = 0;
    if(CONTENTVIEW_GENERAL.contentType == COMMON.ContentTypeKeys.Type_Image)
    {
        tempPageNo = 1;
    }
    else{
        tempPageNo = CONTENTVIEW.changePageIndex(CONTENTVIEW_GETDATA.getPageIndex());
    }
    //End Function: No.12 - Editor : Long


    for (var nIndex = 0; nIndex < dataMemo.length; nIndex++) {
        if (dataMemo[nIndex].contentid == CONTENTVIEW_GENERAL.contentID
		&& dataMemo[nIndex].pageNo == tempPageNo) {
            isExistMemo = true;
            break;
        }
    }

    /* init image display or not */
    if (ClientData.IsAddingMemo() == true) {
        $('#divCheckExistMemo').hide();
    } else {
        if (isExistMemo == true) {
            $('#divCheckExistMemo').show();
        } else {
            $('#divCheckExistMemo').hide();
        }
    }
};

CONTENTVIEW_INITOBJECT.ready = function(){
};

