// ######### simple animate thumbs
// Copyright by SimpleCj company, patented.
// US Pat. 7741942, EU Pat. 9182-1491-NL
// ######### ---------------------
var timer = null;
// @@ public function
function InitAnimate() {
    var mainBlock = document.getElementsByTagName("body")[0];
    if (mainBlock==null) return;
    // set handler (pass touch event)
    if (!('ontouchstart' in document.documentElement)) {
	mainBlock.onmouseover = function(event) { UpdateByMode(event,0); }
	mainBlock.onmouseout = function(event) { UpdateByMode(event,1); }
	mainBlock.onclick = function(event) { clearTimeout(timer); }
    }
    // create progress bar
    var progressBar = document.createElement('DIV');
    progressBar.id = 'progressBar';
    progressBar.className = 'progress';
    mainBlock.appendChild(progressBar);
}

function UpdateByMode(event, mode) {
    // filter not thumb event
    event = (event || window.event);
    var target = (event.target || event.srcElement);
    if (target.tagName!="IMG" || target.id.indexOf("_")==-1) return;
    // parse id
    var imageId = target.id;
    var showParam = imageId.split("_");
    if (showParam.length!=5) return;
    // call start/end update
    var image = document.getElementById(imageId);
    if (mode==0) UpdateStart(image, parseInt(showParam[1]), parseInt(showParam[2]),
	parseInt(showParam[3]), parseInt(showParam[4]));
    else if (mode==1) UpdateEnd(image, parseInt(showParam[1]));
}

function UpdateStart(image, currentNumber, startNumber, endNumber, stepSize) {
    // check step size
    if (10.0<((endNumber-startNumber)/stepSize)) {
        var targetStepSize = Math.floor(((endNumber-startNumber)/10.0)+0.9999);
        stepSize = targetStepSize+(stepSize-targetStepSize%stepSize);
    }
    // build show index
    var showIndex = BuildShowIndex(currentNumber, stepSize, startNumber, endNumber);
    var currentStep = FindCurrentStep(showIndex, currentNumber);
    currentStep = (currentStep==0 ? 1:0);
    // create progress bar
    var progressBar = document.getElementById("progressBar");
    progressBar.style.visibility = "visible";
    progressBar.style.width = Math.round(0.7*image.width)+"px";
    progressBar.style.height = Math.floor(0.056*Math.sqrt(image.height/180)*180)+"px";
    var imageOffset=OffsetElement(image);
    progressBar.style.left = Math.round(imageOffset.left+0.15*image.width)+"px";
    progressBar.style.top = Math.round(imageOffset.top+0.93*image.height)+"px";
    DeleteProgressBar(progressBar);
    FillProgressBar(progressBar, showIndex.length, currentStep);
    // preload all image for exclude load delay
    var loadImages = new Array();
    PreLoadImages(UrlToDirectory(image.src), showIndex, loadImages);
    // start output in loop
    timer = setTimeout(function() {OutputImage(image.id,showIndex,currentStep,loadImages);},200);
}

function UpdateEnd(image, currentNumber) {
    // hide progress bar
    var progressBar = document.getElementById("progressBar");
    if (progressBar!=null) {
	progressBar.style.visibility = "hidden";
	progressBar.style.left = progressBar.style.top = "0px";
	progressBar.style.width = progressBar.style.height = "0px";
    }
    // stop animate
    clearTimeout(timer);
    // set source image
    var dirUrl = UrlToDirectory(image.src);
    LoadImage(image, dirUrl, currentNumber);
}

// @@ private function
function OutputImage(imageId, showIndex, stepNumber, loadImages) {
    // get image element
    var image = document.getElementById(imageId);
    if (image==null) return;
    // parse param
    var showInterval = (stepNumber==(showIndex.length-1) ? 700 : 500);
    if (showIndex.length<=stepNumber) stepNumber=0;
    // load is ok?
    var currentImage = loadImages[stepNumber];
    if (currentImage!=undefined && currentImage.complete) {
	// output image
	image.src = currentImage.src;
	// reset progress
	if (stepNumber==0) {
    	    var progressBar = document.getElementById("progressBar");
	    if (progressBar!=null) ResetProgressBar(progressBar);
	}
	stepNumber++;
	// update progress
	IncProgressBar(stepNumber-1);
    }
    else showInterval=30;
    // set timeout for show next image
    timer = setTimeout(function() {OutputImage(imageId,showIndex,stepNumber,loadImages);},
	showInterval);
}

function BuildShowIndex(currentNumber, stepSize, startNumber, endNumber) {
    var showIndex = new Array(), nextNumber = startNumber, i = 0;
    if (currentNumber<startNumber || endNumber<currentNumber) { showIndex[0]=currentNumber; return showIndex; }
    do {
        showIndex[i++] = nextNumber;
        nextNumber = NextNumberImage(nextNumber, stepSize, startNumber, endNumber, currentNumber);
        if (50<i) break; // protection
    } while(nextNumber!=startNumber);
    return showIndex;
}

function NextNumberImage(currentNumber, stepSize, startNumber, endNumber, sourceNumber) {
    var nextNumber = currentNumber+stepSize;
    if (currentNumber<sourceNumber && sourceNumber<nextNumber) nextNumber=sourceNumber;
    else if (currentNumber==sourceNumber) nextNumber=sourceNumber+(stepSize-((sourceNumber-startNumber)%stepSize));
    if (endNumber<nextNumber) nextNumber=startNumber;
    return nextNumber;
}

function FindCurrentStep(showIndex, currentNumber) {
    for (var step=0;step<showIndex.length;step++)
	if (showIndex[step]==currentNumber) return step;
    return 0;
}

function LoadImage(image, dirUrl, currentNumber) {
    image.src = dirUrl + currentNumber + ".jpg";
}

// for more fast load
function PreLoadImage(dirUrl, currentNumber, index, loadImages) {
    loadImages[index] = new Image();
    LoadImage(loadImages[index], dirUrl, currentNumber);
}

// use 1 timer for preload images. at end - clear timer
function PreLoadImages(dirUrl, showIndex, loadImages) {
    for (var i=0;i<showIndex.length;i++) {
        (function(x) {
	    setTimeout(function(){PreLoadImage(dirUrl, showIndex[x], x, loadImages);}, i*50);
	})(i);
    }
}

function UrlToDirectory(url) {
    var pos = url.lastIndexOf('/');
    if (pos!=-1) return url.substr(0, pos+1);
    return url;
}

function FillProgressBar(progressBar, stepCount, fillStepCount) {
    // (1px border + 1px margin)*2 => -2-2
    var blockWidth = ((parseInt(progressBar.style.width)/stepCount)-2-2);
    if (0.1<(blockWidth-parseInt(blockWidth))) blockWidth-=0.1;
    if (blockWidth<1) blockWidth=1;
    var blockHeight = ((parseInt(progressBar.style.height))-2-2);
    if (blockHeight<1) blockHeight=1;
    for(i=0;i<stepCount;i++) {
        var indicatorBlock = document.createElement('div');
        if (i<fillStepCount) indicatorBlock.className = "fillBlock";
	else indicatorBlock.className = "emptyBlock";
        indicatorBlock.id = "block"+i;
        indicatorBlock.style.width = blockWidth+"px";
        indicatorBlock.style.height = blockHeight+"px";
        progressBar.appendChild(indicatorBlock);
    }
}

function DeleteProgressBar(progressBar) {
    while (progressBar.childNodes.length!=0)
        progressBar.removeChild(progressBar.lastChild);
}

function IncProgressBar(stepNumber) {
    var indicatorBlock = document.getElementById("block"+stepNumber);
    if (indicatorBlock!=null) indicatorBlock.className = "fillBlock";
}

function ResetProgressBar(progressBar) {
    var maxStepNumber = progressBar.childNodes.length;
    for (i=0;i<maxStepNumber;i++) {
        indicatorBlock = document.getElementById("block"+i);
        if (indicatorBlock!=null) indicatorBlock.className = "emptyBlock";
    }
}

function OffsetElement(elem) {
    var top=0, left=0;
    while(elem) {
        top = top + parseFloat(elem.offsetTop);
        left = left + parseFloat(elem.offsetLeft);
        elem = elem.offsetParent;
    }
    return {top: Math.round(top), left: Math.round(left)};
}