/// <reference path="common.js" />

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


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

                var mainImg = $('#slideWrapper');

                var cssObj = { 'background-image': 'url(' + slideshowImageCollection[0].thumbnail + ')',
                    'background-repeat': 'no-repeat',
                    'background-size': 'contain',
                    'background-position': 'center',
                    'background-color': 'black'
                };

                mainImg.css(cssObj);

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

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

//Set image source for slide show
function setImageSource(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
function renderSlideShowBackground(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 () {

	    optimizeSizeImagePreview();
	});

	//handleImagePreviewEvent();
};
function optimizeSizeImagePreview() {
    var maxW = "798";
    var ratio = 1.566;
    var maxH = maxW / ratio;



    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
function renderSelectImage(){
	var selectImg = $('#selector-img');
	
	$.each(slideshowImageCollection, function(i, image){
		if(slideshowImgFrom <= i && i <= 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
function handleImagePreviewEvent(){
	
	$('#control-next').click(imageSelectNextFunction);
	
	$('#control-prev').click(imageSelectPrevFunction);
	
	$('#main-control-next').click(imageMainSelectNextFunction);

	$('#main-control-prev').click(imageMainSelectPrevFunction);
	
	$('.thumbnail').click(selectImgClickFunction);
	
	$('.thumbnail').mouseenter(selectImgMouseEnterFunction);
	
	$('.thumbnail').mouseleave(selectImgMouseLeaveFunction);
	
	$('.main-control').css('opacity','0');
	
	
	$('#main-control-next').mouseleave(mainControlNextMouseLeaveFunction);
	
	
	$('#main-control-prev').mouseleave(mainControlPrevMouseLeaveFunction);
	
	if (isTouchDevice() == false) {
	    //$('.main-control').mouseenter(mainControlMouseEnterFunction);
	    $('#main-control-next').mouseenter(mainControlNextMouseEnterFunction);
	    $('#main-control-prev').mouseenter(mainControlPrevMouseEnterFunction);
	}
	
	//$('.main-control').mouseleave(mainControlMouseLeaveFunction);
	
	$('.thumbnail:first').css('box-shadow','0px 7px 7px #555');
	
	handleDispNextPrevButton();
};

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

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

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

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

//Image Preview next icon function
function imageSelectNextFunction(){

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

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

};
var slideshow_isTransaction = false;

//Main Image next icon function
function imageMainSelectNextFunction() {

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


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

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

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

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

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

        }
    }
};

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

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

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

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

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

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

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

function selectImgMouseEnterFunction(){
	
	$('.thumbnail').css('box-shadow','');
	$(this).css('box-shadow','0px 7px 7px #555');
};

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

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

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

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

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


