var version=1.0;
var scrollPos=0;
var scrollBoxPos=0;
var guides= new Object();
var tagsData= new Array();
var isTagClk= 0;
var _boxes0='';
var _tags0='';
var _tagsChild0='';
function doMessage(msg){
	if(msg!='') msg= '<span>'+msg+'</span>';
	$('msg').innerHTML= msg;
	$$('#msg span').highlight();
}

/**********************************************************/
/*                          Add Drag                      */
/**********************************************************/

function addDrag(container, value, fnDrop){
	container.addEvent('mousedown', function(e) 
	{	
		document.ondragstart = function () { return false; }; //IE hack
		//e = new Event(e).stop();
 		//id= container.get('src');
		var href= container.get('href');
		makeDrag(e, container, value, container.getParent('a').get('href'), fnDrop);
	});
}	

function makeDrag(e, container, value, href, fnDrop){
	var dragItem = container.clone().set({id: '__drag', 'value': value});
	dragItem.setStyles(container.getCoordinates());
	dragItem.setStyles({'opacity': 0.3, 'position': 'absolute', 'border': 'solid 1px #00cc00'})
	//dragItem.grab(new Element('span').set({'text': 'Drag it and drop to tag list!'}));			
	$('content').grab(dragItem);
	var drag = dragItem.makeDraggable({
		droppables: $$('.drop'),
		onDrop: function(el, drop){
			value= el.get('value');
			el.dispose();
			if (drop){ //done
				//drop.removeEvents();
				//alert(value+':'+drop.innerHTML);
				//doMessage('Tag Added.');
				mode= drop.getParent('div').get('id');
				switch(mode){
				case 'tags':
				case 'tagschild':
					drop.setStyles({'background-color':'#ffffff'});				
					tag= drop.get('title')		
					if(tag!='[All]')
						addToTag(value, tag, false);
					break;
				case 'removeft':
					drop.setStyles({'background-color':'#ffffff'});			
					tag= drop.get('name');
					removeFromTag(value, currentTag);
					break;
				case 'removeobj':
					drop.setStyles({'background-color':'#ffffff'});			
					id= el.get('value');
					removeObject(id);
					break;
				case 'boxes':
					drop.setStyles({'border-top':'solid 0px #faec8f'});
					box= drop.get('title');
					id= el.get('value');
					if(isCopyMode())
						copyObject(id, box);
					else
						moveObject(id, box);
					break;
				default:
					if(fnDrop) fnDrop(el, drop);
					break;
				}
			}else{
				//doMessage('Opps! Please drop to right place. <a target="blank" href="help?w=drop_place">(?)</a>');				
				doMessage('Vui lòng kéo và thả object đúng vị trí. <a target="blank" href="help?w=drop_place">(?)</a>');				
			}
		},
		onComplete: function(el){
		},
		onEnter: function(el, drop){
			mode= drop.getParent('div').get('id');
			if (mode!='boxes')
				drop.setStyles({'background-color': '#faec8f' });
			else
				drop.setStyles({'border-top':'solid 2px #faec8f'});	
		},
		onLeave: function(el, drop){
			mode= drop.getParent('div').get('id');
			if (mode!='boxes')
				drop.setStyles({'background-color': '#ffffff' });
			else
				drop.setStyles({'border-top':'solid 0px #faec8f'});	
		},
		onCancel: function(el){
			window.location= href;
			el.dispose();	

		}
	}); // this returns the dragged element

	drag.start(e); // start the event manual
}

/**********************************************************/
/*                          Add Item                      */
/**********************************************************/

function addImage(container, id, filename, title, desc, filesize, s, view, fTitle, notdrag, fnclick, fndrop){
	if(!desc) desc='';
	filename= filename.replace('&amp;', '&');
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, filename); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}
		var image_ = new Element('img').set({'src': '../download/'+filename+'?s='+s});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.grab(new Element('div').grab(image_));
		div_.grab(a_);
		if(fTitle){
			if(!title) title= filename;
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
			div_.adopt(new Element('div').grab(a2_));
		}
		container.grab(div_);

	}else{ //list view
		imgurl= '../download/'+filename;
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		var image_ = new Element('img').set({'src': imgurl+'?s='+s});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		if(this.pagename=='search'){
		    var desc_= new Element('div').set({'text': desc});
		    desc_.grab(new Element('a').set({'href': 'post?id='+id, 'text': 'Edit', 'class': 'editbtn'}));
		    dtitle_.adopt(title_, desc_);
		}else{
		    dtitle_.adopt(title_);
		}
		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_);
		container.grab(div_);
	}

}

function addMedia(container, id, filename, title, desc, view, fTitle, notdrag, fnclick, fndrop){
	if(!desc) desc='';
	filename= filename.replace('&amp;', '&')
	var ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, filename); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}
		
		var image_ = new Element('img').set({'src': '../images/filetypes/'+ext+'.gif'});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		div_.grab(new Element('div').grab(a_));
		if(fTitle){
			if(!title) title= filename;
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
			div_.adopt(new Element('div').grab(a2_));
		}
		container.grab(div_);
	}else{ //list view
		imgurl= '../download/'+filename;
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		var image_ = new Element('img').set({'src': '../images/filetypes/'+ext+'.gif'});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		if(this.pagename=='search'){
		    var desc_= new Element('div').set({'text': desc});
		    desc_.grab(new Element('a').set({'href': 'post?id='+id, 'text': 'Edit', 'class': 'editbtn'}));
		    dtitle_.adopt(title_, desc_);
		}else{
		    dtitle_.adopt(title_);
		}		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_);
		container.grab(div_);
	}
}

function addFile(container, id, filename, title, desc, view, fTitle, notdrag, fnclick, fndrop){
	if(!desc) desc='';
	if(!filename) filename='';
	filename= filename.replace('&amp;', '&')
	var ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
	if(ext.length>4 || ext.length==0) ext='unknown';
	if(!(ext in this.filetypes)) ext= 'unknown';
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, filename); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}

		var image_ = new Element('img').set({'src': '../images/filetypes/'+ext+'.gif'});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		div_.grab(new Element('div').grab(a_));
		if(fTitle){
			if(!title) title= filename;
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
			div_.adopt(new Element('div').grab(a2_));
		}
		container.grab(div_);
	}else{ //list view
		imgurl= '../download/'+filename;
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		var image_ = new Element('img').set({'src': '../images/filetypes/'+ext+'.gif'});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		if(this.pagename=='search'){
		    var desc_= new Element('div').set({'text': desc});
		    desc_.grab(new Element('a').set({'href': 'post?id='+id, 'text': 'Edit', 'class': 'editbtn'}));
		    dtitle_.adopt(title_, desc_);
		}else{
		    dtitle_.adopt(title_);
		}		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_);
		container.grab(div_);
	}
}

function addDoc(container, id, avatar, title, desc, view, fTitle, notdrag, fnclick, fndrop){
	if(!title) title='';
	if(!avatar) avatar= '../images/noimage.png';
	if(!desc) desc='';
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, title, id); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}

		var image_ = new Element('img').set({'src': avatar, 'title': title});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		div_.grab(new Element('div').grab(a_));
		if(fTitle){
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id,  'title': title});
			div_.adopt(new Element('div').grab(a2_));
		}
		container.grab(div_);
	}else{ //list view
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		var image_ = new Element('img').set({'src': avatar});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		if(this.pagename=='search'){
		    var desc_= new Element('div').set({'text': desc});
		    desc_.grab(new Element('a').set({'href': 'post?id='+id, 'text': 'Edit', 'class': 'editbtn'}));
		    dtitle_.adopt(title_, desc_);
		}else{
		    dtitle_.adopt(title_);
		}
		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_);
		container.grab(div_);
	}
}

function addProduct(container, id, avatar, title, desc, view, fTitle, notdrag, fnclick, fndrop){
	if(!title) title='';
	if(!avatar) avatar= '../images/noimage.png';
	if(!desc) desc='';
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, title, id); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}

		var image_ = new Element('img').set({'src': avatar, 'title': title});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		div_.grab(a_);
		if(fTitle){
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
			div_.adopt(a2_);
		}
		container.grab(div_);
	}else{ //list view
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		var image_ = new Element('img').set({'src': avatar});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		if(this.pagename=='search'){
		    var desc_= new Element('div').set({'text': desc});
		    desc_.grab(new Element('a').set({'href': 'post?id='+id, 'text': 'Edit', 'class': 'editbtn'}));
		    dtitle_.adopt(title_, desc_);
		}else{
		    dtitle_.adopt(title_);
		}
		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_);
		container.grab(div_);
	}
}

function addFeedback(container, id, sender, date, title, view, fTitle, notdrag, fnclick, fndrop){
	if(date) date = fmtDate(date);
	if(!title) title='';
	var avatar= '../images/feedback.gif';
	if(!sender) sender='';
	if(view!='list'){
		var div_= new Element('div');
		var a_= new Element('a').set({'class': 'itemx'});
		if(fnclick){
			a_.set({'href': 'javascript:void(0);', 'title': title});
			a_.addEvent('click', function(){ fnclick(this, title, id); });
		}else{
			a_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
		}

		var image_ = new Element('img').set({'src': avatar, 'title': title});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		div_.grab(a_);
		if(fTitle){
			var a2_ = new Element('a');
			shortTitle= title.substring(0, 11);
			if (shortTitle!= title) shortTitle+='...';
			var span_ = new Element('span').set('text', shortTitle);
			if(!notdrag) addDrag(span_, id, fndrop);
			a2_.grab(span_);
			a2_.set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title});
			div_.adopt(a2_);
		}
		container.grab(div_);
	}else{ //list view
		var div_= new Element('div').set({'class':'litem'});
		var a_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id, 'title': title, 'style': 'width: 50px'});
		var image_ = new Element('img').set({'src': avatar, 'style': 'border: 0px'});
		if(!notdrag) addDrag(image_, id, fndrop);
		a_.adopt(image_);
		var span_ = new Element('span').set('text', title);
		if(!notdrag) addDrag(span_, id, fndrop);
		var dtitle_= new Element('div').set({'class':'dtitle'})
		var title_= new Element('a').set({'href': 'view#'+currentBox+',tag='+currentTag+',id='+id});
		title_.grab(span_);
		//title_.addEvent('click', function(){ editObjTitle(this, id)});
		dtitle_.grab(title_);
		var sender_= new Element('div').set({'class':'sender', 'text': sender});
		var date_= new Element('div').set({'class':'date', 'text': date});
		//var ctrl_= new Element('div');
		//var edit_= new Element('a').set({'href': 'edit?id='+id, 'text': 'Edit', 'title': title});
		//ctrl_.adopt(edit_);
		div_.adopt(a_, dtitle_, sender_, date_);
		container.grab(div_);
	}
}


function editObjTitle(el, id){
	title= el.get('text');
	var div_= new Element('div').set({'class': 'edit'});
	var edit_= new Element('input').set({'type': 'text', 'id': '__editTitle', 'value': title});
	var ok_= new Element('input').set({'type': 'button', 'value': 'OK'});
	ok_.addEvent('click', function(){ editObjTitleOKClk(this, id);});
	var cancel_= new Element('input').set({'type': 'button', 'value': 'Cancel'});
	cancel_.addEvent('click', function(){ editObjTitleCancelClk(this, id);});
	div_.adopt(edit_, ok_, cancel_);
	el.getParent('div').grab(div_, 'top');
	el.dispose();
}
function editObjTitleOKClk(el, id){
	title= el.getParent('div').getElement('#__editTitle').get('value');
	var request = new Request.JSON({
		url: '../f/updateObject',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onEditObjTitleOKClkDone(el, id, response);
		}
	}).get({'id': id, 'title': title});
}

function onEditObjTitleOKClkDone(el, id, data){
	if(data){
		editObjTitleCancelClk(el.getParent('div'), id);
	}
}


function editObjTitleCancelClk(el, id){
	var title_= new Element('a').set({'href': 'javascript:void(0);', 'text': title});
	title_.addEvent('click', function(){ editObjTitle(this, id)});	
	var parent_ = el.getParent('div');
	parent_.innerHTML='';
	parent_.grab(title_);
}

function doPlayMedia(filename){
	alert(filename);
}

function isCopyMode(){
	return this.copymode;
}

function addFriend(container, username, type, avatar){
	var a_= new Element('a');
	a_.set({'href': 'friend?u='+username, 'title': username});
	var image_ = new Element('img').set({'src': avatar});
	a_.grab(image_);
	container.grab(a_);
}

/**********************************************************/
/*                          Search                        */
/**********************************************************/


function getDate(value){
	var re= Array()
	var date = new Date();
	mm= parseInt(value/12);
	dm= 12-(value%12);
	if(dm<10) dm='0'+dm;
	re[0]=(date.getFullYear()-mm);
	re[1]= dm;
	return re
}

function getMile(date){ 
	return 12-(date.getMonth()+1);
}
		
function updateElement(element, value){
	element.set('text', value[1] + '/'+ value[0]);		
}

function updateMileStone(name, total){
	var el = $('timeline');
	_milestone= el.getElement('.milestone');
	miles[name]= total;
	_milestone.innerHTML="";
	for(var i in miles){
		_milestone.set('text', ' '+i+ '('+ miles[i]+')');
	}
}

//---------New Tag-----------------------------

function makeNewTag(){
	var ntg= $('newtag');
	ntg.innerHTML= '';
	var input_= new Element('input').set({type:'button', 'value': 'Tạo', 'title': 'Thêm tag mới'});
	input_.addEvent('click', function(){
		if(this.value=='Tạo'){
			var el_= new Element('input').set({type:'text', 'class': 'edit'});
			$('newtag').grab(el_, 'top');
			this.set('value', 'OK');
		}else{
			value= $('newtag').getElement('.edit').value;
			var _tag= currentTag;
			if (_tag=='*') _tag='';
			newTag(value, _tag, currentBox);			
		}
	});
	ntg.grab(input_);
}

function newTag(tag, parentTag, box){
	if(!tag || !box){
		//doMessage('Please enter tag name!');
		doMessage('Vui lòng nhập tên tag!');
		return;
	}
	var request = new Request.JSON({
		url: '../f/newT',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onNewTagDone(response);
		}
	}).get({'tag': tag, 'parentTag': parentTag, 'box': box});
}

function onNewTagDone(data){
	if(data){
		$('newtag').getElement('.edit').set({'value':''});
		if(data!=null) doMessage('Tag đã được tạo thành công!');
		loadTags(this.currentBox, 'bottom', false);
	}
}

function setBoxesStyles(value, normalClass, selectClass){
	$$('#boxes a div').each(function(item){
		if(item.getParent('a').get('title')==value)
			item.set({'class':selectClass});
		else
			item.set({'class':normalClass+'_'+item.get('name')});
		
	});
}

/**********************************************************/
/*                          Sortables                  	  */
/**********************************************************/

function makeBoxesSortable(){
	var showNewOrder = function() {
		//This function means we get serialize() to tell us the text of each 
		//element, instead of its ID, which is the default return.
		var serializeFunction = function(el) { return el.get('title'); };
		//We pass our custom function to serialize();
		var orderTxt = sort.serialize(serializeFunction);
		//And then we add that text to our page so everyone can see it.
		//$('msg').set('text', orderTxt.join(','));
		if (_boxes0 != $('boxes').innerHTML){
			var b0= orderTxt.join(',');
			if(boxlist!=b0){
				boxlist= b0;
				resortBoxList(boxlist);
			}
		}
	};

	var sort = new Sortables('#boxes', {
		handle: '.drop',
		//This will constrain the list items to the list.
		constrain: true,
		//We'll get to see a nice cloned element when we drag.
		clone: true,
		//This function will happen when the user 'drops' an item in a new place.
		onComplete: showNewOrder
	});

}

function makeTagsSortable(fChild){
	var showTagsNewOrder = function() {
		
		//This function means we get serialize() to tell us the text of each 
		//element, instead of its ID, which is the default return.
		var serializeFunction = function(el) { return el.get('text'); };
		//We pass our custom function to serialize();
		if( _tags0 != $('tags').innerHTML){
			var orderTag = sortTag.serialize(serializeFunction);
			var b0= orderTag.join(',');
			if(b0!=''){
				taglist= b0;
				resortTagList(currentBox, taglist);
			}
		}
		if(fChild){
			if( _tagsChild0 != $('tagschild').innerHTML){
				var orderTagChild = sortTagChild.serialize(serializeFunction);
				var b1= orderTagChild.join(',');
				if(b1!=''){
					taglist= b1;
					resortTagList(currentBox, taglist);
				}
			}
		}
	};
	var sortTag = new Sortables('#tags', {
		handle: '.drop',
		//This will constrain the list items to the list.
		constrain: true,
		//We'll get to see a nice cloned element when we drag.
		clone: true,
		//This function will happen when the user 'drops' an item in a new place.
		onComplete: showTagsNewOrder
	});
	if(fChild){
		var sortTagChild = new Sortables('#tagschild', {
			handle: '.drop',
			constrain: true,
			clone: true,
			onComplete: showTagsNewOrder
		});	
	}
	

}

function makeObjectsSortable(){
	var showObjectOrder = function() {
		//This function means we get serialize() to tell us the text of each 
		//element, instead of its ID, which is the default return.
		var serializeFunction = function(el) { return el.getElement('a').get('href').replace('view?id=',''); };
		//We pass our custom function to serialize();
		var orderTxt = sortObject.serialize(serializeFunction);
		//And then we add that text to our page so everyone can see it.
		//$('msg').set('text', orderTxt.join(','));
		var ids= orderTxt.join(',');
		//call at here
		doMessage(orderTxt);
		swapObjectList(ids);

	};

	var sortObject = new Sortables('#list', {
		handle: 'div',
		//This will constrain the list items to the list.
		constrain: true,
		//We'll get to see a nice cloned element when we drag.
		clone: true,
		//This function will happen when the user 'drops' an item in a new place.
		onComplete: showObjectOrder
	});

}



function resortBoxList(boxlist){
	var request = new Request.JSON({
		url: '../f/resortBoxList',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onResortBoxListDone(response);
		}
	}).get({'boxlist': boxlist});
}

function onResortBoxListDone(data){
	if(data){
		//doMessage('Resort done.');	
	}
}

function resortTagList(box, boxlist){
	var request = new Request.JSON({
		url: '../f/resortTagList',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onResortTagListDone(response);
		}
	}).get({'box': box, 'taglist': boxlist});
}

function onResortTagListDone(data){
	if(data){
		//doMessage('Resort done.');	
		reloadTags(currentBox, scrollPos, true);	
	}
}

function swapObjectList(ids){
	return;
	var request = new Request.JSON({
		url: '../f/swapObject',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onResortBoxListDone(response);
		}
	}).get({'id1': id1, 'id2': id2});
}

function onSwapObjectList(data){
	if(data){
		//doMessage('Resort done.');	
	}
}

//----------Remove From Tag ------------------

function makeRemoveFT(tag){
	var rft= $('removeft');
	rft.innerHTML='';
	if(tag!='*'){
		var el_= new Element('img');
		el_.set({'src': '../images/removeft.png', 'name': '[removeFT]', 'class': 'drop', 'title': 'Kéo và thả object vào đây để loại bỏ object khỏi tag hiện tại'});
		el_.setStyles({'padding':'3px', 'border': 'solid 0px #ccc'});
		rft.grab(el_);
	}
	var rft2= $('removeobj');
	rft2.innerHTML='';
	var el2_= new Element('img');
	el2_.set({'src': '../images/removeobj.png', 'name': '[removeOBJ]', 'class': 'drop', 'title': 'Kéo và thả object vào đây để xóa object'});
	el2_.setStyles({'padding':'3px', 'border': 'solid 0px #ccc'});
	rft2.grab(el2_);	

}



/**********************************************************/
/*                          Boxes                         */
/**********************************************************/

function loadBoxes(){
	var request = new Request.JSON({
		url: '../f/getBoxList',
		onComplete: function(response) {
			onloadBoxesDone(response);
		}
	}).get();
}

function onloadBoxesDone(data){
	var boxes_= $('boxes');
	boxes_.innerHTML= '';
	for(var i=0; i<data.length; i++){
		box= data[i][0]
		permission= data[i][1][0]
		displayname= data[i][1][1]
		zindex= data[i][1][2]
		a_ = new Element('a').set({'href': 'javascript:void(0);', 'value': displayname, 'name': box, 'class': 'drop'});
		a_.addEvent('click', function(){
			box= this.get('name');
			currentBox= box;
			setBoxesStyles(box, '', 'current');
			//loadTags(box);
			//doBox(box, 0, 20);

			setNavBar('Bạn đang xem tất cả.');
			calls("[['select',{'tag': '*', 'box': '"+box+"', 'st': 0, 'size': "+size+", 'fields': 'id, box, tags, title, avatar, desc, filename, name, type, size, datecreated, datemodified, sender'}], ['getTagList',{'box': '"+box+"'}]]", onLoadDone);

		});
		a_.grab(new Element('div').set({'text': data[i]}));
		boxes_.grab(a_);
	}
	var add_= new Element('a').set({'href': 'newbox','text':'+'});
	boxes_.grab(add_);
}

function doBoxH(box, tag, st){
	var p='';
	if(tag!='*') p=',tag='+tag;
	if(st>0) p+=',st='+ st;
	_history.setValue(0, encodeURI(box+p));
	this.start= st;
	this.currentBox= box;
	this.currentTag= tag;
	
	setBoxesStyles(box, '', 'current');
	makeRemoveFT(this.currentTag);
	if(this.currentTag!='*') setNavBar('Bạn đang xem tag <b>'+ this.currentTag+'</b>. <a href="javascript:deleteT(\''+this.currentTag+'\');">Xoá tag này</a>.');
	else setNavBar('Bạn đang xem tất cả.');

	this._boxes0= $('boxes').innerHTML;	
	calls("[['select',{'tag': '"+tag+"', 'box': '"+box+"', 'st': '"+st+"', 'size': "+size+", 'fields': 'id, box, tags, title, avatar, desc, filename, name, type, size, datecreated, datemodified, sender'}], ['getTagList',{'box': '"+box+"'}], ['getFList',{'box': '"+box+"'}]]", onLoadDone);
	
}

function doBoxClk(box){
	_history.setValue(0, encodeURI(box));
	this.scrollPos=0;
	this.start= 0;
	this.currentTag='*';
	this.currentBox= box;
	setBoxesStyles(box, '', 'current');
	//loadTags(box);
	//doBox(box, 0, 20);
	makeRemoveFT(this.currentTag);
	setNavBar('Bạn đang xem tất cả.');

	calls("[['select',{'tag': '*', 'box': '"+box+"', 'st': 0, 'size': "+size+", 'fields': 'id, box, tags, title, avatar, desc, filename, name, type, size, datecreated, datemodified, sender'}], ['getTagList',{'box': '"+box+"'}], ['getFList',{'box': '"+box+"'}]]", onLoadDone);
}

function onLoadDone(data){
	makeNewTag();
	if(data['select']) onGridDone(data['select'], 2);
	if(data['getTagList']) onloadTagsDone(data['getTagList']);
	if(data['getFList']) onloadFriendsDone(data['getFList']);
}

/*function doBox(box, st, size){
	var p='';
	if(tag!='*') p=',tag='+tag;
	if(st>0) p+=',st='+ st;
	_history.setValue(0, encodeURI(box+p));

	makeNewTag();
	this.start= st;
	this.currentBox= box;
	var request = new Request.JSON({
		url: '../f/select',
		onComplete: function(response) {
			onGridDone(response, 2);
		}
	}).get({'tag': this.currentTag, 'box': box, 'st': st, 'size': size});
}*/


/**********************************************************/
/*                          Tags                          */
/**********************************************************/
function loadTags(box, scrollto, nocache){
	var header={}
	if(!nocache) header= {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'}
	var request = new Request.JSON({
		url: '../f/getTagList',
		headers: header,
		onComplete: function(response) {
			onloadTagsDone(response, scrollto);
		}
	}).get({'box': box});
}

function reloadTags(box, scrollto, nocache){
	var header={}
	if(!nocache) header= {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'}
	var request = new Request.JSON({
		url: '../f/getTagList',
		headers: header,
		onComplete: function(response) {
			onreloadTagsDone(response, scrollto);
		}
	}).get({'box': box});
}

function onreloadTagsDone(data, scollto){
	if(data=='Opps!' || (!data)) return;
	this.tagsData= data;	
}

function onloadTagsDone(data, scollto){
	if(data=='Opps!' || (!data)) return;
	this.tagsData= data;
	var ctop_= $$('.main .col1 .ctop');
	ctop_[0].innerHTML='';
	var cbottom_= $$('.main .col1 .cbottom');
	cbottom_[0].innerHTML='';
	if(data.length>15){
		var scroll = new Fx.Scroll('tags', {
			wait: false,
			duration: 1000,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		
		
		var a_ = new Element('a').set({'href': 'javascript:void(0);', 'text': '[Up]', 'class': 'tagup'});	
		a_.addEvent('click', function(){
			scrollPos-=10;
			if(scrollPos<0) scrollPos=0;
			scroll.toElement('tag'+scrollPos);
		});
		ctop_.adopt(a_);	

		a_ = new Element('a').set({'href': 'javascript:void(0);', 'text': '[Down]', 'class': 'tagdown'});	
		a_.addEvent('click', function(){
			scrollPos+=10;
			if(scrollPos>data.length-1) scrollPos=data.length-1;
			scroll.toElement('tag'+scrollPos);
		});
		cbottom_.grab(a_);
	}

	a2_ = new Element('a').set({'href': 'javascript:void(0);', 'text': '[All]',  'class': 'tagall'});	
		a2_.addEvent('click', function(){
			setTagsStyles('*');
			this.setStyles({'background-color':'#ccc'});
			doTag('*', currentBox, 0, size);
		});	

	ctop_.adopt(a2_);	

	var tags_= $('tags');
	tags_.innerHTML= '';
	for(var i=0; i<data.length; i++){
		var _parrentTag=''
		if(data[i][1][3]) _parrentTag= data[i][1][3]
		if (_parrentTag!='') continue;
		var tag= data[i][0];
		var count= data[i][1][0];
		var zindex= data[i][1][1];
		
		var displayname= tag;
		if(data[i][1][2]) displayname= data[i][1][2];
		//tag= tag.substring(0,1).toUpperCase()+ tag.substring(1);
		a_ = new Element('a').set({'href': 'javascript:void(0);', 'id': 'tag'+i, 'text': displayname, 'title': tag, 'class': 'drop'});
		a_.addEvent('click', function(event){
			event.stop();
			tag= this.get('title');
			setTagsStyles(tag);
			isTagClk= $time();
			doTag(tag, currentBox, 0, size);
			return false;
		});
		tags_.grab(a_);
	}
	//tags_.grab(a_);
	
	if(i>0) makeTagsSortable();	
	getTagsChild();
	setTagsStyles(currentTag);
	
	if(data.length>15)
		if(scollto=='bottom') scroll.toBottom();
		else scroll.toTop();
	
	this._tags0= $('tags').innerHTML;
	this._tagsChild0= $('tagschild').innerHTML;

}

function getTagsChild(){
	var tags_= $('tagschild');
	tags_.innerHTML= '';
	for(var i=0; i<this.tagsData.length; i++){	
		var _parrentTag='';
		if(this.tagsData[i][1][3]) _parrentTag= this.tagsData[i][1][3].toLowerCase();
		if (_parrentTag=='') continue;
		if(_parrentTag== this.currentTag){
			var tag= this.tagsData[i][0];
			var count= this.tagsData[i][1][0];
			var zindex= this.tagsData[i][1][1];
			
			var displayname= tag;
			if(this.tagsData[i][1][2]) displayname= this.tagsData[i][1][2];
			a_ = new Element('a').set({'href': 'javascript:void(0);', 'id': 'tagchild'+i, 'text': displayname, 'title': tag, 'class': 'drop'});
			a_.addEvent('click', function(event){
				event.stop();
				tag= this.get('title');
				setTagsStyles(tag);
				isTagClk= $time();
				doTag(tag, currentBox, 0, size);
				return false;
			});
			tags_.grab(a_);
		}
	}
	if(i>0) makeTagsSortable(true);
}


function doTag(tag, box, st, size, nocache){
	this._tags0= $('tags').innerHTML;
	this._tagsChild0= $('tagschild').innerHTML;
	var p='';
	if(tag!='*') p=',tag='+tag;
	if(st>0) p+=',st='+ st;
	_history.setValue(0, encodeURI(box+p));

	this.start= st;
	this.currentTag= tag;
	
	getTagsChild();
	makeRemoveFT(this.currentTag);
	if(this.currentTag!='*') setNavBar('Bạn đang xem tag <b>'+ this.currentTag+'</b>. <a href="javascript:deleteT(\''+this.currentTag+'\');">Xoá tag này</a>.');
	else setNavBar('Bạn đang xem tất cả.');
		
	/*
	var header= {}
	if(!nocache) header= {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'}
	var request = new Request.JSON({
		url: '../f/select',
		headers: header, //do not cache
		onComplete: function(response) {
			onGridDone(response, 2);
		}
	}).get({'tag': tag, 'box': box, 'st': st, 'size': size});*/
	calls("[['select',{'tag':  '"+this.currentTag+"', 'box': '"+this.currentBox+"', 'st': '"+this.start+"', 'size': '"+this.size+"', 'fields': 'id, box, tags, title, avatar, desc, filename, name, type, size, datecreated, datemodified, sender'}]]", onLoadDone);
}

function addToTag(id, tag){
	var request = new Request.JSON({
		url: '../f/addT',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onAddToTagDone(response);
		}
	}).get({'id': id, 'tag': tag});
}

function onAddToTagDone(data){
	//doMessage(data);
	if(data!=null) doMessage('Đã thêm object vào tag.');
}

function removeFromTag(id, tag){
	var request = new Request.JSON({
		url: '../f/removeT',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onRemoveFromTagDone(response);
		}
	}).get({'id': id, 'tag': tag});
}

function onRemoveFromTagDone(data){
	//doMessage(data);
	if(data!=null) doMessage('Đã loại bỏ object ra khỏi tag.');
	doTag(this.currentTag, this.currentBox, this.start, this.size, false);
}

function removeObject(id){
	var request = new Request.JSON({
		url: '../f/removeObject',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onRemoveObjectDone(response);
		}
	}).get({'id': id});
}

function onRemoveObjectDone(data){
    //doMessage(data);
	if(data>0) doMessage('Đã xóa object.');
	doTag(this.currentTag, this.currentBox, this.start, this.size, false);
}


function setTagsStyles(value){
	$$('.main .col1 .tagall').setStyles({'background-color':'#ffffff'});
	$$('#tags .drop').each(function(item){
		if(item.get('title')==value)
			item.setStyles({'background-color':'#ddd'});
		else
			item.setStyles({'background-color':'#ffffff'});
	});
	
}


function setViewMode(el, box, mode){
	if(this.viewmode== mode) return;
	this.viewmode= mode;
	Cookie.write('viewmode_'+box, this.viewmode);
	getScreenSize();	
	if(mode=='list'){
		//this.size= Math.round(this.size/2);
		el.getElement('img').set({'src':'../images/listview_hover.gif'});
		$$('#topbar .gridview img').set({'src':'../images/gridview.gif'});
	}else{
		//this.size= this.size*2;
		el.getElement('img').set({'src':'../images/gridview_hover.gif'});
		$$('#topbar .listview img').set({'src':'../images/listview.gif'});
	}
	if(this.currentBox!=''){
		doTag(this.currentTag, this.currentBox, this.start, this.size);	
	}else{
		
	}
}

function setZoomMode(el, mode){

	if(mode=='in'){
		if(this.zoom<2) this.zoom++;
		else return;
		el.getElement('img').set({'src':'../images/zoomin_hover.gif'});
		$$('#topbar .zoomout img').set({'src':'../images/zoomout.gif'});

	}else{
		if(this.zoom>1) this.zoom--;
		else return;
		el.getElement('img').set({'src':'../images/zoomout_hover.gif'});
		$$('#topbar .zoomin img').set({'src':'../images/zoomin.gif'});

	}
	if(this.currentBox!=''){
		doTag(this.currentTag, this.currentBox, this.start, this.size);	
	}else{
		
	}

}





/**********************************************************/
/*                          Objects                       */
/**********************************************************/
//---------------Move Object-------------------------------
function moveObject(id, box){
	var request = new Request.JSON({
		url: '../f/moveObject',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onMoveObjectDone(response);
		}
	}).get({'id': id, 'boxTo': box});
}

function onMoveObjectDone(data){
	if(data){
		//doMessage(data);
		doMessage('Đã chuyển object thành công!');
		if (this.currentTag && this.currentBox){
			doTag(this.currentTag, this.currentBox, this.start, this.size, false);
		}else{
			if (this.currentBox)
				doTag(this.currentTag, this.currentBox, this.start, this.size, false);
		}
	}
}

//---------------Copy Object-------------------------------
function copyObject(id, box){
	var request = new Request.JSON({
		url: '../f/copyObject',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			onCopyObjectDone(response);
		}
	}).get({'id': id, 'boxTo': box});
}

function onCopyObjectDone(data){
	if(data){
		//doMessage(data);
		doMessage('Đã sao chép object thành công!');
		if (this.currentTag && this.currentBox){
			doTag(this.currentTag, this.currentBox, this.start, this.size, false);
		}else{
			if (this.currentBox)
				doTag(this.currentTag, this.currentBox, this.start, this.size, false);
		}
	}
}


/**********************************************************/
/*                          Calls                    	  */
/**********************************************************/

function calls0(methods, handler){
	//methods="[['getBoxList',{}], ['getTagList',{'box':'Photos'}], ]"
	var request = new Request.JSON({
		url: '../c',
		headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onComplete: function(response) {
			handler(response);
		}
	}).get({'calls': methods});	
}

function calls(methods, handler){
	var hf= $('hf');
	var form_= new Element('form').set({'method': 'get', 'action': '../c'});
	var input_= new Element('input').set({'type': 'hidden', 'name': 'calls', 'value': methods});
	form_.grab(input_);
	form_.setAttribute('target', IfPost(handler, 1));	
	hf.grab(form_);	
	form_.submit();
	
}


/**********************************************************/
/*                          URL                    	  */
/**********************************************************/

function getParams(params){
	var p= new Object();
	pa= params.split(',');
	p['box']= pa[0];
	for(var i=1; i<pa.length; i++){
		var ite= pa[i].split('=');
		p[ite[0]]= ite[1];
	}
	return p;
}

function doThisBox(){
	$('q').value=this.currentBox+' '+$('q').value;
}


function IfPost(handler, mode)
{
    var n = 'f' + Math.floor(Math.random() * 99999);
    $('hf').innerHTML = '<iframe style="display:none; " src="about:blank" id="'+n+'" name="'+n+'"></iframe>';
     $(n).addEvent('load', function(){
     	     var hf = this;
	     if (hf.contentDocument)
	     {
		    var d = hf.contentDocument;
	     }
	     if(hf.contentWindow)
	     {
		    var d = hf.contentWindow.document;
	     }
	     else
	     {
		    var d = window.frames[hf.id].document;
	     }
	     if (d.location.href == "about:blank"){
		    return;
	     }    
	     var data= d.body.innerHTML;
	     handler(JSON.decode(data), mode);
     });
     return n;
}



function setNavBar(msg){
	var nav_= $('navbar');
	if(nav_){
		nav_.set('html', msg);
	}
}

function deleteT(tag){
	if(confirm('Bạn có chắc chắn muốn xoá tag này không? \n Khi bạn xoá tag này dữ liệu trong tag không bị mất.')){
		var request = new Request.JSON({
			url: '../f/deleteT',
			headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
			onComplete: function(response) {
				if(response==true)
					doBoxH(currentBox, '*', 0);
			}
		}).get({'tag': tag, 'box': this.currentBox});
	}
}

function fmtDate(date){
	date= parseFloat(date)*1000;
	return new Date(date).toString('dd/MM/yyyy HH:mm:ss');
}

function millisecondsToDuration(n) {
        var hms = "";
        var dtm = new Date();
        dtm.setTime(n);
        var h = "000" + Math.floor(n / 3600000);
        var m = "0" + dtm.getMinutes();
        var s = "0" + dtm.getSeconds();
        var cs = "0" + Math.round(dtm.getMilliseconds() / 10);
        hms = h.substr(h.length-4) + ":" + m.substr(m.length-2) + ":";
        hms += s.substr(s.length-2) + "." + cs.substr(cs.length-2);
        return hms;
}


function toggleAutoPlay(el){
    addListeners();
    if(this.autoplay){
        this.autoplay= false;
    	el.getElement('img').set({'src':'../images/autoplay_off.png'});
    	el.set({'title': 'Kích hoạt chế độ tự động chơi (AutoPlay) dành cho các file nhạc mp3 và flash'});
    }    
    else {
        this.autoplay= true;
        el.getElement('img').set({'src':'../images/autoplay_on.png'});
        el.set({'title': 'Vô hiệu hóa chế độ tự động chơi'});
    }
    
}

function toggleCopyMode(el){
    if(this.copymode){
        this.copymode= false;
    	el.getElement('img').set({'src':'../images/copy_off.png'});
    	el.set({'title': 'Kích hoạt chế độ sao chép (copy). Bạn có thể copy object từ box này sang box khác bằng cách kéo thả.'});
    }    
    else {
        this.copymode= true;
        el.getElement('img').set({'src':'../images/copy_on.png'});
        el.set({'title': 'Vô hiệu hóa chế độ sao chép (copy). Bạn có thể di chuyển object từ box này sang box khác bằng cách kéo thả.'});
    }
    
}



/**********************************************************/
/*                          Guide                    	  */
/**********************************************************/

function loadGuide(mode){
	if(!guides[mode]){
		var req = new Request.HTML({url: '../guides/'+mode+'.html', 
			onSuccess: function(html) {
				$('list').set('text', '');
				$('list').adopt(html);
				guides[mode]= $('list').get('html');

			}
		}).get();

	}else $('list').set('html', guides[mode]);
}



var filetypes= {'doc':1,'docx':1,'xls':1,'xlsx':1,'ppt':1,'pptx':1,'pdf':1,'txt':1,
		'htm':1,'html':1,'xml':1,'rtf':1,'zip':1,'rar':1,'gz':1,'psd':1,
		'swf':1,'flv':1,'wma':1,'wmv':1,'mp3':1,'m4v':1,'mov':1,'avi':1};