var OVERLAY;

/*@cc_on
  @if (@_jscript_version < 5.7)
    document.createElement('ABBR');
  @end @*/

var fx = {
    fade : {
        opacity : 80,
        intval : 20,
        fadeIn : function (el) {
            var z = 25, that = this;
            var fade = window.setInterval(
                function () {
                    if (z <= 100) {
                        fx.opacity(el, z);
                        z += 25;
                    } else {
                        window.clearInterval(fade);
                        el = null;
                    }
                }, 20);
        },
        to : function (el) {
            var z = this.intval, that = this;
            var fade = window.setInterval(
                function () {
                    if (z <= that.opacity) {
                        fx.opacity(el, z);
                        z += 20;
                    } else {
                        window.clearInterval(fade);
                        el = null;
                    }
                }, 20);
        },
        out : function (el, cb) {
            var z = this.opacity, that = this;
            var fade = window.setInterval(
                function () {
                    if (z >= 0) {
                        fx.opacity(el, z);
                        z -= 20;
                    } else {
                        window.clearInterval(fade);
                        el = null;
                        if (cb) {
                            cb();
                        }
                    }
                }, 20);
        }
    },
    opacity : function (el, z) {
        if (document.body.filters) {
            this.opacity = function (el, z) {
                el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity = ' + z + ')';
            };
        } else {
            this.opacity = function (el, z) {
                el.style.opacity = (z / 100);
            };
		}
        this.opacity(el, z);
    }
};

var img = {
    i18n : {
		photo : 'Photo',
		of : 'of',
		prev : 'Previous',
		next : 'Next',
		left : '[left arrow]',
		right : '[right arrow]',
		close : 'Close',
		esc : '[esc]'
    },
    count : 0,
    gallery : [],
    legacy : null,
    rel : 'passepartout',
    intrinsic : {
		x : null,
		y : null
    },
	make : function (gi, attr, str) {
		var el = document.createElement(gi.toUpperCase());
		for (val in attr) {
			el[val] = attr[val];
		}
		if (str) {
			el.appendChild(document.createTextNode(str));
		}
		return el;
    },
    create : function () {
		this.passepartout = this.make('DIV', {id: 'passepartout'});
		document.body.appendChild(this.passepartout);
		this.iframe = this.make('IFRAME');
		this.passepartout.appendChild(this.iframe);
		this.background = this.make('DIV', {className: 'background'});
		this.passepartout.appendChild(this.background);
		this.legend = this.make('DIV', {className: 'legend'});
		this.passepartout.appendChild(this.legend);
		this.load = this.make('IMG', {className: 'load', src: 'img/icons/load.gif', alt: 'loading…'});
		this.passepartout.appendChild(this.load);
		this.frame = this.make('DIV', {className: 'frame'});
		this.passepartout.appendChild(this.frame);
		this.close = this.make('DIV', {className: 'close'});
		this.frame.appendChild(this.close);
		this.close.appendChild(this.make('IMG', {src: 'img/icons/close.png', alt: 'x', title: img.i18n.close}));
		this.image = this.make('IMG');
		this.frame.appendChild(this.image);
		var tmp = this.make('DIV', {className: 'toolbar'});
		this.frame.appendChild(tmp);
		this.prev = this.make('A', {className: 'prev', href: '#'});
		tmp.appendChild(this.prev);
		this.prev.appendChild(this.make('IMG', {src: 'img/icons/end.png', title: ''}));
		this.next = this.make('A', {className: 'next', href: '#'});
		tmp.appendChild(this.next);
		this.next.appendChild(this.make('IMG', {src: 'img/icons/end.png', title: ''}));
		this.caption = this.make('SPAN', {className: 'caption'});
		tmp.appendChild(this.caption);
		this.background.onclick = this.hide;
		this.close.onclick = this.hide;
    },
    init : function () {
        this.create();
        var a = document.links, l = a.length, x;
        for (var i = 0; i < l; i++) {
            x = a[i];
            if (this.rel == x.rel) {
				this.count++;
				this.gallery[this.count] = x;
				x.href += '#view=' + this.count;
				x.onclick = img.show;
            }
        }
	a = null, x = null;
	var load = new Image();
	load.src = 'img/icons/load.gif';
        if (window.location.hash) {
            var i = window.location.hash.split('=')[1];
            if (img.gallery[+i]) {
                this.show(null, img.gallery[+i]);
            }
        }
    },
    show : function (e, o) {
        var that = o || this;
		var active = false;
		if (!img.passepartout.style.display || 'none' === img.passepartout.style.display) {
            img.passepartout.style.display = 'block';
		} else {
			if (!img.gallery[+that.href.split('=')[1]] || (img.image.src == that.href.split('#')[0])) {
				return false;
			}
			active = true;
            img.frame.style.visibility = '';
		}
		img.caption.innerHTML = (that.title
								 && (that.title != img.i18n.prev)
                                 && (that.title != img.i18n.next))
            ? (that.title.split(': ')[1] || that.title) : '';
        img.size();
		img.load.style.visibility = 'visible';
		img.pos(img.load);
		if (img.count > 1) {
			img.legend.style.visibility = 'visible';
			img.legend.innerHTML = img.i18n.close + ': ' + img.i18n.esc;
		}
		img.legend.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 'px';
		img.legend.style.visibility = 'visible';
		img.legend.innerHTML = img.i18n.close + ': ' + img.i18n.esc;
		if (!active) {
			img.legacy = (document.onkeydown) ? document.onkeydown : null;
			fx.fade.to(img.background);
		}
		var preload = new Image();
        var index = that.href.split('=')[1];
        preload.onload = function () {
			img.legend.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 'px';
			var h = img.gallery[+index], r, ico;
			if (img.count > 1) {
				img.button((index > 1), 'prev', (+index - 1));
				img.button((index < img.count), 'next', (+index + 1));
				var str = img.i18n.photo + ' ' + index + ' ' + img.i18n.of + ' ' + img.count + ' || ';
				if (index > 1) {
					str += img.i18n.prev + ': ' + img.i18n.left + ' | ';
				}
				if (index < (img.count)) {
					str += img.i18n.next + ': ' + img.i18n.right + ' | ';
				}
				str += img.i18n.close + ': ' + img.i18n.esc;
				img.legend.innerHTML = str;
			}
			img.intrinsic.x = this.width;
			img.intrinsic.y = this.height;
            var tmp = this;
            window.setTimeout(
                function () {
					img.image.src = tmp.src;
					img.fit();
					img.pos(img.frame);
                    fx.opacity(img.image, 0);
                    window.setTimeout(
                        function () {
							img.frame.style.visibility = 'visible';
							img.load.style.visibility = '';
                            fx.fade.fadeIn(img.image);
							document.onkeydown = img.keys;
                        }, 50);
                }, 50);
        };
		preload.src = img.gallery[+index].href.split('#')[0];
		//preload = null;
        if (window.location.hash) {
            window.location = window.location.toString().replace(window.location.hash, '#view=' + index);
        } else {
            window.location = window.location.toString() + '#' + that.href.split('#')[1];
        }
        return false;
    },
    fit : function () {
		var x = img.intrinsic.x;
		var y = img.intrinsic.y;
		var w = document.body.offsetWidth - 160;
		var h = (window.innerHeight || document.documentElement.clientHeight) - (80 + img.legend.offsetHeight + img.caption.offsetHeight);
		if (x > w) {
			y = y * (w / x);
			x = w;
			if (y > h) {
				x = x * (h / y);
				y = h;
			}
		} else if (y > h) {
			x = x * (h / y);
			y = h;
			if (x > w) {
				y = y * (w / x);
				x = w;
			}
		}
		img.image.width  = x;
		img.image.height = y;
		img.frame.style.width = (img.image.width) + 'px';
    },
    button : function (guard, dir, h) {
		var a = img[dir], ico = a.firstChild, el = img.gallery[+h];
		a.style.display = 'block';
		if (guard && (h >= 1)) {
			ico.src = 'img/icons/' + dir + '.png';
			ico.alt = img.i18n[dir];
			a.style.cursor = 'pointer';
			a.href = el.href;
			a.title = img.i18n[dir];
			if (el.title) {
				a.title +=  ': ' + el.title;
			}
			a.onclick = img.show;
		} else {
			a.style.cursor = 'default';
			ico.src = 'img/icons/end.png';
			ico.alt = '|';
		}
    },
    hide : function () {
	img.load.style.visibility = '';
        img.frame.style.visibility = '';
        fx.fade.out(img.background, function () {
            img.passepartout.style.display = 'none';
            img.background.style.opacity = 0;
			document.onkeydown = img.legacy;
        });
        window.location = window.location.toString().replace(window.location.hash, '#view');
    },
    pos : function (el) {
        var innerHeight = window.innerHeight || document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var top = (innerHeight / 2) - (el.offsetHeight / 2);
        el.style.top = (scrollTop + top) + 'px';
        el.style.left = (document.body.offsetWidth / 2) - (el.offsetWidth / 2) + 'px';
    },
    size : function () {
	var d = document.body.offsetHeight;
	var w = window.innerHeight || document.documentElement.clientHeight;
        this.iframe.style.width = document.body.offsetWidth + 'px';
        this.iframe.style.height = ((w >= d) ? w : d) + 'px';
        this.background.style.width = document.body.offsetWidth + 'px';
        this.background.style.height = ((w >= d) ? w : d) + 'px';
    },
    keys : function (e) {
	if (!e) {
	    e = window.event;
	}
	switch (e.keyCode) {
	case 37:
	    img.show(e, img.prev);
            return false;
	    break;
	case 39:
	    img.show(e, img.next);
            return false;
	    break;
	case 27:
	    if (img.frame.style.visibility) {
		img.hide();
	    }
            return false;
	    break;
	default:
	    break;
	}
    }
};

function resize() {
    if ('block' == img.passepartout.style.display) {
	img.fit(img.image.width, img.image.height);
        img.size();
        img.pos(img.frame);
    }
}

function load() {
    if (OVERLAY) {
	img.init();
	window.onresize = resize;
    }
}

window.onload = load;