Ext.onReady(function(){
	//Get all the add to project divs
	getProjectListItems(function(records){
		createAddToProjectButtons('.add-to-project-button', records);
	});
	
	//create the tool tips
	createToolTips('.project-tip');
	
});

function getProjectListItems(onComplete){
	Ext.Ajax.request({
		scope: this,
		url: '/ajax/user/process/get-all-user-lists',
		params: {},
		success: function(r){
			var response = {};
			if(r.responseText.length){
				response = Ext.util.JSON.decode(r.responseText);
			}
			else{
				response.records = [];
			}
			
			if(onComplete != null){
				onComplete(response.records);
			}
		}
	});
}

function createProjectListMenu(records){
	var menu = new Ext.menu.Menu({
		maxHeight:200
	});
	
	//Add the lsit items to the menu
	if(records.length){
		for(var i = 0; i < records.length; i++){
			var record = records[i];
			var menuItem = new Ext.menu.Item({
				text: record.title
				,record: record
				,handler: addListItem
				
			});
			menu.add(menuItem);
		}
	}
	else{
		var menuItem = new Ext.menu.Item({
			text: 'Please Log In...'
			,handler: function(){
				location.href = '/pages/login/';
			}
		});
		menu.add(menuItem);
	}
	
    return menu;
}

function createAddToProjectButtons(selector, records){
	Ext.select(selector).each(function(el){
		//get the clip id
		var clipId = el.dom.innerHTML;
		//clear the div
		el.dom.innerHTML = '';
		
		var button = createAddToProjectButton(records, clipId);
	    button.render(el);
	});
}

function createAddToProjectButton(records, clipId){
	var menu = createProjectListMenu(records);
	menu.clipId = clipId;
	var button = new Ext.Button({
		text: "Add to Project Folder"
		,icon: '/images/icons/project-add.png'
		,cls: 'project-add-button'
		,menu: menu
    });
    menu.button = button;
    
    return button;
}

function addListItem(item){
	var clipId = item.parentMenu.clipId;
	var listId = item.record.listId;
	var button = item.parentMenu.button;
	var info = Ext.get(Ext.DomHelper.append(button.getEl().parent('.add-to-project-button'), {
		tag: "div",
		cls: "project-message",
		html: '<span style="font-style:italic; font-weight:bold; font-size:9px;">Adding...</span>'
	}));
	
	Ext.Ajax.request({
		scope: this,
		url: '/ajax/user/process/add-list-item',
		params: { clipId: clipId, listId: listId },
		success: function(r){
			//Show a message
			info.dom.innerHTML = '<span style="font-style:italic; font-weight:bold; font-size:9px;">Successfully Added</span>';
			setTimeout(function(){
				info.remove();
			}, 2000);
		},
		failure: function(){
			info.remove();
		}
	});
}

function createToolTips(selector){
	
    
    var timer = null;
    var tips = [];
	
	//Set up some listeners
    var selection = Ext.select(selector).elements;
    for(var i=0; i < selection.length; i++){
    	var el = selection[i];
    	var clipId = Ext.get(el).dom.getAttribute('rev');
		var tip = new Ext.ToolTip({
			cls: 'clip-tip',
	        width: 400,
	        autoHeight: true,
	        autoHide: true,
	        dismissDelay: 30000,
	        trackMouse: false,
	        anchor:'left',
	        autoLoad: {
	        	url: '/ajax/user/public-process/get-clip-details/',
	        	params: { 'clipId' : clipId },
	        	callback: function(){
	       
	        	}
	        },
	        target: el,
	        getTargetXY: function() {
				var xy = this.target.getAnchorXY('tr');
				xy[0] += 10;
				xy[1] -= 10;
				return xy;
			}
	    });
	    
    }
	
	//console.log(tips);
	
	Ext.QuickTips.init();
}