UI.barDrag = function(id, _opt) {
	this.dragEl = UI.$(id),
	this.opt = {
		dragId : id,
		moveId : id,	// 움직일 대상. default 는 자기 자신
		scope : [0,300],
		defaultPos : 0,
		initcall : null, 
		callback : null
	}
	Object.extend(this.opt, _opt);
	this.init();
}
UI.barDrag.prototype = {
	init : function() {
		if(!this.dragEl) return false;
		this.moveEl = UI.$(this.opt.moveId);
		UI.addEvent(this.dragEl, "mousedown", this.set.bind(this));		
		UI.addEvent(UI.$('yearBar'), "click", this.setClick.bind(this));
	},
	
	render : function() {
		this.cx = this.opt.defaultPos;
		this.move();
		this.callback();
	},

	setClick : function(evt) {
		this.base_x = parseInt(UI.getStyle(this.moveEl,"left"), 10);
		this.org_x = evt.clientX;
		this.drag(evt);
	},
	set: function(evt) {
		var el = evt.target || evt.srcElement;
			this.base_x = parseInt(UI.getStyle(this.moveEl,"left"), 10);
			this.org_x = evt.clientX;
			this.onDrag = true;
			UI.addEvent(document, "mousemove", this.drag.bind(this));	// 드래그할 엘리먼트가 너무 작아서 마우스가 엘리먼트 벗어나면 이벤트 잃어버려서 document에 이벤트 설정
			UI.addEvent(document, "mouseup", this.release.bind(this));	// 드래그할 엘리먼트가 너무 작아서 마우스가 엘리먼트 벗어나면 이벤트 잃어버려서 document에 이벤트 설정
			UI.stopEvent(evt);  
	
	},

	drag :function(evt) {
			if(this.onDrag) {
				var x = this.base_x + evt.clientX - this.org_x;
				this.cx = (x<=this.opt.scope[0])? this.opt.scope[0] : ((x>=this.opt.scope[1])? this.opt.scope[1] : x);
				this.move();
				return false;
			}
			UI.stopEvent(evt);  
	},
	move : function(pos) {		
		if(pos) {
			this.cx = pos;
			this.base_x = parseInt(UI.getStyle(this.moveEl,"left"), 10);
		}
		if( this.cx ){
            this.moveEl.style.left = this.cx+'px';
        }
	},
	release : function(evt) {
		UI.delEvent(document, "mousemove", this.drag.bind(this));
		UI.delEvent(document, "mouseup", this.release.bind(this));	
		UI.stopEvent(evt);  
		this.onDrag = false;		
		this.callback();
	},

	callback : function() {
		if(this.opt.callback) {
			if(this.cx != this.base_x) {
				eval(this.opt.callback + '('+this.cx+', '+this.base_x+');');
			}
		}
	}
}


/*
// 리스트형 개수제한 좌우이동
UI.ListDisplay = function( _listId, _opt ){
    this.listId = _listId;
    this.opt = {
        listId : null,
        listEl : "LI",
        btnPrevId : null,
        btnNextId : null,
        amount : 4,
        defaultIndex : 0,
        loop : false
    }
    Object.extend( this.opt, _opt );
    this.init();
}
UI.ListDisplay.prototype = {
    init : function(){
        this.index = this.opt.defaultIndex;
        this.objList = UI.$(this.listId);
        this.objListEl = this.objList.getElementsByTagName( this.opt.listEl );
        this.objCnt = this.objListEl.length;
        this.objPrev = UI.$(this.opt.btnPrevId);
        this.objNext = UI.$(this.opt.btnNextId);
        this.lastPage = Math.ceil( this.objCnt /this.opt.amount )-1;
        if( this.objCnt == this.lastIndex ) this.lastIndex - this.opt.amount;
        if( this.objPrev ){ UI.addEvent( this.objPrev , "click", this.prev.bind(this) ); }
        if( this.objNext ){ UI.addEvent( this.objNext , "click", this.next.bind(this) ); }
        this.reset();
    },
    reset : function(){
        var start = (this.index*this.opt.amount);
        var end = (this.index*this.opt.amount) + this.opt.amount;

        for ( var i=0; i<this.objCnt ; i++ ){
            if( i>=start && i<end ){this.objListEl[i].style.display = "block";} 
            else { this.objListEl[i].style.display = "none"; }
        }
        //this.check();
    },
    prev : function(){
        this.index--;
        if( this.index < 0 ){
            this.index = (this.opt.loop==true)?this.lastPage:0;
        }
        this.reset();
    },
    next : function(){
        this.index++;//=this.opt.amount;
        if( this.index >= this.lastPage ){
            this.index = (this.opt.loop==true)?0:this.lastPage;
        }
        this.reset();
    }
}
*/

// 달력
UI.Calendar = function( _conId, _opt ){
	this.monthName = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	this.con = UI.$(_conId );
	this.date = {
		year : null,
		month : null,
		day : null
	}
	this.opt = {
		statusId : null, // 달력해당일 뷰
		weekDisp : false,// 해당주 하이라이트
		nearDayDisp : false // 앞뒤 
	};
	Object.extend( this.opt, _opt );
	this.status = UI.$(this.opt.statusId);
	this.init();
};
UI.Calendar.prototype = {
	init : function(){
		var tempDate = new Date();
		this.today = {
			year : tempDate.getFullYear(),
			month : tempDate.getMonth()+1,
			day : tempDate.getDate()
		};
		Object.extend( this.date, this.today );
	
		this.monthCnt = [31,0,31,30,31,30,31,31,30,31,30,31];
		this.template = {
			table : '<table>',
			head : '<span>$TEXT</span>',
			headText : ["일","월","화","수","목","금","토"],
			status : 'YYYY.MM.DD',
			day : '<a href="javascript:;">$TEXT</a>',
			tr : '<tr>'
		};		
		this.callback = function( year, month, day){ alert( "callback : " + year + "/"+month+"/"+day ); };
		
	},
	setDate : function( year, month, day ){this.date = {year:year,month:month,day:day};Object.extend( this.today, this.date );},
	setYear : function( val ){this.date.year = val;Object.extend( this.today, this.date );},
	setMonth : function( val ){this.date.month = val;Object.extend( this.today, this.date );},
	setDay : function( val ){this.date.day = val;Object.extend( this.today, this.date );},
	setDateObj : function( objDate ){
		this.date = {
			year : objDate.getFullYear(),
			month : objDate.getMonth()+1,
			day : objDate.getDate()
		};
	},
	setPrevMonth : function(){ this.setDateObj( new Date( this.date.year, this.date.month-2, this.date.day ) );this.render(); },
	setNextMonth : function(){ this.setDateObj( new Date( this.date.year, this.date.month, this.date.day ) );this.render(); },
	setPrevYear : function(){ this.setDateObj( new Date( this.date.year-1, this.date.month-1, this.date.day ) );this.render(); },
	setNextYear : function(){ this.setDateObj( new Date( this.date.year+1, this.date.month-1, this.date.day ) );this.render(); },
	setTemplate : function( val ){Object.extend( this.template, val );},
	getWeek : function( year, month, day ){
	    var determinedate = new Date( year, month-1, day);
		determinedate.setFullYear(determinedate.getFullYear(), determinedate.getMonth(), determinedate.getDate());
		var D = determinedate.getDay();
		//if(D == 0) D = 7;
		determinedate.setDate(determinedate.getDate() + (4 - D));
		var YN = determinedate.getFullYear();
		var ZBDoCY = Math.floor((determinedate.getTime() - new Date(YN, 0, 1, -6)) / 86400000);
		var WN = 1 + Math.floor(ZBDoCY / 7);
		return WN;
	},
	click : function( event ){
		var obj = UI.getEl( event );
		try{	
			this.callback( obj );
		}catch (e){}
	},
	resetStatus : function(){
		if( this.status ){
			var temp = this.template.status.replace(/yyyy/gi, this.date.year);
			var month = (this.date.month<10)?"0"+this.date.month:this.date.month;
			var day = (this.date.day<10)?"0"+this.date.day:this.date.day;
			temp = temp.replace(/mm/gi, month);
			temp = temp.replace(/dd/gi, this.date.day);
			this.status.innerHTML = temp;
		}
	},
	getFullDate :  function(dateObj){
		var tempM = dateObj.getMonth()+1;
		var tempD = dateObj.getDate();
		var month = (tempM<10)?"0"+tempM:tempM;
		var day = (tempD<10)?"0"+tempD:tempD;
		var celDate = dateObj.getFullYear().toString()+month.toString()+day.toString();
		return celDate;
	},
	render : function(){
		this.monthCnt[1]=(((this.date.year%100!=0)&&(this.date.year%4==0))||(this.date.year%400==0))?29:28;
		var scanToday=(this.date.year==this.today.year && this.date.month==this.today.month)? this.date.day : 0;
		var tempDate = new Date(this.date.year, this.date.month-1, 1);
		var scanFirst=tempDate.getDay()+1;
		var tagTable = $C("TABLE");
		var tagThead = tagTable.appendChild( $C("THEAD") );
		var tagTheadTr = tagThead.appendChild( $C("TR") );

		for( var i=0;i<7;i++ ){
			var th = $C("TH");
			th.className = "head"+(i+1);
			th.innerHTML = this.template.headText[i];
			tagTheadTr.appendChild( th );
		}

		var tagTbody = tagTable.appendChild( $C("TBODY") );
		var tagTbodyTr = null;

		var thisWn=this.getWeek( this.today.year, this.today.month, this.today.day );

		for ( var i=1;i<=42;i++ ){
			if( i%7==1 ){
				tagTbodyTr = tagTbody.appendChild( $C("TR") );
			}
			var tagTbodyTd = tagTbodyTr.appendChild( $C("TD") );
			var col = (i-1)%7+1;
			var dayNum = ((i-scanFirst>=0)&&(i-scanFirst<this.monthCnt[this.date.month-1]))? i-scanFirst+1 : '';
			var day = (dayNum!="")?this.template.day:"";
			var thisYear = this.date.year;
			var thisMonth = this.date.month;
			var thisDay = dayNum;
			var nearFlag = false;// 주변일 플래그
			var className = "week"+col;


			// 근처
			if( this.opt.nearDayDisp == true && dayNum == ''){
				nearFlag = true;
				day = this.template.day;
				var temp = null;
				if( i<=scanFirst ){
					temp = new Date( thisYear, thisMonth-1, 1 + ( i - scanFirst  ) );
					className += " nearPrev";
				} else {
					temp = new Date( thisYear, thisMonth-1, 1 + i-scanFirst );
					className += " nearNext";
				}
				thisYear = temp.getFullYear();
				thisMonth = temp.getMonth()+1;
				thisDay = temp.getDate();
			}
			

			// 오늘
			className += ( thisYear == this.date.year && thisMonth == this.date.month && dayNum == scanToday )?" today":"";
			// 주간
			var wn = this.getWeek( thisYear, thisMonth, thisDay );
			if( this.opt.weekDisp == true && thisWn == wn ){className += " selectedWeek";}
			var tagTbodyA = $C("A");
			tagTbodyA.href="javascript:;";
			tagTbodyA.data = {
				year:thisYear,
				month:thisMonth,
				day:thisDay
			};
			UI.addEvent( tagTbodyA, "click", this.click.bindAsEventListener(this) );

			tagTbodyA.innerHTML = thisDay;
			tagTbodyTd.className = className;
			tagTbodyTd.appendChild( tagTbodyA );
			
		}
		if( this.con ){
			this.con.innerHTML = "";
			this.con.appendChild( tagTable );
			this.resetStatus();
		}
	}
}
// TOP 100에서 기간별 차트에 달력 선택시 call
function getChartDate( date, type ){
	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
	var returnData = false;

	switch( type ){
	case "week":
		var weekNum = date.getDay();
		var dateStart = new Date( year, month, day+(1-weekNum) );
		var dateEnd = new Date( year, month, day+(1-weekNum)+6 );
		returnData = {start:dateStart, end:dateEnd};
		break;
	case "day":
        returnData = date;
		break;
	}
	
	return returnData;
	
}