/*
 * 
 *  inlcuded in the loader.js.php. Moved out for convenience
 * 
 */

function initProgressBar() {

	$("div.progressWrapper").corner();
	//$("#startbutton").remove();
	;
	$("div.progressWrapper").css( {
		'display' : 'block'
	});
}

function showTheme() {
	initProgressBar();
	
	//$("#startbutton").remove();
	
	$("#progress1").css( {
		'opacity' : '1'
	});
	
	$("div.progressWrapper").css( {
		'display' : 'block'
	});
	


} // end function showTheme

// function createTagCloud() {
// // $("#tags>li").tsort({order:"rand"});
// $("#tags").tagcloud( {
// type : "tube",
// sizemin : 10,
// sizemax : 18,
// power : 0.4
// });
// $("#tags li").css( {
// 'cursor' : 'pointer'
// });
// $("#tags li").click(function() {
// $(document).data("selectedTheme", $(this).text());
// changeScreen(2);
// });
// }

function showTime() {
	// hide theme
	initProgressBar();
	//$("#startbutton").remove();
	
	$("#progress1").css( {
		'opacity' : '0.5'
	});
	$("#progress1").text($(document).data("selectedTheme"));
	$("#progress2").css( {
		'opacity' : '1'
	});

}

function showSpace(enablePoints) {

	if ( enablePoints === undefined ) {
		enablePoints = true;
	}
	

	$("#map_canvas").css( {
		'display' : 'block'
	});

	initialize_maps(enablePoints);

}

function changeScreen(currentScreen) {
	// make the div visible
	switch (currentScreen) {
	case 1:
		showTheme();
		break;
	case 2:
		showTime();
		break;
	case 3:
		showSpace();
		displayInfo();
		break;
	//initialize  the system
	case 4:
		showSpace(false); //display the map with no data
		//load the overlay
		displayHowToBox();
		break;
	default:
		showTheme();
		break;
	} // End Switch
	
	// reset three widgets
	resetWidgets();		
	
} // end function changeScreen

/**
 * Add the initialization handlers (all of them!) here
 */
$(document).ready(function() {

		// This is the correct date picker. Anything else (if you
		// find any is redundant !!!!
		$("#cur_date").datepicker( {
			altFormat : 'yy-mm-dd',
			showOn: 'button', 
			buttonImage: 'images/calendar.gif',
			buttonText: 'Click to select a date',
			buttonImageOnly: true,
			beforeShow: function(input) {
				displayMessage("Press escape or click outside to close the date picker");
			},
		    onClose: function(dateText, inst) { 
				displayMessage("");
			},

			onSelect: function(dateText, inst) {
				
			    $('#date_event').val("date"); // used by the next process/
				changeScreen(3);
			}
		});
		
		//################################
		// add effect to calendar image
		$('#selectDate img').hover(function(){
			$(this).css({'border-width': '3px', 'border-color': 'white', 'border-style':'solid'});
		},function(){
			$(this).css({'border-width': '0px', 'border-color': 'white', 'border-style':'solid'});
		})
		
		
		
		//################################
		//register clicks for the overlays
		displayAboutus();
		
		displayHowto();
		
		//############################
		
		
		$("#selectEvent").click(function() {
			displayMenu();
		});
		
		$("#events_overlay").click(function(){
			hideMenu();	
		});
		
		$("#goToTwitris").click(function(){
			$('#startingBox').fadeOut();
			displayMenu();
		});
		
		$("#videoTwitris").click(function(){
			hideMenu();
			var howtoOverlay = $('#howto_overlay');
			var howtoContainer = $('#howto_container');
			
			var left = ($(document).width() - parseInt(howtoContainer.css('width'))) / 2;
		
			howtoOverlay.fadeIn();
			howtoContainer.css({"left" : left}).fadeIn();
		});
		//start the widget
		//startTwitterWidget();
		
		
		// load events
		$.post("conceptcloud/getEventList.php", 
				{}, 
				function(data){
					var eventDiv = $('#events');
					//the code for close action
					eventDiv.data('closeaction','hideMenu();');
					
					addCloseButton(eventDiv, $('#events_overlay'));
					eventDiv.append(data);
				}); //end of post
		
		//
		//init the screen
		changeScreen(4);
		

	});

// ########################################################
function displayAboutus(){
	var aboutus = $('#aboutus_overlay');
	var aboutusContainer = $('#aboutUsContainer');
	
	aboutusContainer.data('closeaction','closeAboutus();');

	var left = ($(document).width() - parseInt(aboutusContainer.css('width'))) / 2;
	addCloseButton(aboutusContainer);
	
	$("#aboutus_link").click(function() {
		aboutus.fadeIn();
		aboutusContainer.css({"left" : left}).fadeIn();
		
	});
}

function closeAboutus(){
	$('#aboutus_overlay').fadeOut();
}


function displayHowto(){
	var howtoOverlay = $('#howto_overlay');
	var howtoContainer = $('#howto_container');
	
	howtoContainer.data('closeaction','closeHowto();');

	var left = ($(document).width() - parseInt(howtoContainer.css('width'))) / 2;
	addCloseButton(howtoContainer);
	
	$("#how_link").click(function() {
		howtoOverlay.fadeIn();
		howtoContainer.css({"left" : left}).fadeIn();
		
	});
}

function closeHowto(){
	$('#howto_overlay').fadeOut();
}

//############################################################


function displayInfo() {
	$("#googlenews").show("slow");
	$("#eventDescription").show("slow");
	$("#dbpedia").show("slow");
}

function displayMenu(){
	var left = ($(document).width() - $('#events').width()) / 2;

	$('#events_overlay').fadeIn();
	$('#events').css({"left" : left}).fadeIn();
	
	//clear displayed messages
	displayMessage("");
}

function hideMenu(){
	$('#events_overlay').fadeOut();
	$('#events').fadeOut();	
	$('#startingBox').fadeOut();
}

function displayHowToBox(){
	$('#events_overlay').fadeIn();
	var left = ($(document).width() - $('#startingBox').width()) / 2;
	var top = ($(document).height() - $('#startingBox').height()) / 2 - 125;
	$('#startingBox').css({"left":left, "top": top});
//	$('#startingBox').show();
}

function resetWidgets(){
	$('#event_content').html("<p>Select a tag to see the relevant list of tweets</p>");
	$('#tweet_widget_head').html("<h3>Related Tweets</h3>");
	
	$('#googlenews_content').html("<p>Select a tag to see the related news items</p>");
	$('#news_widget_head').html("<h3>Google News</h3>");	
	
	$('#db_content').html("<p>Select a tag to see the related Wikipedia entries</p>");
	$('#dbpedia_widget_head').html("<h3>Articles from Wikipedia</h3>");
}

/**
 * Twitter widget code
 * @return
 */
function startTwitterWidget(){
	new TWTR.Widget({
		  profile: true,
		  id: 'twtr-profile-widget',
		  loop: true,
		  width: 100,
		  height: 100,
		  theme: {
		    shell: {
		      background: '#3082af',
		      color: '#ffffff'
		    },
		    tweets: {
		      background: '#ffffff',
		      color: '#444444',
		      links: '#1985b5'
		    }
		  }
		}).render().setProfile('7w17r15').start();
}
// dynamic loading of apis as and when needed. for example, we will load the map
// only when we need it, not before. page loads on other
// pages should be

function initLoader(callback) {
	var script = document.createElement("script");
	script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=" + callback;
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
}