First attempt to do awesome collectionview

gistfile1.txt

Mango.IssuesCollectionView = SC.View.extend({

	reuseQueue: [],
	backView: null,

	content: null,
	
	itemViewClass: SC.View,

	topRowIndex: null,
	bottomRowIndex: null,
	
	refresh: function(){
		var content = this.get("content"),
		rowHeight = 55,
		addedViews = [],
		len, rowView;


		len = content ? content.get("length") : 0;
		this.get("backView").css("height", rowHeight*len);

		if(len){
			var top = this.get("element").scrollTop;
			var height = this.get("element").offsetHeight;

			

			var idx = Math.floor(top/rowHeight);
			var diff = Math.ceil((top+height)/rowHeight);

			for (idx; idx < diff; idx++) {

				if(idx < content.get("length") && idx >= this.get("bottomRowIndex") || idx <= this.get("topRowIndex")){

					item = content.objectAt(idx);
					
					var element;

					if(this.get("reuseQueue").length){
						element = this.get("reuseQueue").popObject();
					} else {
						view = this.createChildView(this.get("itemViewClass"), {
							content: item,
							contentIndex: idx
						});
						view.createElement();
						addedViews.push(view);
						SC.$(view.get("element")).addClass("issues-collection-row-reuseable");
						SC.$(view.get("element")).css("z-index", "8");
						SC.$(view.get("element")).css("position", "absolute");

						element = view.get("element");
					}
					SC.$(element).appendTo(SC.$(this.get("element")));						
					SC.$(element).css("top", rowHeight*idx);
					
					
					SC.View.views[SC.$(element).attr("id")].set("content", item);
					
				}
			}


			this.set("topRowIndex", Math.floor(top/rowHeight) ? Math.floor(top/rowHeight)-1 : 0); 
			this.set("bottomRowIndex", diff); 
			
			
		}

		this.get("childViews").replace(0, this.get("childViews").get("length"), addedViews);
	},

	pushReuseableRowsToQueue: function(){
		var rows = SC.$(this.get("element")).find(".issues-collection-row-reuseable");

		var top = this.get("element").scrollTop;
		var height = this.get("element").offsetHeight;

		var idx;
		for(idx = 0; idx<rows.length; idx++){
			if(!this.isRowInsideViewableArea(rows[idx])){
				this.get("reuseQueue").pushObject(rows[idx]);
				SC.$(rows[idx]).detach();
			}
		}
	},

	isRowInsideViewableArea: function(rowElement){
		var elementTop = rowElement.offsetTop;
		var elementHeight = rowElement.offsetHeight;

		var areaTop = this.get("element").scrollTop;
		var areaHeight = this.get("element").offsetHeight;

		var aboveViewableArea = elementTop+elementHeight < areaTop;
		var belowViewableArea = elementTop > areaTop+areaHeight;		

		return  !aboveViewableArea && !belowViewableArea;
	},

	didInsertElement: function(){
		var that = this;
		this.get("element").onscroll = function(){
			that.pushReuseableRowsToQueue();
			that.refresh();
		};

		this.set("backView",SC.$("<div id=\""+SC.$(this.get("element")).attr("id")+"-back\" style=\"position: absolute; z-index: 4; width: 100%;\"/>"));
		SC.$(this.get("backView")).appendTo(this.get("element"));

		this.refresh();
	}
});