/*
 * Javascript for toplinks. Mainly controls the tabs on the page.
 *
 * Nathan Reed, 05/08/08
 */

window.addEvent('load', function(e) {TopUi.init();});

var COOKIE_NAME = 'tl-cur-tab';

var TopUi = {
	init: function() {
		this.hiddenCount = 0;
		this.highlight = false;

		// add some basic stuff to mootools that desnt already exist for some random reason..
		Element.implement({
			show: function() {this.setStyle('display','');},
			hide: function() {this.setStyle('display','none');}
		});

		// initilize the tabs, make sure when the user clicks on it, that an event
		// fires to update things
		$$('.tl-tab').each(
			function(element) {
				element.addEvent('click', function(e) {TopUi.selectTab(element);})
			}
		);
		
		// see if the user has a particular tab they use
		var tabid = Cookie.read(COOKIE_NAME);
		defaultTab = ($(tabid) == null)?$$('.tl-tab-default')[0]:$(tabid);
		if(!$defined(defaultTab)) {
			defaultTab = 'tl-tab-day-tab';
		}
		// select the tab
		this.selectTab(defaultTab);
	
	},
	
	selectTab: function(newtab) {
		newtab = $(newtab);

		// update the display to show the new tab as being selected
		$$('.tl-tab-selected').each(function(element) {element.className = 'tl-tab'});
		newtab.className = 'tl-tab tl-tab-selected';
		
		// now show the data associated with that tab, and hide all the other
		// tabs
		$$('.tl-link-table').each(function(element) {element.hide();});
		$$('.tl-stream-table').each(function(element) {element.hide();});
		tabId = newtab.getAttribute('tl-tab-id');
		$(tabId).show();
		
		// set the cookie so we load this tab next time if the page is refreshed. expire after 5 days
		Cookie.write(COOKIE_NAME, newtab.id, {duration: 5});

	},
	
	hideVisited: function() {

	},
	
	highlightNew: function() {
		if(this.highlight == false) {
			$$('tr.tl-c-new').each(function(e){e.addClass('tl-c-highlight');});
			$('tl-b-highlight').innerHTML = 'unhighlight new links';
			this.highlight = true;
		} else {
			$$('tr.tl-c-new').each(function(e){e.removeClass('tl-c-highlight');});
			$('tl-b-highlight').innerHTML = 'highlight new links';
			this.highlight = false;
		}
	},
	
	// toggles the status of any hidden links
	toggleHidden: function() {
		if(this.showHidden == false) {
			// show all the hidden links in the table
			document.getElements('.tl-body tr.tl-hide-url').each(function(e){e.show();});
			$('tl-tog-hide').innerHTML = '- hide hidden bookmarks';			
			this.showHidden = true;
		} else {
			// hide the hidden links again
			document.getElements('.tl-body tr.tl-hide-url').each(function(e){e.hide();});
			$('tl-tog-hide').innerHTML = '+ show hidden bookmarks';
			this.showHidden = false;
		}
		
		// save this setting for next time
		Cookie.write('tl-show-hidden', (this.showHidden)?'1':'0', {duration: 180});
	},
	
	toggleRelated: function(baseId) {
		elem = $('tl-ur-'+baseId);
		if(elem.hasClass('tl-show-related') == true) {
			$$('.tl-body tr.tl-related-'+baseId).each(function(e){e.hide();});
			elem.removeClass('tl-show-related');			
		} else {
			$$('.tl-body tr.tl-related-'+baseId).each(function(e){e.show();});
			elem.addClass('tl-show-related');
		}
	},
	
	
	// toggle the hidden status of a link
	toogleHideLink: function(elementid, tabid) {
		id = tabid+'-'+elementid;
		elem = $('tl-r-'+id);

		// is this url hidden?
		if(elem.hasClass('tl-hide-url') == false) {			
			// hide the all the rows with that url
			document.getElements('.tlc-url-'+elementid).each(
				function(e){
					TopUi.hideLink(e);
				}
			);
		} else {
			// show all rows with that url
			document.getElements('.tlc-url-'+elementid).each(
				function(e) {
					TopUi.showLink(e);
				}
			);
		}
		
		// whether it is hidden of not we need to tell the server to 
		// toggle the status as well, so it shows as hidden next time
		TopApi.hideLink(elementid);
	},
	
	hideLink: function(e) {
		if(this.showHidden == false) {
			e.hide();
		}
		
		// now mark that row as hidden, and update the link
		e.addClass('tl-hide-url');
		e.getElements('.tl-hide-button a')[0].innerHTML = 'show';
	},
	
	showLink: function(e) {
		// no need to show the element, for the user to change the status
		// it must alerady be visible
		e.removeClass('tl-hide-url');
		$('tl-hide-button-'+id).innerHTML = 'hide';
	},
	
	saveLink: function(id) {
		TopUi.addSaveTableLink('tl-tab-saved', id);
		
	},
	
	unSave: function(id) {
		$('tl-sr-'+id).dispose();
	},
		
	// clone a row and add it to a new table
	addSaveTableLink: function(table, id) {
		table = $(table);
		newrow = $('tl-r-'+id).clone(true);
		
		// set the id
		newrow.id = 'tl-sr-'+id;
				
		// clean things up a bit before adding the row
		newrow.deleteCell(0);
		newrow.deleteCell(2);
		newrow.deleteCell(2);
		
		// change the link to whatever it should be
		newrow.cells[1].addClass('tl-count');
		savelink = newrow.cells[1].getElementsByTagName('a')[0];
		savelink.innerHTML = 'unsave';
		savelink.href = 'javascript:TopUi.unSave('+id+');';
	
		table.appendChild(newrow);		
	}
	
}

var TopApi = {
	
	init: function() {
	},
	
	saveLink: function() {
	},
	
	hideLink: function(linkid) {
		hideReq = new Request({method: 'get', 
				url: './api/togglehide.php', 
				onSuccess: function(resp){
					
				},
				onFailure: function() {
					alert('could not connect to server...');
				}
				
			});
		hideReq.send('lid='+linkid);
	}

}