function copy(dest, src, replace) {
    for (var i in src) {
        dest[i] = src[i];
    }
}

function get(id) {
    return document.getElementById(id);
}

function getDem() {

    var h = self['innerHeight'] || (document.documentElement['clientHeight'] || document.body['clientHeight']);
    var w = self['innerWidth'] || (document.documentElement['clientWidth'] || document.body['clientWidth']);

    return { height: h, width: w };

}

function forEach(arr, fn, ctx) {
    var c = ctx || window;
    for (var i = 0, len = arr.length; i < len; ++i) {
        fn.apply(c, [arr[i], i]);
    }
}

function fd() {
    var h = getDem().height;
    var count = Math.floor((h - 150) / 152);
    var left = h - 150 - count * 152;
    if (left > 30) count++;
    return count;
}



function AlbumPhoto(val, group) {
    this.desc = val.PhotoDescription;
    this.url = val.ImageUrl;
    this.name = val.PhotoName;
    this.title = val.PhotoTitle;
    this.group = group;
    this.photoDomElement = get('foto');
    this.photoDescDomElement = get('foto-desc');
    this.photoDomElement.onload = this.photoDomElement.onreadystatechange = this.PhotoLoaded;
}

function AlbumGroup(v, album) {
    /* Name:'',Album:{}*/
    this.name = v.GroupName;
    this.title = v.GroupTitle;
    this.path = v.GroupFolderPath;
    this.thumbPath = v.GroupThumbPath;
    this.album = album;
    this.currentPhotoIndex = 0;
    this.photos = [];
    this.count = v.Photos ? v.Photos.length : -1;
    this.domElement;
    this.titleDomElement = get('group-title');
    this.renderThumb = true;
    if (this.count != -1) {
        this.Init(v.Photos);
    }
}

function Album(grps) {
    this.groups = [];
    this.gContainer = get('album-group');
    this.pContainer = get('album-content');
    var dem = getDem();
    var h = dem.height;
    var w = dem.width;
    this.currentGroupIndex = 0;
    this.initThumbCount = fd();
    this.leftThumbGroup = [];
    this.leftCounter = 1;
    this.Init(grps);
    this.Render();
    this.Open(0);

    this.pContainer.style.width = (w - 267 - 2 - 17) + 'px';
    this.gContainer.style.height = (h - 150 - 2) + 'px'
    this.pContainer.style.minHeight = (h - 150 - 2) + 'px';



}



copy(AlbumPhoto.prototype, {
    Init: function () {
    },
    PhotoLoaded: function () {

        if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
            var o = get('photo-masker');
            if (o) {
                if (o.style.display == 'none') return;
                o.style.display = 'none';
            }
        }
    },
    Show: function () {
        this.ShowMasker();
        this.photoDomElement.src = '../ClientBin/Album/' + this.group.path + '/' + this.url + '.jpg';
        this.photoDescDomElement.innerHTML = this.desc;

    },
    ShowMasker: function () {
        //debugger;
        if (get('photo-masker')) {
            get('photo-masker').style.height = this.photoDomElement.offsetHeight + 'px';
            get('photo-masker').style.display = 'block';
            return;
        }
        var p = this.photoDomElement.parentElement;
        var w = p.offsetWidth;
        var h = p.offsetHeight;
        var m = document.createElement('div');
        m.style.width = w + 'px';
        m.style.height = h + 'px';
        m.id = 'photo-masker';
        m.style.position = 'absolute';
        var t = 470;
        if (this.photoDomElement.offsetHeight > 50) {
            t = this.photoDomElement.offsetHeight;
        }
        m.style.top = 0;
        m.style.left = 0; //p.offsetLeft + 'px';
        m.style.backgroundColor = '#e0e0e0';
        m.style.opacity = '0.5';
        m.style.zIndex = 998;
        m.style.filter = 'alpha(opacity=50)';
        var img = document.createElement('div');
        img.style.backgroundImage = "url(Style/Image/loading.gif)";
        img.style.width = img.style.height = '32px';
        img.style.opacity = 1;
        img.style.filter = 'alpha(opacity=100)';
        img.style.zIndex = 999;
        m.appendChild(img);
        img.style.position = 'absolute';
        img.style.left = (w - 32) / 2 + 'px';
        img.style.top = (h - 32) / 2 + 'px';
        p.appendChild(m);

    }
});

copy(AlbumGroup.prototype, {
    AddPhoto: function (photo) {
        this.photos.push(photo);
    },
    Init: function (p) {
        forEach(p, function (val, idx1) {
            this.AddPhoto(new AlbumPhoto(val, this));
        }, this);
    },
    InitPhotos: function (photos) {
        forEach(photos, function (val, idx1) {
            this.AddPhoto(new AlbumPhoto(val, this));
        }, this);
        this.count = photos.length;
    },
    GetCurrentPhoto: function () {
        return this.photos[this.currentPhotoIndex];
    },
    AddCurrentIndex: function () {
        if (this.currentPhotoIndex == this.count - 1) return this.count - 1;
        this.currentPhotoIndex += 1;
    },
    MinusCurrentIndex: function () {
        this.currentPhotoIndex -= 1;
    },
    Open: function () {
        this.titleDomElement.innerHTML = this.title;
        this.domElement.style.display = 'none';
        this.GetCurrentPhoto().Show();
    },
    Close: function () {
        this.domElement.style.display = 'block';
        this.currentPhotoIndex = 0;
    },
    Next: function () {

        this.AddCurrentIndex();
        this.GetCurrentPhoto().Show();
    },
    Prev: function () {
        this.MinusCurrentIndex();
        this.GetCurrentPhoto().Show();
    },
    MouseOver: function (e) {
        var img = e.target;
        var width = parseInt(img.offsetWidth);
        var pos = e.offsetX;
        if (pos > width / 2) {
            if (this.count - 1 == this.currentPhotoIndex) {
                e.target.style.cursor = "default";
            }
            else {
                e.target.style.cursor = 'url(Style/Image/next.cur),auto';
            }
        }
        else {
            if (this.currentPhotoIndex == 0) {
                e.target.style.cursor = "default";
            }
            else {
                e.target.style.cursor = 'url(Style/Image/pre.cur),auto';
            }
        }
    },
    RenderThumb: function () {
        if (this.renderThumb) return;
        this.domElement.childNodes[1].firstChild.src = '../ClientBin/Album/' + this.path + '/' + this.thumbPath + '.jpg';
        this.renderThumb = true;
    },
    IsThumbRender: function () {
        return this.renderThumb;
    },
    StopRenderThumb: function () {
        this.renderThumb = false;
    },
    Render: function (ul, idx) {
        var li = document.createElement('li');
        var title = document.createElement('div');
        var thumb = document.createElement('div');
        title.className = 'title';
        var link = document.createElement("a");
        link.className = idx;
        link.href = "javascript:void(0)";
        link.innerHTML = this.title;
        title.appendChild(link);
        thumb.className = 'thumb';
        var img = document.createElement('img');
        img.alt = '';
        img.className = idx;
        img.style.cursor = 'pointer';
        if (this.renderThumb == true) {
            img.src = '../ClientBin/Album/' + this.path + '/' + this.thumbPath + '.jpg';
        }
        thumb.appendChild(img);
        li.appendChild(title);
        li.appendChild(thumb);
        ul.appendChild(li);
        this.domElement = li;
    }
});

copy(Album.prototype, {
    Init: function (grps) {
        forEach(grps,
            function (v, idx) {
                this.groups.push(new AlbumGroup(v, this));
            }, this);
        this.gContainer.onscroll = this.Proxy(this.OnScrollGroup);
    },
    OnScrollGroup: function (e) {
        var evt = this.Fix(e);
        var top = evt.target.scrollTop;

        var d = Math.ceil(top / 152);
        if (this.leftThumbGroup.length <= d) {
            this.gContainer.onscroll = null;
            forEach(this.leftThumbGroup, function (v) {
                v.RenderThumb();
            }, this);
            this.leftThumbGroup = [];
        }

        if (d > 0) {
            var g = this.leftThumbGroup[d - 1];
            if (g && !g.IsThumbRender())
                g.RenderThumb();
        }

    },
    Render: function () {
        var ul = document.createElement('ul');
        forEach(this.groups, function (v, idx) {
            if (this.initThumbCount < idx) {
                v.StopRenderThumb();
                this.leftThumbGroup.push(v);
            }
            v.Render(ul, idx);
        }, this);
        this.gContainer.appendChild(ul);
        get("foto").onmousemove = this.Proxy(this.MouseOver);
        get("foto").onmouseover = this.Proxy(this.MouseOver);
        get("img-container").onclick = this.Proxy(this.BrowsePhotos);

        ul.onclick = this.Proxy(this.ChangeGroup);
    },
    MouseOver: function (e) {
        var evt = this.Fix(e);
        this.GetCurrentGroup().MouseOver(evt);
    },
    Open: function (idx) {
        this.groups[idx].Open();
    },
    Proxy: function (fn) {
        var that = this;
        return function () {
            return fn.apply(that, arguments);
        }
    },
    ChangeGroup: function (e) {
        var evt = this.Fix(e);
        var t = evt.target.tagName.toLowerCase();
        if (t == 'a' || t == 'img') {
            var idx = /\d*/.exec(evt.target.className);
            this.GetCurrentGroup().Close();
            this.currentGroupIndex = idx;
            this.GetCurrentGroup().Open();
        }
    },
    GetCurrentGroup: function () {
        var g = this.groups[this.currentGroupIndex];
        if (g.count == -1) {
            var x = new XMLHttpRequest();
            var url;
            if (window.location.href.indexOf('?') >= 0) {
                url = window.location.href + '&ajax=' + g.name;
            }
            else {
                url = window.location.href + '?ajax=' + g.name;
            }
            x.open('get', url, false);
            x.setRequestHeader('ajax', g.name);
            x.send();
            var photos = eval(x.responseText);
            g.InitPhotos(photos);
            return g;
        }
        else {
            return g;
        }
    },
    BrowsePhotos: function (e) {
        var evt = this.Fix(e);
        if (evt.target.style.cursor.indexOf('default') >= 0) return;
        if (evt.target.style.cursor.indexOf('pre') >= 0) {
            this.GetCurrentGroup().Prev();
        }
        else if (evt.target.style.cursor.indexOf('next') >= 0) {
            this.GetCurrentGroup().Next();
        }

    },
    Fix: function (e) {
        var evt = e || event;
        evt.target = evt.srcElement || evt.target;
        evt.relatedTarget = evt.fromElement || evt.toElement || evt.relatedTarget;
        return evt;
    }
});

window.onresize = function () {
    var d = getDem();
    var gContainer = get('album-group');
    var pContainer = get('album-content');
    var h = (d.height - 150 - 2) + 'px';
    gContainer.style.minHeight = h;
    pContainer.style.minHeight = h;
    pContainer.style.width = (d.width - 267 - 2 - 17) + 'px';
    setTimeout(function () {
        pContainer.style.width = (d.width - 267 - 2) + 'px';
    }, 10);
}

function resizeContent() {
    var o = get('album-content');
    o.style.width = parseInt(o.style.width) + 'px'; ;

}
var DOMContentLoaded;
if (document.addEventListener) {
    DOMContentLoaded = function () {
        setInterval(refreshTimer, 1000);
        refreshTimer();
    }
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
}
else {
    DOMContentLoaded = function () {
        if (document.readyState == 'complete') {
            setInterval(refreshTimer, 1000);
            refreshTimer();
        }
    }
    document.attachEvent("onreadystatechange", DOMContentLoaded);
}

window.onload = function () {
    adjust();
    loadBannerImg();
}

function loadBannerImg() {
    var y = get('years');
    var j = 0;

    for (var i = 1997; i < 2011; ++i) {
        var img = y.childNodes[j];
        if (img.nodeType == 1) {
            img.alt = i;
            img.src = 'Style/Image/Banner/y-' + i + '.png';
            ++j;
        }
        else {
            ++j;
            --i;
        }
    }

    get('logo').src = 'Style/Image/Banner/tattoo-logo.png';
    get('sign').src = 'Style/Image/Banner/T-House.png';
    get('blog').src = 'Style/Image/05.Nav_Blog.png';
}

function adjust() {
    var o = get('album-content');
    o.style.width = parseInt(o.style.width) + 'px';


}

function refreshTimer() {
    var timer = get('timer');
    var msg = "{0}<span>天</span>{1}<span>时</span>{2}<span>分</span>{3}<span>秒</span>";
    var orig = Date.parse("2010/07/27");
    var d = new Date().getTime();
    var diff = d - orig;
    var day = Math.floor(diff / (1000 * 60 * 60 * 24));
    var hour = Math.floor((diff - day * (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minute = Math.floor((diff - day * (1000 * 60 * 60 * 24) - hour * (1000 * 60 * 60)) / (1000 * 60));
    var sec = Math.floor((diff - day * (1000 * 60 * 60 * 24) - hour * (1000 * 60 * 60) - minute * 1000 * 60) / (1000));
    if (hour < 10) hour = '0' + hour;
    if (minute < 10) minute = '0' + minute;
    if (sec < 10) sec = '0' + sec;
    msg = msg.replace("{0}", day).replace("{1}", hour).replace("{2}", minute).replace("{3}", sec);

    timer.innerHTML = msg;
}