/*
* @ components for gender distribution
* @ Author: Guo Chen
*/

(function(){
	function Gender(setting){
		this.opt=$.extend({
			data:[{type:'男',value:187,color:'#FF3F3F'},{type:'女',value:587,color:'#EDA637'}],
			con:null,//dom
			icon:["images/man.png","images/woman.png",'images/sex.png'],
			color:'#1786C6',
			label:{
				color:'#8B8B8B',
				fontSize:'20px'
			},
			numAnimateTime:2250
		},setting);
		this.init.apply(this,arguments);
	}
	Gender.prototype={
		init:function(){
			this.render();
			this.numIncrease(this.opt.con.find('[data-population]'),'population');
			this.numIncrease(this.opt.con.find('[data-percent]'),'percent');
			this.leverageRotate();
		},
		render:function(){
			this.opt.con.html(this.getLabelHtml()+this.getLeverageHtml());
			//render leverage left
			var leverageLeft="";
			for(var i=0;i<this.getIconNum(0);i++){
				leverageLeft+="<img src='"+this.opt.icon[0]+"'/>";
			}
			//render leverage right
			var leverageRight="";
			for(var i=0;i<this.getIconNum(1);i++){
				leverageRight+="<img src='"+this.opt.icon[1]+"'/>";
			}
			this.opt.con.find("[data-left]").html(leverageLeft);
			this.opt.con.find("[data-right]").html(leverageRight);
		},
		getLabelHtml:function(){
			var html="";
			var li="";
			var textAlign="";
			var halfWidth=this.opt.con.width()/2;
			for(var i=0 in this.opt.data){
				textAlign=(i!=0)?'right':'left';
				li="<li style='text-align:"+textAlign+";font-size:14px;font-weight:bold;color:"+this.opt.data[i].color+";display:inline-block;width:"+halfWidth+"px;'>"
						+"<p data-population='"+i+"'>0人</p>"
						+"<p data-percent='"+i+"'>0.00%</p>"
					+"</li>";
				html+=li;
			}
			html="<ul style='margin-bottom:40px;'>"+html+"</ul>"
			return html;
		},
		getLeverageHtml:function(){
			var halfWidth=this.opt.con.width()/2;
			var html="<ul style='border-bottom:15px solid "+this.opt.color+";' data-leverage=''>"
						+"<li style='width:"+halfWidth+"px;display:inline-block;text-align:left;' data-left='0'></li>"
						+"<li style='width:"+halfWidth+"px;display:inline-block;text-align:right;' data-right='1'></li>"
					  +"</ul>"
					  +"<div style='text-align:center;'><img src='"+this.opt.icon[2]+"'/></div>";
			return html;
		},
		getIconNum:function(t){
			var total=this.opt.data[0].value+this.opt.data[1].value;
			var maxIcon=Math.floor(this.opt.con.width()/2/24);
			return Math.round(this.opt.data[t].value*maxIcon/total);
		},
		getPercent:function(t){
			var total=this.opt.data[0].value+this.opt.data[1].value;
			return Math.round(this.opt.data[t].value/total*10000)/100;
		},
		numIncrease:function(collection,key){
			var self=this;
			var num;
			var unit;
			collection.each(function(){
				num=((key=="percent") && (self.getPercent($(this).data(key)))) || ((key=="population") && (self.opt.data[$(this).data(key)].value));
				unit=((key=="percent") && ("%")) || ((key=="population") && ("人"));
				$(this).animateNumber({
					number:num,
				    numberStep: function(now, tween) {
				       	var floored_number =((key=="percent")&&(Math.floor(now*100)/100))|| Math.floor(now);
				            target = $(tween.elem);
				    	target.text(floored_number+""+unit);
				    }
				},self.opt.numAnimateTime);
			});
		},
		leverageRotate:function(){
			var condition=this.opt.data[0].value-this.opt.data[1].value;
			var css3=((condition>0) && ('leverage_rotate_anticlockwise')) || ((condition<0) && ('leverage_rotate_clockwise')) || '';
			this.opt.con.find("[data-leverage]").addClass(css3);
		}
	}
	Gender.prototype.constructor=Gender;
	window,jClass_Gender=Gender;
})();