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

/*==========================================*/
CONTENTVIEW_IMAGEPREVIEW.refreshSlideShowValue = function(){
	CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom = 0;
	CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo = 4;
	CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = [];
	CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false;
	CONTENTVIEW_IMAGEPREVIEW.slideshowInitFlg = true;
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectedIndex = 0;
    //0: next - 1: prev
	CONTENTVIEW_IMAGEPREVIEW.slideshowControlToggleFlg = 0;
	//CONTENTVIEW_IMAGEPREVIEW.totalRecord;
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = 0;
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = 4;
	CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = 0;
};


//Show Image Preview
CONTENTVIEW_IMAGEPREVIEW.showImagePreview = function(targetId, imgList) {
	CONTENTVIEW_IMAGEPREVIEW.refreshSlideShowValue();
    //Check if imageList is not null
    if (imgList != null && imgList != 'undefined' && imgList.length > 0) {
    	CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = CONTENTVIEW_IMAGEPREVIEW.setImageSource(imgList);
        //Check if targetId is not null
        if (targetId != null && targetId != 'undefined') {
            if (CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length == 1) {
                targetId.html('');
                targetId.append('<div id="slideWrapper">'
                + '</div>');

                var mainImg = $('#slideWrapper');
                //START FIXCSS

                var cssObj = { 'background-image': 'url(' + CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[0].thumbnail + ')',
                    'background-repeat': 'no-repeat',
                    'background-size': 'contain',
                    'background-position': 'center'
                };
                mainImg.addClass('imagePreview-one');
                //END FIXCSS


                mainImg.css(cssObj);

                mainImg.parent().css('padding-top', '0px');

            } else {
            	CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground(targetId);
            	CONTENTVIEW_IMAGEPREVIEW.renderSelectImage();
            	CONTENTVIEW_IMAGEPREVIEW.renderMainImage(0);
                CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent();
            }
        }
    }
    else {
    	CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground(targetId);
        $('.main-control').css('visibility', 'hidden');
        $('.slideshow-control').css('visibility', 'hidden');
    }
    CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview();
};

//Set image source for slide show
CONTENTVIEW_IMAGEPREVIEW.setImageSource = function(source){
    var oldSource = source;
    var newSource = [];
    
    for(var nIndex = 0; nIndex < oldSource.length; nIndex++){
        newSource.push({index : nIndex, image : oldSource[nIndex], thumbnail : oldSource[nIndex]});
    }
    
    return newSource;
};

//render background to show image preview
CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground = function(targetId){
    var targetDiv = targetId;
    targetDiv.html('');
    targetDiv.append('<div id="slideWrapper">'
    +'  <div class="gallery-image" id="gallery-image">'
    +'      <div class="main-control" id="main-control-prev"> </div>'
    +'      <div id="main-img" id="mainThumbnail"><div class="mainThumbnail"></div></div>'
    +'      <div class="main-control" id="main-control-next"> </div>'
    +'  </div>'
    +'  <div class="gallery-thumb">'
    +'      <div id="control-prev" class="slideshow-control"><img src="././img/arrow-left.gif"></div>'
    +'      <div id="selector-img">'
    +'      </div>'
    +'      <div id="control-next" class="slideshow-control"><img src="././img/arrow-right.gif"></div>'
    +'  </div>'
    +'</div>'   
    );

    $(window).resize(function () {

    	CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview();
    });

    //CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent();
};

CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview = function() {
    var maxW = "798";
    var ratio = 1.566;
    var maxH = maxW / ratio;
    
    var canvas = document.getElementById('main');
    
    if(ClientData.isStreamingMode() || CONTENTVIEW_GENERAL.avwUserEnvObj.isMobile()){
        if( canvas.width < maxW ){
        	maxW = canvas.width * 0.9;
        	maxH = maxW / ratio;
        }
    }
    
    $("#dialog").css('width', maxW + 'px');
    $("#dialog").css('height', maxH + 'px');
    
    /*
    if ($("#dialog").width() < maxW || $("#dialog").height() < maxH) {
        if ($("#dialog").width() < maxW) {
            $("#dialog").css('width', maxW + 'px');
            $("#dialog").css('height', maxH + 'px');
        }
        if ($("#dialog").height() < maxH) {
            $("#dialog").css('height', maxH + 'px');
            $("#dialog").css('width', maxW + 'px');
        }
    }
    else {
        $("#dialog").css('width', maxW + 'px');
        $("#dialog").css('height', maxH + 'px');
    }
    */
    $("#dialog").center();
};

//render select image
CONTENTVIEW_IMAGEPREVIEW.renderSelectImage = function(){
    var selectImg = $('#selector-img');
    
    $.each(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection, function(i, image){
        if(CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom <= i && i <= CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo){
            selectImg.append('<div class="thumbnail" imageId="'+ image.index +'" style="display:block; background-image : url('+image.thumbnail+')"></div>');
        }
        else{
            selectImg.append('<div class="thumbnail" imageId="'+ image.index +'" style="display:none; background-image : url('+image.thumbnail+')"></div>');
        }
    });
};

//Handle Image Preview Event
CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent = function(){
    
    $('#control-next').click(CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction);
    $('#control-prev').click(CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction);
    
    $('#main-control-next').click(CONTENTVIEW_IMAGEPREVIEW.imageMainSelectNextFunction);
    $('#main-control-prev').click(CONTENTVIEW_IMAGEPREVIEW.imageMainSelectPrevFunction);
    
    $('.thumbnail').click(CONTENTVIEW_IMAGEPREVIEW.selectImgClickFunction);
    $('.thumbnail').mouseenter(CONTENTVIEW_IMAGEPREVIEW.selectImgMouseEnterFunction);
    $('.thumbnail').mouseleave(CONTENTVIEW_IMAGEPREVIEW.selectImgMouseLeaveFunction);
    
    $('.main-control').css('opacity','0');
    
    $('#main-control-next').mouseleave(CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseLeaveFunction);
    $('#main-control-prev').mouseleave(CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseLeaveFunction);
    
    if (COMMON.isTouchDevice()) {
    	//タッチ操作が背後のメインコンテンツに伝わるのを防止
    	$('#slideWrapper').on("touchmove", function(e) {
    		e.preventDefault();
    	});
    } else {
        //$('.main-control').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlMouseEnterFunction);
        $('#main-control-next').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseEnterFunction);
        $('#main-control-prev').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseEnterFunction);
    }
    
    //$('.thumbnail:first').css('box-shadow','0px 7px 7px #555');
    $('.thumbnail:first').addClass('activeThumb');
    CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
};

CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseEnterFunction = function(){
    $(this).css('opacity','0.5');
};

CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseLeaveFunction = function(){
    $(this).css('opacity','0');
};

CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseEnterFunction = function(){
    $(this).css('opacity','0.5');
};

CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseLeaveFunction = function(){
    $(this).css('opacity','0');
};

//Image Preview next icon function
CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction = function(){

    if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length - 1){
        $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex+')').animate({width: 'hide'},
            {step: function(now, fx){                                       
                        $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex+')').animate({width: 'show'});                       
                }
            }
        );
        
        CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex + 1;
        CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex + 1;
        CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
    }
};

//Image preview prev icon function
CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction = function(){
    var fixedIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex - 1;
    
    if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex > 0){
        
        $('#selector-img div:eq('+fixedIndex+')').animate({width: 'show'});
        $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex+')').animate({width:'hide'});
        CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex - 1;
        CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex - 1;
        CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
    }

};

//Main Image next icon function
CONTENTVIEW_IMAGEPREVIEW.imageMainSelectNextFunction = function() {

    if (COMMON.isTouchDevice() == true) {
        $('#main-control-next').css('opacity', '0.5');
    }


    if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) {
    	CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true;
        var fixedIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) + 1;

        if (CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length - 1) {
            $('#main-img div').animate(
            { "left": "-=100%" },
            {
                /*duration: "slow",*/
                complete: function () {
                    $('#main-img div').hide();
                    CONTENTVIEW_IMAGEPREVIEW.renderMainImage(fixedIndex);
                    $('#main-img div').css('left', '+=300%');
                    $('#main-img div').show();
                    $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[fixedIndex].thumbnail).load(function () {
                        $('#main-img div').animate({ left: '0%' });
                    });
                    CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) + 1;
                    CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage();
                    CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
                }
            }
        );
        }
    }
};

//Main Image prev icon function
CONTENTVIEW_IMAGEPREVIEW.imageMainSelectPrevFunction = function() {
    if (COMMON.isTouchDevice() == true) {
        $('#main-control-prev').css('opacity', '0.5');
    }

    if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) {
    	CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true;
        var fixedIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) - 1;

        if (CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > 0) {
            $('#main-img div').animate(
            { "left": "+=100%" },
            {
                duration: "medium",
                complete: function () {
                    $('#main-img div').hide();
                    CONTENTVIEW_IMAGEPREVIEW.renderMainImage(fixedIndex);
                    $('#main-img div').css('left', '-=300%');
                    $('#main-img div').show();
                    $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[fixedIndex].thumbnail).load(function () {
                        $('#main-img div').animate({ left: '0%' });
                    });
                    CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) - 1;
                    CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage();
                    CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
                }
            }
        );

        }
    }
};

//Selector Image click function
CONTENTVIEW_IMAGEPREVIEW.selectImgClickFunction = function() {
    if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) {
    	CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true;
        var imgIndex = $(this).attr('imageId');

        if (imgIndex > CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) {
            $('#main-img div').animate(
            { "left": "-=100%" },
            {
                duration: "medium",
                complete: function () {
                    $('#main-img div').css('display', 'none');
                    CONTENTVIEW_IMAGEPREVIEW.renderMainImage(imgIndex);
                    $('#main-img div').css('left', '+=300%');
                    $('#main-img div').css('display', 'block');
                    $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[imgIndex].thumbnail).load(function () {
                        $('#main-img div').animate({ left: '0%' });
                    });

                    CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex;
                    CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
                }
            }
        );
        }
        else if (imgIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) {
            $('#main-img div').animate(
            { "left": "+=100%" },
            {
                duration: "medium",
                complete: function () {
                    $('#main-img div').css('display', 'none');
                    CONTENTVIEW_IMAGEPREVIEW.renderMainImage(imgIndex);
                    $('#main-img div').css('left', '-=300%');
                    $('#main-img div').css('display', 'block');
                    $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[imgIndex].thumbnail).load(function () {
                        $('#main-img div').animate({ left: '0%' });
                    });
                    CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex;
                    CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
                }
            }
        );
        }
        else {
        	CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false;
            CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex;
            CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton();
        }

        //$('.thumbnail').css('box-shadow', '');
        $('.thumbnail').removeClass('activeThumb');
        //$(this).css('box-shadow', '0px 7px 7px #555');
        $(this).addClass('activeThumb');
        CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = true;
    }
};

//Render Main Image
CONTENTVIEW_IMAGEPREVIEW.renderMainImage = function(i) {
    
    var mainImg = $('#main-img div');
    mainImg.css('background-image', 'url(' + CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[i].thumbnail + ')');

    CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false;
    if (COMMON.isTouchDevice() == true) {
        $('#main-control-next').css('opacity', '0');
        $('#main-control-prev').css('opacity', '0');
    }
};

CONTENTVIEW_IMAGEPREVIEW.selectImgMouseLeaveFunction = function(){
    if(!CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg){
        //$('this').css('box-shadow','');
        $('this').removeClass('activeThumb');
        CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false;
    }
    else{
        //CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false;
    }
};

CONTENTVIEW_IMAGEPREVIEW.selectImgMouseEnterFunction = function(){
    
    //$('.thumbnail').css('box-shadow','');
    $('.thumbnail').removeClass('activeThumb');
    //$(this).css('box-shadow','0px 7px 7px #555');
    $(this).addClass('activeThumb');
};

//Main control mouse leave function
CONTENTVIEW_IMAGEPREVIEW.mainControlMouseLeaveFunction = function(){   
    $('.main-control').css('opacity','0');
};

//Main control mouse enter function
CONTENTVIEW_IMAGEPREVIEW.mainControlMouseEnterFunction = function(){
    $('.main-control').css('opacity','0.5');
};

//Sync Main Image with select Image
CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage = function(){
    var thumbImg = $('.thumbnail[imageId="'+ CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex +'"]'); 

    if(thumbImg.is(':hidden')){
        if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex){
        	CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction();
        }
        else if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex){
        	CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction();
        }
    }
    
    //$('.thumbnail').css('box-shadow','');
    $('.thumbnail').removeClass('activeThumb');
    //thumbImg.css('box-shadow','0px 7px 7px #555');
    thumbImg.addClass('activeThumb');
};

//Handle display button control
CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton = function(){
    
    if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex > 0){      
        $('#control-prev').css('visibility','visible');
    }
    else{
        $('#control-prev').css('visibility','hidden');
    }
    
    if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex < (eval(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length) - 1)){ 
        $('#control-next').css('visibility','visible');
    }
    else{
        $('#control-next').css('visibility','hidden');
    }
    
    if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > 0){     
        $('#main-control-prev').css('visibility','visible');
    }
    else{
        $('#main-control-prev').css('visibility','hidden');
    }
    
    if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < (eval(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length) - 1)){
        $('#main-control-next').css('visibility','visible');
    }
    else{
        $('#main-control-next').css('visibility','hidden');
    }
};

$(function () {
	//CONTENTVIEW_IMAGEPREVIEW.ready();
});

CONTENTVIEW_IMAGEPREVIEW.ready = function(){
	/*====Variable====*/
	CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom = 0;
	CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo = 4;
	CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = [];
	CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false;
	CONTENTVIEW_IMAGEPREVIEW.slideshowInitFlg = true; //未使用
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectedIndex = 0; //未使用
	//0: next - 1: prev
	CONTENTVIEW_IMAGEPREVIEW.slideshowControlToggleFlg = 0; //未使用
	//CONTENTVIEW_IMAGEPREVIEW.totalRecord; //未使用
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = 0;
	CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = 4;
	CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = 0;
	CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false;
};

