function getGlobalX(obj) {
    var parObj = obj;
    var left = obj.offsetLeft;
    while (parObj = parObj.offsetParent) {
        left += parObj.offsetLeft;
    }
    return left;
}
function getGlobalY(obj) {
    var parObj = obj;
    var top = obj.offsetTop;
    while (parObj = parObj.offsetParent) {
        top += parObj.offsetTop;
    }
    return top;
}
function changeAnimationPath(it, left, top) {
    var idx = -1;
    var list = this.document.styleSheets[0].cssRules;
    for (i = 0; i < list.length; i++) {
        if (list[i].selectorText == '.move') {
            idx = i;
            break;
        }
    }
    if (idx == -1) return;
    var targetTop =  - top;
    var targetLeft =  - left + it.clientWidth  + 2;
    var leftCtrl =  0;
    var topCtrl = -(it.offsetTop - targetTop) / 2;
    var path = "path('M";

    path += 0;
    path += ' ';
    path += 0;

    path += ' Q';

    path += leftCtrl;
    path += ' ';
    path += topCtrl;
    path += ' ';

    path += targetLeft;
    path += ' ';
    path += targetTop;

    path += "')";
    //console.log(path);
    this.document.styleSheets[0].cssRules[idx].style.setProperty('motion-path', path);
}
function removePhotoItems() {
    var content = document.getElementById('content_photo');
    while (content.hasChildNodes()) {
        content.removeChild(content.childNodes[0]);
    }
}
function refreshAlbum(albumIdx) {
    if (g_item_id_all == albumIdx) {
        removePhotoItems();
    } else {
        preparePhotoContent(albumIdx);
    }
}
function switchAlbum(albumIdx) {
    g_lastItem = 0;
    g_current_album = albumIdx;
    //clearTimeout(g_addAlbumPhotoTimer);
    //g_addAlbumPhotoTimer = 0;
    if (!g_onlyHtmlDebug) {
        parent.jsAction("switchAlbum", albumIdx);
    }
    g_maskIterCnt = 0;
    pasueAnimation(document.getElementById('cover_before'), false);
    pasueAnimation(document.getElementById('cover_after'), false);
}
//var g_Interval = 0;
function showMoveFrame(bAnimate) {
    var sndFrm = document.getElementById('item_frame_second');
    //clearInterval(g_Interval);
    showItem(sndFrm, true);
    pasueAnimation(sndFrm, !bAnimate);
    //if (!bAnimate) return;
    //g_Interval = setInterval(function () {
    //    var style = window.getComputedStyle(g_itemMovment, 'motion-path');
    //    //var yLen = g_itemMovment.offsetTop + 5;
    //    //var xLen = g_itemMovment.offsetLeft - 126;
    //    var mOffset = parseFloat(style.motionOffset);
    //    //var curY = g_itemMovment.offsetTop - yLen * mOffset / 100;
    //    //var curX = g_itemMovment.offsetLeft - xLen * mOffset / 100;
    //    //var v = 100 / mOffset - 1;
    //    //v = v * v + 1;
    //    showItem(sndFrm, v < g_headerHeight);
    //}, 20);
}
function changeItemMovePath(albumIdx, itemIdx)
{
    var obj = document.getElementById(makeItemID('item', albumIdx, itemIdx));
    var content = obj.parentElement;
    var albumIdx = obj.getAttribute('albumIdx');
    var itemIdx = obj.getAttribute('itemIdx');
    g_itemMovment.setAttribute('albumIdx', albumIdx);
    g_itemMovment.setAttribute('itemIdx', itemIdx);
    var left = getGlobalX(obj);
    var top = getGlobalY(obj) - content.scrollTop;
    var sndFrm = document.getElementById('item_frame_second');

    g_itemMovment.style.left = left - 0.5;
    g_itemMovment.style.top = top - 4;
    changeAnimationPath(g_itemMovment, left - 0.5, top - 4);

    sndFrm.style.left = left;
    sndFrm.style.top = top;
    changeAnimationPath(sndFrm, left, top);

    sndFrm.style.zIndex = 1;
    g_itemMovment.style.zIndex = 5;
    showItem(g_itemMovment, true);
}
function moveItemStart(obj) {
    if (!g_onlyHtmlDebug) {
        parent.jsAction("delayThreadPriority", true);
    }
    var albumIdx = obj.getAttribute('albumIdx');
    var itemIdx = obj.getAttribute('itemIdx');
    SetItemThumbnail(g_itemMovment, albumIdx, itemIdx);
    var item = document.getElementById(makeItemID('item', albumIdx, itemIdx));
    showItem(item, false);    
    switchAlbum(albumIdx);
    showItem(g_itemMovment, true);
    changeItemMovePath(albumIdx, itemIdx);
    pasueAnimation(g_itemMovment, false);
    showMoveFrame(true);
}
function resetSecondHeader(albumIdx, itemIdx)
{
    var cnt = document.getElementById('header_cnt');
    var bAlbumPage= (g_current_album == g_item_id_all);
    showItem(cnt, !bAlbumPage);
    //var headerFrm = document.getElementById('item_frame_second');
    //showItem(headerFrm, !b);
    if (bAlbumPage) return;
    cnt.style.zIndex = g_itemMovment.style.zIndex + 1;
    var obj = itemCount(document.getElementById(makeItemID('item', albumIdx, itemIdx)));
    if (!obj || !cnt) return;
    cnt.childNodes[0].innerText = obj.innerText;
    return;
}
function moveItemStop(obj) {
    if (!g_onlyHtmlDebug) {
        parent.jsAction("delayThreadPriority", false);
    }
    var itemIdx = obj.getAttribute('itemIdx');
    var albumIdx = obj.getAttribute('albumIdx');
    var item = document.getElementById(makeItemID('item', albumIdx, itemIdx));
    var b = (g_current_album == g_item_id_all);
    grayFirstItem(!b);
    showItem(item, b);
    pasueAnimation(item, !b);
    showItem(g_itemMovment, !b);
    resetSecondHeader(albumIdx, itemIdx);
    showMoveFrame(false);
}
function onItemAnimationPaused(obj) {
    pasueAnimation(obj, true);
    if (obj != g_itemMovment && g_aIterCnt > 0) {
        setTimeout(function () {
            obj.classList.remove('transform');
            obj.style.opacity = '1.0';
            obj.style.borderRadius = '4px';
            obj.style.webkitTransformOrigin = '50% 50% 0';
            obj.style.webkitTransform = 'scale(1.0,1.0)';
        }, 80);
        g_aIterCnt = 0;
        return false;
    }
    if (isHeaderItem(obj)) {
        moveItemStop(obj);
        setTimeout(function () {
            g_itemMovment.style.left = g_itemMovment.offsetLeft;
            g_itemMovment.style.top = g_itemMovment.offsetTop;
            var headerFrm = document.getElementById('item_frame_second');
            headerFrm.style.left = headerFrm.offsetLeft;
            headerFrm.style.top = headerFrm.offsetTop;
        }, 80);
    } else {
        moveItemStart(obj);
    }
    return true;
}
function onStartAnimation(obj) {
    if (window.event.target != obj) return;
    if (g_current_album != g_item_id_all) return;
    pasueAnimation(obj, false);
    var mask = document.getElementById('mask_container');
    mask.style.width = '100%';
    mask.style.height = '100%';
    if (obj != g_itemMovment) {
		setTimeout(function () {
       obj.classList.add('transform');
		},80);
    }
}