Prototype 프레임워크 학습

document.observe("dom:loaded", function() {
  
  Object.extend(String.prototype , {
  	bLength : function () {
	    if (!this.toString()) {
	        return 0;
	    }
	    var b = this.toString().match(/[^\x00-\xff]/g);
	    return this.toString().length + (b ? b.length : 0);
	} , 
  	leftB : function(lens){
		var s = this.toString().replace(/\*/g, ' ').replace(/[^\x00-\xff]/g, '**');
		var str = this.toString().slice(0, s.slice(0, lens).replace(/\*\*/g, ' ').replace(/\*/g, '').length);
		if (str.bLength() > lens && lens > 0) {
			str = str.slice(0, str.length - 1);
		}
		return str;
	}
  });
  
  var ajaxUrl = {
  	common : {
  		listurl : '/home/game/ajaxGameListbycatNew',
  		rankurl : '/home/game/ajaxCatRankNew',
  		newrankurl : '/home/game/ajaxCatRankUninstall'
  	},
  	mobile : {
  		listurl : '/mobile/Main/ajaxMobileListNew',
  		rankurl : '/mobile/Main/ajaxMobileRankNew'
  	}
  };
  
  var Tpl = {
  	listTpl : '<li><a href="#{appUrl}" class="ksimg_href"><img width="78" height="78" alt="#{appName}" title="#{appName}" class="ks_img" src="#{appLogo}"></a><span class="xxspan ks_title"><a href="#{appUrl}">#{appShortName}</a></span><span class="xxspan ks_score starbar"><a href="javascript:void(0)"><span data-now="#{appRate}"></span></a></span><span class="xxspan scorefs">#{appRate} </span><span class="xxspan ks_number">#{totalUser} </span></li>',
  	mobileListTpl : '<li class="anap_li"><a title="#{fullName}" target="_blank" href="#{detailUrl}"><img width="60" height="60" alt="#{name}" src="#{logo}" class="ks_img"></a><span class="mb_span ks_title"><a class="ks_title" title="#{fullName}" target="_blank" href="#{detailUrl}">#{shortName}</a></span><span class="mb_span ks_score">#{weekNum} </span><span class="mb_span ks_number"><a target="_blank" class="ksdl" title=" " href="#{downloadUrl}"></a></span></li>'
  };
  
  var Tab = Class.create({
  	initialize : function(dom) {
  		// common mobile
  		Element.extend(this.dom);
  		this.dom = dom;
  		this.mobile = dom.getAttribute('data-type');
  		this.type = this.mobile ? this.mobile : dom.id;
  		this.listurl = this.mobile ? ajaxUrl.mobile.listurl : ajaxUrl.common.listurl;
  		this.rankurl = this.mobile ? ajaxUrl.mobile.rankurl : ajaxUrl.common.rankurl;
  		this.pageSize = this.mobile ? 12 : 8;
  		this.page = 1;
  	},
  	getParams : function(type) {
  		if(type === 'list') {
  			return {
  				type : this.type,
  				page : this.page,
  				pageSize : this.pageSize
  			};
  		} else if(type === 'rank') {
  			return {
  				type : this.type
  			};
  		}
  	},
  	loadAll : function() {
  		this.page = 1;
  		this.loadList();
  		this.loadRank();
  	},
  	loadListSuccess : function(params , xmlHttp) {
  		var data = xmlHttp.responseText.evalJSON();
  		var succ = data.errorCode == 0 || data.error_code == 0;
  		if(succ) {
  			Element.extend(this.dom);
  			this.dom.store('page=' + params.page , data.data);
  			this.showGameList(params , data.data);
  		}
  	},
  	loadList : function() {
  		Element.extend(this.dom);
  		var params = this.getParams('list');
  		var data = this.dom.retrieve('page=' + params.page);
  		if(data) {
  			this.showGameList(params , data);
  		} else {
  			new Ajax.Request(this.listurl , {
				method : 'get',
				parameters : params,
				onSuccess : this.loadListSuccess.bind(this , params)
			});
  		}
  	},
  	showStar : function(list) {
  		nodes.scrollcontent.select('[data-now]').each(function(item) {
  			var pixel = parseFloat(item.getAttribute("data-now") || '5.0').round() * 14;
  			new Effect.Morph(item, {
			  style: 'width:' + pixel + 'px', // CSS Properties
			  duration: 0.5 // Core Effect properties
			});
  		});
  	},
  	showGameList : function(params , data) {
  		var isMobile = this.mobile;
  		nodes.ks_nav.select('dd[id]').each(function(dom) {
  			dom.removeClassName('on');
  		});
  		this.dom.addClassName('on');
  		if(params.page == 1) {
  			nodes.goleft.addClassName('ks_leftnone');
  		} else {
  			nodes.goleft.removeClassName('ks_leftnone');
  		}
  		if(data.last) {
  			nodes.goright.addClassName('ks_rightnone');
  		} else {
  			nodes.goright.removeClassName('ks_rightnone');
  		}
  		if(!data.moreUrl) {
  			nodes.moreLink.hide();
  		} else {
  			nodes.moreLink.show().href = data.moreUrl;
  		}
  		var template = new Template(isMobile ? Tpl.mobileListTpl : Tpl.listTpl);
  		var htmlList = [];
  		htmlList.push('<ul>');
  		(data.data || data.list).each(function(item) {
  			if(!isMobile && !item.appShortName) {
  				var len = item.appName.bLength();
  				if(len > 8) {
  					item.appShortName = item.appName.leftB(8) + '...';
  				} else {
  					item.appShortName = item.appName;
  				}
  			}
  			if(isMobile && !item.shortName) {
  				var len = item.name.bLength();
  				if(len > 10) {
  					item.shortName = item.name.leftB(10);
  				} else {
  					item.shortName = item.name;
  				}
  			}
  			htmlList.push(template.evaluate(item));
  		});
  		htmlList.push('</ul>');
  		nodes.scrollcontent.update(htmlList.join(''));
  		nodes.scroll.hide();
  		new Effect.Appear(nodes.scroll , {
  			afterFinish : this.showStar.bind(this , data.list)
  		});
  	},
  	loadRank : function() {
  		
  	},
  	goleft : function() {
  		var page = this.page;
  		if(page == 1) {
  			return;
  		}
  		this.page --;
  		this.loadList();
  	},
  	goright: function() {
  		var none = nodes.goright.hasClassName('ks_rightnone');
  		if(none) {
  			return;
  		}
  		this.page ++;
  		this.loadList();
  	}
  });
  
  Tab.getCurrentTab = function() {
  	return Tab.current;
  };
  
  var nodes = (function() {
  	var list = 'ks_nav,all,operate,tactics,rollplay,chess,puz,singlegame,m_android,m_apple,goleft,scroll,scrollcontent,goright,moreLink,ks_right,gameTile,gametTitleOff,gametTitleOn,ks_list';
  	var result = {};
  	list.split(',').each(function(nodeKey) {
  		if($(nodeKey)) {
  			result[nodeKey] = $(nodeKey);
  			Element.extend(result[nodeKey]);
  		}
  	});
  	return result;
  })();
  
  
  
  nodes.ks_nav.on('click' , function(e) {
  	var target = e.element();
  	if(target.id) {
  		Element.extend(target);
  		var tab = target.retrieve('tab');
  		if(!tab) {
  			tab = new Tab(target);
  			target.store('tab' , tab);
  		}
  		tab.loadAll();
  		Tab.current = tab;
  	}
  });
  
  var HoverClass = {
  	goleft : 'ks_lefthover',
  	goright: 'ks_righthover'
  };
  
  [nodes.goleft,nodes.goright].each(function(item) {
  	item.on('mouseover' , function(e) {
  			var target = e.element();
  			target.addClassName(HoverClass[target.id]);
  		});
  	item.on('mouseout' , function(e) {
  			var target = e.element();
  			target.removeClassName(HoverClass[target.id]);
  		});
  	item.on('click' , function(e) {
  		var target = e.element();
  		var tab = Tab.getCurrentTab();
  		tab[target.id]();
  	});
  });
  
});