/// <reference path="mootools.js" />
/*
仿谷歌的图片自动加载。
效果描述：根据屏幕宽度自动决定一页的图片大小，页面向下滚动时自动加载余下的图片
*/
window.addEvent("domready", function () {
$$(".PhotoAlbumContainer").each(function (item) {
var id = ("text").toInt();
item.set("html", "");
var photo = new UI.PhotoList(item, {
url: "/Ajax/Photo.ashx?ac=list&AlbumID=" + id ,
width : 210,
height : 310,
auto : true ,
show : function(item){
return new Element("div",{
"class" : "item" ,
"html" : "<a href=\"javascript:Show(" + item.ID + ");\"><img src=\"" + item.PreShow + "\" /></a>"
});
}
});
});
});
if (!window["UI"]) window["UI"] = new Object();
(function (ns) {
ns.PhotoList = new Class({
Implements: [Events, Options],
element : null ,    // 容器接口
data : {
recordCount : 0 ,    // 图片总数
maxPage : 0 ,    // 最大页数
page : new Array() ,  // 已经加载的页码
body : new Array() ,    // 图片容器
request : null ,
timer : null ,
screenHeight : 0
} ,
options : {
url : "" ,  // 读取照片列表的接口
show : function(item){ return new Element("div",{"html" : "<img src=\"" + item.PreShow + "\" />" , "class" : "item"});  } ,  // 读取单张图片显示
pageSize : 0 ,  // 单页显示的数量。 默认为根据屏幕自动计算
width : 0,  // 单个元素的宽度和高度。 默认为自适应
height : 0 ,
auto : false    //是否自动加载全部的图片
} ,
initialize : function(el,options){
var t = this;
t.element = $(el);
t.setOptions(options);
if(!t.options.auto) t.data.timer = setInterval(t.loadScroll.bindWithEvent(t),500);
new Request({
url : t.options.url,
data : { ac : "recordCount" },
onSuccess : function(response){
dCount = Int();
t.data.maxPage = dCount % t.options.pageSize == 0 ? dCount / t.options.pageSize : Math.floor(dCount / t.options.pageSize) + 1;
for(var index = 1; index <= t.data.maxPage; index++){
var div = new Element("DIV",{
"html" : ["<div class=\"title\">第" , index , "页  总共" , t.data.maxPage ,"页</div>"].join(""),
"class" : "page",
"id" : ["page_",index].join("")
}).inject(t.element)
;
t.data.body[index] = new Element("DIV",{
"class" : "body"
});
t.data.body[index].inject(div);
var title = Element(".title");
title.fade("hide");
if(t.options.auto) t.loadPage(1);
}                 
}
}).send();
} ,
getPageSize : function(){
var t = this;
减去小舞的所有衣服
if(t.options.pageSize != 0) return;
if(t.options.width == 0 || t.options.height == 0){ t.options.pageSize = 20; return; }
var width = Size().x;
var height = t.data.screenHeight = window.screen.availHeight - 150;
t.options.pageSize = Math.floor(width / t.options.width) * und(height / t.options.height);
} ,
loadPage : function(pageIndex){
var t = this;
if(t.ains(pageIndex)) return;
t.data.body[pageIndex].addClass("loading")
var title = t.data.body[pageIndex].getPrevious("div.title");
title.fade(t.options.auto ? "hide" : "in");
quest = new Request({
url : t.options.url,
data : { pageIndex : pageIndex , pageSize : t.options.pageSize },
onSuccess : function(response){
var list = JSON.decode(response);
list.each(function(item,index){
var img = t.options.show.run([item,t.element]); 
if(t.options.auto){
img.inject(t.data.body[pageIndex]);
}else{   
(function(){ img.inject(t.data.body[pageIndex]); img.fade("in"); }).delay(index * 100);
}
});
t.data.body[pageIndex].removeClass("loading");
if(t.options.auto && pageIndex < t.data.maxPage){
t.loadPage(pageIndex + 1);
}
}
});
quest.send();
t.data.page.push(pageIndex);
} ,
loadScroll : function(){
var t = this;
var isLoad = true;
if(t.data.maxPage == 0) return;
for(var index = 1; index <= t.data.maxPage; index++){
if(!t.ains(index)){ isLoad = false; break; }
}
if(isLoad){ alert(t.data.page.join(",")); $clear(t.data.timer); return; }
var list = Elements("div.page");
var isBreak = false;
list.each(function(item){
if(isBreak) return;
var position = Position();
var top = Math.max(document.documentElement.scrollTop , document.body.scrollTop
);
var bottom = top + t.data.screenHeight;
if(position.y > top && position.x < bottom){
var page = ("id").replace( /^page_(\d+)$/,"$1");
t.loadPage(page);                   
isBreak = true;
}
});
}
});
})(UI);