var $ = function(e) { return document.getElementById(e) };
var $$ = function(e) { return document.createElement(e) };
var $n = function(e) {
    var t = document.getElementsByTagName('div');
    var m = [];
    for (var i = 0; i < t.length; i++)
        if (t[i].getAttribute('name') == e) m.push(t[i]);
    return m;
};

//------------------------------------------------------------------
var imgList = [];
function InitPage() {
    var imgs = $n('image');
    for (var i = 0; i < imgs.length; i++) {
        var t;
        imgs[i].appendChild(t = $$('span'));
        var im = imgs[i].getElementsByTagName('img')[0];
        t.innerHTML = im.getAttribute('alt');
        if (im.getAttribute('src').indexOf('(thumb)') >= 0) im.onclick = showImage;
    }
}

function showImage(e) {
    var _src;
    if (window.event) _src = window.event.srcElement; else _src = e.target;
    var src = _src.getAttribute('src');
    src = src.substr(0, src.indexOf('(thumb)')) + src.substr(src.indexOf('(thumb)') + 7);

    for (var i = 0; i < imgList.length; i++)
        if (imgList[i].src == src) {
        showImg(imgList[i]);
        return;
    }

    var ldr = $('ImageLoader');
    var p = G.guOffsetPosition(_src);
    ldr.style.top = p[1] + 'px';
    ldr.style.left = p[0] + 'px';
    ldr.style.height = _src.offsetHeight + 'px';
    ldr.style.width = _src.offsetWidth + 'px';
    ldr.style.display = 'block';
    $('imgLoader').style.marginTop = (_src.offsetHeight / 2 - 16) + 'px';

    var img = new Image();
    img.onload = function() {
        img.orignH = img.height;
        img.orignW = img.width;
        imgList.push(img);
        showImg(img);
        $('ImageLoader').style.display = 'none';
    }
    img.src = src;
}

function showImg(img) {
    var ip = $('ImagePreview');
    img.onclick = fadeOut;
    var w = img.orignW;
    var h = img.orignH;
    var k = h / w;
    if (w > G.getViewportWidth() - 40) { w = G.getViewportWidth() - 70; h = w * k; }
    if (h > G.getViewportHeight() - 40) { h = G.getViewportHeight() - 70; w = h / k; }
    ip.style.top = Math.max((G.getViewportHeight() - h) / 2, 20) + 'px';
    ip.style.left = Math.max((G.getViewportWidth() - w) / 2, 20) + 'px';
    img.style.height = ip.style.height = h + 'px';
    img.style.width = ip.style.width = w + 'px';

    ip.appendChild(img);
    fadeIn();
    $('blender').style.display = 'block';
    ip.style.display = 'block';
}

function fadeIn() {
    var obj = $('ImagePreview');
    var o2 = $('blender');
    var o = obj.style.opacity;
    if (isNaN(o)) o = obj.opacity;
    if (isNaN(o)) o = 0;
    if (o >= 1) return;
    obj.style.opacity = obj.opacity = (o - 0) + 0.2;
    obj.style.filter = 'alpha(opacity=' + obj.opacity * 100 + ')';
    o2.style.opacity = obj.opacity / 2;
    o2.style.filter = 'alpha(opacity=' + obj.opacity * 50 + ')';
    setTimeout(fadeIn, 30);
}

function fadeOut() {
    var ip = $('ImagePreview');
    var o = ip.style.opacity;
    if (isNaN(o)) o = ip.opacity;
    if (isNaN(o)) o = 1;
    if (o <= 0) {
        ip.style.display = 'none';
        $('blender').style.display = 'none';
        ip.removeChild(ip.firstChild);
        return;
    }
    var bl = $('blender');
    bl.style.opacity = (ip.opacity = ip.style.opacity = o = (o - 0.2));
    ip.style.filter = 'alpha(opacity=' + o * 100 + ')';
    bl.style.filter = 'alpha(opacity=' + o * 50 + ')';
    setTimeout(fadeOut, 30);
}

//--------------------------------------------------------------------

var G = {};

if (window.innerWidth) {
    G.getViewportWidth = function() { return window.innerWidth; };
    G.getViewportHeight = function() { return window.innerHeight; };
    G.getHorizontalScroll = function() { return window.pageXOffset; };
    G.getVerticalScroll = function() { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
    G.getViewportWidth = function() { return document.documentElement.clientWidth; };
    G.getViewportHeight = function() { return document.documentElement.clientHeight; };
    G.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
    G.getVerticalScroll = function() { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
    G.getViewportWidth = function() { return document.body.clientWidth; };
    G.getViewportHeight = function() { return document.body.clientHeight; };
    G.getHorizontalScroll = function() { return document.body.scrollLeft; };
    G.getVerticalScroll = function() { return document.body.scrollTop; };
}

if (document.documentElement && document.documentElement.scrollWidth) {
    G.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
    G.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
    G.getDocumentWidth = function() { return document.body.scrollWidth; };
    G.getDocumentHeight = function() { return document.body.scrollHeight; };
}
G.guOffsetPosition = function(element) {
    var offsetLeft = 0, offsetTop = 0;
    do {
        offsetLeft += element.offsetLeft;
        offsetTop += element.offsetTop;
    } while (element = element.offsetParent);
    return [offsetLeft, offsetTop];
}