/**
 *  Aarohi 2012 Alpha.
 *  Testing concepts.
 *  21st oct
 */

$(document).ready(function(){
	var enableCanvas = true;
	//enableCanvas = confirm("Enable html5? This may give unpleasant experience in firefox?");
	
	var test_canvas = document.createElement("canvas");
	var canvascheck =(test_canvas.getContext)? true : false;

    if(!canvascheck)
	{
		var ans = confirm("It seems that Your browser doesn't support html5 canvas element. Please use Chrome/Firefox or IE 9+\n" +
				"Do you want to be redirected to our Lite edition?");
		if(ans == true)
			window.location = 'http://m.aarohiworld.com/';
	}
    if(navigator.userAgent.match(/Android/i) ||
   		 navigator.userAgent.match(/webOS/i) ||
   		 navigator.userAgent.match(/iPhone/i) ||
   		 navigator.userAgent.match(/iPod/i))
   	{
   		window.location = 'http://m.aarohiworld.com/';
   	}

    (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
	var homeScreen = $('#homeScreen');
	
	var eventsScreen = $('#eventsScreen');
	var proShowScreen = $('#proShowScreen');
	var informalsScreen = $('#informalsScreen');
	var aboutUsScreen = $('#aboutUsScreen');
	
	var singingEventScreen = $('#singingEventScreen');
	var dancingEventScreen = $('#dancingEventScreen');
	var personalityContestScreen = $('#personalityContestScreen');
	var purpleHazeScreen = $('#purpleHazeScreen');
	var dramaticsEventsScreen = $('#dramaticsEventsScreen');
	
	var eventsBtn_homeNavi = $('#eventsBtn_homeNavi');
	var proShowBtn_homeNavi = $('#proShowBtn_homeNavi');
	var informalsBtn_homeNavi = $('#informalsBtn_homeNavi');
	var aboutUsBtn_homeNavi = $('#aboutUsBtn_homeNavi');
	
	var singingBtn_eventsScreenNavi = $('#singingBtn_eventsScreenNavi');
	var dancingBtn_eventsScreenNavi = $('#dancingBtn_eventsScreenNavi');
	var pcBtn_eventsScreenNavi = $('#pcBtn_eventsScreenNavi');
	var purpleHazeBtn_eventsScreenNavi = $('#purpleHazeBtn_eventsScreenNavi');
	//var etcBtn_eventsScreenNavi = $('.etcBtn_eventsScreenNavi');
	var backToHome_Ilevel = $('.backToHome_Ilevel');
	
	var backToEventsBtn = $('.backToEventsBtn');
	var backToHomeBtn_eventsScreen = $('.backToHomeBtn_eventsScreen');
	
	var screenW = $(window).width();
	var screenH = $(window).height();
	
	var duration = 1000;
	
	/*___________________________Intialization_________________________________________*/
	
	//___splash!___
	drawLayout();
	
	$('html,body').scrollTop(0);
	$('html,body').scrollLeft(0);
	splash();
	
	$(window).resize(function(){drawLayout(true);});
	
	//DISABLE KEYBOARD SCROLLING
	var ar=new Array(33,34,35,36,37,38,39,40);
	$(document).keydown(function(e){
		 var key = e.which;
		  if($.inArray(key,ar))
		  {
			  e.preventDefault();
			  return false;
		  }
		  return true;
	});
	
	//alert($('body').scrollLeft()+'px');
	function splash()
	{
		$("#splashHeader").fadeOut(100).delay(1000).fadeIn(600).delay(500);
		$("#loginContainer").fadeOut(100).delay(3900).fadeIn(400);
		//$("#splashFooter").fadeOut(100).delay(5900).fadeIn(400);
		
		if(typeof FB != "undefined" && FB != null)
		{
			FB.getLoginStatus(function(response) {
				  if (response.authResponse) {
				    // logged in and connected user, someone you know
					  $('#forcedNoLogin, #FBLogin').hide();
					  FB.api('/me', function(user) {
				            if (user) {
				            	$('#loginContainer').html('<span>Welcome Back ' + user.name + '</span>');
				            }
				          });
					  $('html, body').delay(5000).animate({scrollLeft: 5*screenW}, duration);
				  } else {
				    // no user session available, someone you dont know
				  }
				});
		}
		
		$('#FBLogin').click(function()
		{
			var username
			if(typeof FB != "undefined" && FB != null)
			{
				FB.login(function(response) {
					   if (response.authResponse) {
						   $('#loginContainer').html('<span>Welcome!  Fetching your information....</span>');
						   $('#loginMsg').html('&nbsp;');
					     FB.api('/me', function(response) {
					    	 username = response.name;
					    	 $('#loginContainer').html('<span>Good to see you, ' + response.name + '.</span>');
					    	 $('#loginMsg').html('&nbsp;');
					    	 
					    	 //____post to user wall on FB
					    	 var params = {};
					    	 params['message'] = response.name + ' is now connected to Aarohi 2012. Visit http://aarohiworld.com for more details';
					    	 params['name'] = 'Aarohi 2012';
					    	 params['description'] = 'Aarohi: Central India\'s Largest Cultural Festival, Visvesvaraya National Institute Of Technology Nagpur. 24-26 Febuary 2012';
					    	 params['link'] = 'http://www.aarohiworld.com';
					    	 params['picture'] = 'http://www.aarohiworld.com/aarohiLogo.jpg';
					    	 params['caption'] = 'Aarohi 2012 VNIT Nagpur';
					    	 //params['privacy'] = 'EVERYONE';
					    	 FB.api('/me/feed', 'post', params, function(response) {
					    	  /*if (!response || response.error) {
					    	     alert('Error occured');
					    	   } else {
					    	     alert('Published to stream - you might want to delete it now!');
					    	   }*/
					    	 });
					       /*FB.logout(function(response) {
					         console.log('Logged out.');
					       });*/
					     });
					     $('html, body').delay(5000).animate({scrollLeft: 5*screenW}, duration);
					   } else {
						   $('#loginMsg').html('<span id="temp" style="font-size:16px;">Opps! There was a problem Connecting your Facebook profile. Please Try Again :)</span>');
					   }
					 }, {scope: 'email, user_likes, user_status, publish_stream, user_education_history'});
			}
			else
				alert("It seems that Facebook servers are not accessible. Please try without Connecting FB");
		 });
	}	 
		
		
	
	//var forcedNoLogin = false;
	$('#forcedNoLogin').click(function(){ $('html, body').animate({scrollLeft: 5*screenW}, duration); });
	
	function drawLayout(refresh)
	{	
		screenW = $(window).width();
		screenH = $(window).height();
		
		
		homeScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 5*screenW + 'px', 'top': '0'});
        eventsScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 4*screenW + 'px', 'top': screenH + 'px'});
        proShowScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 5*screenW + 'px', 'top': screenH + 'px'});
        informalsScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 6*screenW + 'px', 'top': screenH + 'px'});
        aboutUsScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 7*screenW + 'px', 'top': screenH + 'px'});
        $('#workshopScreen').css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 5*screenW + 'px', 'top': 2*screenH + 'px'});
        
        singingEventScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 4*screenW + 'px', 'top': 2*screenH + 'px'});
        dancingEventScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 3*screenW + 'px', 'top': 2*screenH + 'px'});
        personalityContestScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 2*screenW + 'px', 'top': 2*screenH + 'px'});
        purpleHazeScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': screenW + 'px', 'top': 2*screenH + 'px'});
        dramaticsEventsScreen.css({'height': screenH + 'px', 'width': screenW + 'px', 'left': '0', 'top': 2*screenH + 'px'});
        $('#pentathlonEventsScreen').css({'height': screenH + 'px', 'width': screenW + 'px', 'left': '0', 'top': screenH + 'px'});
        $('#iridescenceEventsScreen').css({'height': screenH + 'px', 'width': screenW + 'px', 'left': screenW + 'px', 'top': screenH + 'px'});
        $('#etcEventsScreen').css({'height': screenH + 'px', 'width': screenW + 'px', 'left': 2*screenW + 'px', 'top': screenH + 'px'});
        
        $('.eventSponsorLogo, .eventSponsorLogo IMG').css({'height' : 12/100 * screenH + 'px'});
        
        $('footer').css({'font-size' : .8/100 * screenW + 'px', 'padding' : 1.2/100*screenH + 'px', 'left' : 88/100 * screenW + 'px', 'top' : 94/100 *screenH + 'px'}); //footer
        
        if(refresh == true)
    	{
        	$('html,body').scrollTop(0);
    		$('html,body').scrollLeft(5*screenW);
    	}
    	
		
		
		//______________________________MENU Placement_________________________________________
		var homeTxtX = (5/100)*screenW;
		var homeTxtY = (80/100)*screenH;
		//var homeTxtH = (8/100)*screenH;
		$('#homeTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : homeTxtY + 'px', 'left' : homeTxtX + 'px' });
		
		var homeNaviX = (20/100)*screenW;
		var homeNaviY = (82.5/100)*screenH;
		$('#homeNavi').css({'font-size' : 1.75/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': homeNaviY + 'px', 'left' : homeNaviX + 'px'});
		
		var proShowY = (2/100)*screenH;
		var proShowX = (15/100)*screenW;
		$('#proShowTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : proShowY + 'px', 'left' : proShowX + 'px' });
		$('#proShowBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': proShowY - 3/5*proShowY + 'px', 'left' : proShowX + 'px'});
		
		$('#workshopTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : proShowY + 'px', 'left' : proShowX + 'px' });
		$('#workshopScreenBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': proShowY - 3/5*proShowY + 'px', 'left' : proShowX + 'px'});
		
		var eventsTxtX = 10/100*screenW;
		var eventsTxtY =  3/100*screenH;
		$('#eventsTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : eventsTxtY + 'px', 'left' : eventsTxtX + 'px' });
		$('#eventsScreenBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': eventsTxtY - 3/5*eventsTxtY + 'px', 'left' : eventsTxtX + 'px'});
		
		
		//eventScreen Navi
		var eventsScreenNaviNaviX = (10/100)*screenW;
		var eventsScreenNaviY = (85/100)*screenH;
		$('#eventScreenContainer').css({'width' : 80/100*screenW + 'px', 'height' : 80/100*screenH + 'px', 'top' : 15/100*screenH + 'px', 'left' : 10/100*screenW + 'px'});
		$('#eventScreenImg').css({'width' : 80/100*screenW + 'px', 'height' : 70/100*screenH + 'px'});
		$('#eventsScreenNavi').css({'font-size' : 1.75/100*screenW + 'px', 'padding' : (1/100)*screenW + 'px'});
		
		//saving variables
		$('#informalsTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : eventsTxtY + 'px', 'left' : eventsTxtX + 'px' });
		$('#informalsBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': eventsTxtY - 3/5*eventsTxtY + 'px', 'left' : eventsTxtX + 'px'});
		
		var aboutUsTxtX = 5/100*screenW;
		var aboutUsTxtY = (3/100)*screenH;
		$('#aboutUsTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : eventsTxtY + 'px', 'left' : aboutUsTxtX + 'px' });
		$('#aboutUsBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': aboutUsTxtY - 3/5*aboutUsTxtY + 'px', 'left' : aboutUsTxtX + 'px'});
		
		var singingTxtX = 10/100*screenW;
		var singingTxtY =  5/100*screenH;
		$('#singingTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : singingTxtY + 'px', 'left' : singingTxtX + 'px' });
		$('#singingScreenBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': singingTxtY - 3/5*singingTxtY + 'px', 'left' : singingTxtX + 'px'});
		
		//naviArrows
		$('.arrowLeft').css({'top': singingTxtY + 'px', 'padding' : (2.5/100)*screenH + 'px', 'height' : 2.5/100*screenW + 'px' });
		$('.arrowRight').css({'top': singingTxtY + 'px', 'padding' : (2.5/100)*screenH + 'px', 'height' : 2.5/100*screenW + 'px' });
		
		$('#arrowLeftDramatics').css({'top': singingTxtY + 'px', 'padding' : (2.5/100)*screenH + 'px', 'height' : 2.5/100*screenW + 'px', 'left' : 68/100*screenW + 'px'});
		$('#arrowLeftPentathlon').css({'top': singingTxtY + 'px', 'padding' : (2.5/100)*screenH + 'px', 'height' : 2.5/100*screenW + 'px', 'left' : 2/100*screenW + 'px'});
		/*var dancingTxtX = 10/100*screenW;
		var dancingTxtY =  2/100*screenW;*/			//saving variables!!
		$('#dancingTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : singingTxtY + 'px', 'left' : singingTxtX + 'px' });
		$('#dancingScreenBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': singingTxtY - 3/5*singingTxtY + 'px', 'left' : singingTxtX + 'px'});
		
		$('#pcTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : singingTxtY + 'px', 'left' : singingTxtX + 'px' });
		$('#pcScreenBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': singingTxtY - 3/5*singingTxtY + 'px', 'left' : singingTxtX + 'px'});
		
		$('#bandCTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : singingTxtY + 'px', 'left' : singingTxtX + 'px' });
		$('#bandCBackNavi').css({'font-size' : 2/100*screenH + 'px', 'padding' : (1/100)*screenH + 'px', 'top': singingTxtY - 3/5*singingTxtY + 'px', 'left' : singingTxtX + 'px'});
		//$('#bandCBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': 90/100*screenH + 'px', 'left' : 90/100*screenW + 'px'});
		
		var dramaticsTxtX = 75/100*screenW;
		var dramaticsTxtY = 5/100*screenH;
		$('#dramaticsTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : dramaticsTxtY + 'px', 'left' : dramaticsTxtX + 'px' });
		$('#dramaticsBackNavi').css({'font-size' : 1/100*screenW + 'px', 'padding' : (1/100)*screenH + 'px', 'top': dramaticsTxtY - 3/5*dramaticsTxtY + 'px', 'left' : dramaticsTxtX + 'px'});
		
		//1st level
		var level1TxtY =  4/100*screenH;
		var level1TxtX = 10/100*screenW;
		$('#pentathlonTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : level1TxtY + 'px', 'left' : level1TxtX + 'px' });
		$('#pentathlonBackNavi').css({'font-size' : 2/100*screenH + 'px', 'padding' : (1/100)*screenH + 'px', 'top': level1TxtY - 4/5*level1TxtY + 'px', 'left' : level1TxtX + 'px'});
		
		$('#iridescenceTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : level1TxtY + 'px', 'left' : level1TxtX + 'px' });
		$('#iridescenceBackNavi').css({'font-size' : 2/100*screenH + 'px', 'padding' : (1/100)*screenH + 'px', 'top': level1TxtY - 4/5*level1TxtY + 'px', 'left' : level1TxtX + 'px'});
		
		$('#etcTxt').css({'font-size' : 3/100*screenW + 'px', 'padding' : (2.5/100)*screenH + 'px', 'top' : level1TxtY + 'px', 'left' : level1TxtX + 'px' });
		$('#etcBackNavi').css({'font-size' : 2/100*screenH + 'px', 'padding' : (1/100)*screenH + 'px', 'top': level1TxtY - 4/5*level1TxtY + 'px', 'left' : level1TxtX + 'px'});
		
		$('.eventImgContainer').css({'height' : 70/100*screenH + 'px', 'width' : 40/100*screenW + 'px', 'top' : 20/100*screenH + 'px' ,'left' : 5/100 * screenW + 'px'});
		
		$('.eventMatterContainer').css({'font-size' : 1.4/100*screenW + 'px', 'max-height' : 70/100*screenH + 'px','width' : 50/100*screenW +'px', 'top' : 20/100*screenH + 'px', 'left' : 45/100*screenW+'px'});
		//exception
		$('#pentathlonMatterContainer').css({'font-size' : 1.2/100 * screenW + 'px'});
		$('#etcMatterContainer').css({'font-size' : 1.2/100*screenW + 'px', 'max-height' : 80/100*screenH + 'px','width' : 90/100*screenW +'px', 'top' : 16/100*screenH + 'px', 'left' : 5/100*screenW+'px'});
		
		//__________________SPLASH SCREEN_______________________________________________
		$('#splashContainer').css({'font-size': 1.5/100*screenW + 'px', 'top' : 20/100*screenH + 'px', 'left' : 20/100*screenW + 'px' });
		$('#splashHeader').css({'font-size' : 12/100*screenW + 'px' });
		$('#splashHeader sup').css({'font-size' : 2/100*screenW + 'px' });
		$('#splashFooter').css({'font-size' : 1/100*screenW + 'px', 'bottom' : 20 + 'px', 'left' : 38/100*screenW + 'px'});
		
		//___________________HOME PAGE_____________________________________________________
		var aarohiLogo = $('#aarohiLogo');
		
		var logoY = (5/100)*screenH;
		var logoH = (18/100)*screenH;
		$('#aarohiLogo').css({'height' : logoH + 'px', 'top' : logoY + 'px'});
		$('#mainPgContent').css({'top' : 25/100*screenH + 'px', 'left' : 17/100*screenW + 'px', 'width' : 65/100*screenW + 'px', 'height' : 50/100*screenH + 'px', 'font-size': 1.6/100*screenW + 'px'});
		$('#hoboContainer').css({'height' : 50/100*screenH + 'px', 'width': '30%'});
		$('#tickerContainer').css({'width':65/100*screenW + 'px', 'height' : 5/100*screenH + 'px', 'font-size' : 1/100*screenW + 'px'});
		
		//var extNaviY = 30/100*screenH;
		//$('#moreNavi').css({'top' : 40/100*screenH + 'px', 'left' : 20 + 'px'});
		
		$('#extNavi').css({'top' : 20/100*screenH + 'px', 'left' : 0, 'font-size' : 1.25/100*screenW + 'px', 'width' : 12/100*screenW + 'px', 'height' : 55/100*screenH + 'px'});
		$('#mainPgSponsors').css({'top' : 20/100*screenH + 'px', 'left' : 88/100*screenW + 'px', 'width' : 15/100*screenW + 'px', 'height' : 55/100*screenH + 'px'});
		$('#mainPgSponsors DIV').css({'width' : 10.5/100*screenW + 'px', 'padding' : .5/100*screenW + 'px'});
		$('#mainPgSponsors IMG').css({'width' : 10.5/100*screenW + 'px'});
		/*
		$('#eventPgSponsorContainer').css({'left' : 4*screenW + 30/100*screenW + 'px','top' : 2*screenH + 86/100*screenH + 'px','height' : 12/100*screenH + 'px', 'width' : 11/100*screenW + 'px'});
		$('#eventPgSponsorContainer DIV').css({'height' : 10/100*screenH + 'px' ,'width' : 10/100*screenW + 'px', 'padding' : .5/100*screenH + 'px'});
		$('#eventPgSponsorContainer IMG').css({'height' : 10/100*screenH + 'px' ,'width' : 10/100*screenW + 'px'});*/
		
		$('#shareButtons').css({'top': 90/100*screenH + 'px', 'left': 40/100*screenW+'px'});
		
		$('.matterContainer').css({'font-size' : 1.2/100*screenW + 'px'});
		$('#contactUsTable').css({'font-size' : 1.2/100*screenW + 'px'});
		
		//_______________About Us_______________________________
		$('#aboutUsContent, #informalsContent, #workshopContent').css({'height' : 80/100*screenH + 'px', 'width' : 90/100*screenW + 'px', 'top' : 15/100*screenH + 'px', 'left' : 5/100*screenW + 'px'});
		
		
		//________________Etc Page_________________________________
		$('#etcContainer').css({'height' : 80/100*screenH + 'px', 'width' : 90/100*screenW+'px', 'left' : 5/100*screenW + 'px'});
		
		//_________________ProShow Pg______________________________
		$('#proShowContent').css({'height' : 80/100*screenH + 'px', 'width' : 80/100*screenW+'px', 'left' : 15/100*screenW + 'px', 'top' : 15/100*screenH + 'px'});
		$('#proShowPic').css({'height' : 75/100*screenH + 'px'});
		//_________________________________________canvas drawing starts here_______________________________________________________________
		
		
		
		
		var canvas = $('#pathCanvas');
		var context = canvas[0].getContext("2d");
		canvas.attr('height', screenH * 3);
	    canvas.attr('width', screenW * 8);
		
	    var strokeColor = '#a90000';
		
		/*_______Screen 1: Home_______________________*/
		var strokeX = 5*screenW + homeTxtX;
		var strokeXR = 5*screenW + (75/100)*screenW;
		var strokeY = homeTxtY + ((5.5)/100)*screenH;
		var strokeWidth = 3/100*screenW;
		if(enableCanvas)
		{
		/*	context.beginPath();				//line from homeTxt to extNavi
			context.moveTo(strokeX, strokeY);
			context.bezierCurveTo(strokeX-20, strokeY, strokeX - 40, strokeY-20, strokeX - 40, strokeY - 40);
			context.lineTo(strokeX - 40, extNaviY+30);
			context.lineCap = 'round';
			context.lineJoin = 'round';
			context.lineWidth = strokeWidth;
			context.strokeStyle = '#a90000';
			context.stroke();
			context.closePath();
*/
			context.beginPath();
			context.moveTo(strokeX + 30, strokeY);	//some padding here so +30
			context.lineTo(strokeXR, strokeY);
			//context.bezierCurveTo(x2, y2, x2+40, y2, x2+40, y2+40);
			//context.moveTo(x2+40, y2+40);
			//context.lineTo(x2+40, y2+200);
			context.lineCap = 'round';
			context.lineJoin = 'round';
			context.lineWidth = strokeWidth;
			context.strokeStyle = strokeColor;
			context.stroke();
			context.closePath();
			
			newStrokeY = 2*screenH + (6/100)*screenH;		//********************changed to accomodate workshop***************************
			context.beginPath();
			context.moveTo(strokeX + 5/100*screenW, strokeY);
			context.lineTo(strokeX + 5/100*screenW, newStrokeY);
			context.bezierCurveTo(strokeX + 5/100*screenW, newStrokeY, strokeX + 5/100*screenW, newStrokeY + 2/100*screenH, strokeX + 5/100*screenW + 2/100*screenH, newStrokeY + 2/100*screenH);
			context.lineTo(strokeX + 5/100*screenW + 12/100*screenH, newStrokeY + 2/100*screenH);
			newStrokeY = screenH + (8/100)*screenH;
			context.moveTo(strokeX + 5/100*screenW, newStrokeY);
			//context.bezierCurveTo(strokeX + 5/100*screenW, newStrokeY, strokeX + 5/100*screenW, (newStrokeY + 2.5/100*screenW), strokeX + 7/100*screenW, (newStrokeY + 2.5/100*screenW));
			context.lineTo(strokeX + 20/100*screenW, newStrokeY);
			context.lineCap = 'butt';
			context.lineJoin = 'round';
			context.lineWidth = strokeWidth;
			context.strokeStyle = strokeColor;
			context.stroke();
			context.closePath();

		/*__________Screen 2: pro Show_________________*/
		
			context.beginPath();
			context.moveTo(4*screenW + 5/100*screenW, newStrokeY);			//from events to about us
			context.lineTo(7*screenW + 15/100*screenW, (newStrokeY ));		//line goes to about Us
			context.moveTo(4*screenW + 5/100*screenW, newStrokeY);
			context.bezierCurveTo(4*screenW + 5/100*screenW, (newStrokeY ), 4*screenW + 2/100*screenW, (newStrokeY), 4*screenW + 2/100*screenW, (newStrokeY + 4/100*screenW));
			context.lineTo(4*screenW + 2/100*screenW, 2*screenH + 10/100*screenH);			//line goes to singing page
			
			/*context.moveTo(4*screenW + 95/100*screenW, newStrokeY);
			context.lineTo(4*screenW + 95/100*screenW, newStrokeY + 80/100*screenH);
			context.bezierCurveTo(4*screenW + 95/100*screenW, (newStrokeY + 80/100*screenH), 4*screenW + 95/100*screenW, (newStrokeY + 85/100*screenH), 4*screenW + 90/100*screenW, (newStrokeY + 85/100*screenH));
			context.lineTo(4*screenW + 2/100*screenW, newStrokeY + 85/100*screenH);*/
			
			context.lineCap = 'butt';
			context.lineJoin = 'round';
			context.lineWidth = strokeWidth;
			context.strokeStyle = strokeColor;
			context.stroke();
			context.closePath();

			strokeX = 4*screenW + 2/100*screenW;
			strokeY = 2*screenH + 10/100*screenH;
			context.beginPath();
			context.moveTo(strokeX + 10/100*screenW, strokeY);
			context.lineTo(7/100*screenW, strokeY);		//sync with dramaticsTxtX
			context.bezierCurveTo(7/100*screenW, strokeY, 2/100*screenW, strokeY, 2/100*screenW, strokeY - 5/100*screenW);
			context.lineTo(2/100*screenW, screenH + 15/100*screenH);
			context.bezierCurveTo(2/100*screenW, screenH + 15/100*screenH, 2/100*screenW, screenH + 10/100*screenH, 5/100*screenW, screenH + 10/100*screenH);
			context.lineTo(2*screenW + 15/100*screenW, screenH + 10/100*screenH);
			
			context.lineCap = 'butt';
			context.lineJoin = 'round';
			context.lineWidth = strokeWidth;
			context.strokeStyle = strokeColor;
			context.stroke();
			context.closePath();					//this completes line till dramatics events
		}
    }
	
	/*________________________________________________event Listeners______________________________________________________________________*/
	
	eventsBtn_homeNavi.click(function(){gotoEventsScreen();});
	proShowBtn_homeNavi.click(function(){gotoProShowScreen();});
	informalsBtn_homeNavi.click(function(){gotoInformalsScreen();});
	$('#workshopBtn_homeNavi').click(function(){gotoWorkshopScreen();});
	aboutUsBtn_homeNavi.click(function(){gotoAboutUsScreen();});
	
	backToHome_Ilevel.click(function(){backToHome();});
	singingBtn_eventsScreenNavi.click(function(){gotoSingingScreen();});
	dancingBtn_eventsScreenNavi.click(function(){gotoDancingScreen();});
	pcBtn_eventsScreenNavi.click(function(){gotoPcScreen();});
	purpleHazeBtn_eventsScreenNavi.click(function(){gotoPurpleHazeScreen();});
	$('#dramaticsBtn_eventsScreenNavi').click(function(){gotoDramaticsScreen();});
	$('#pentathlonBtn_eventsScreenNavi').click(function(){gotoPentathlonScreen();});
	$('#iridescenceBtn_eventsScreenNavi').click(function(){gotoIridescenceScreen();});
	$('.etcBtn_eventsScreenNavi').click(function(){gotoEtcScreen();});
	
	$('.backToEventsBtnLevel1').click(function(){backToEventsScreenLevel1();});
	
	backToEventsBtn.click(function(){backToEventsScreen();});
	backToHomeBtn_eventsScreen.click(function(){backToEventsScreen(); backToHome();});
	
	$('.arrowLeft').click(function(){naviLeft($(this).offset().left, $(this).offset().top);});
	$('.arrowRight').click(function(){naviRight($(this).offset().left, $(this).offset().top);});
	$('#arrowLeftDramatics').click(function(){naviUp($(this).offset().left, $(this).offset().top);});
	$('#arrowLeftPentathlon').click(function(){naviDown($(this).offset().left, $(this).offset().top);});
	
	$("#wallNavi").fancybox({
	    'autoScale'     	: false,
	    'width'				: 900,
		'height'			: 90/100*screenH,
	    'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'				: 'iframe'
	});
	//navi anim
	/*$(function(){
	    $(".eventsScreenNavi .eventNavi ").each(function(){
		$(this).hover(function(){
			$(this).animate({width: "400px"}, {queue:false, duration:450});
	      },function() {
			  $(this).animate({width: "128px"}, {queue:false, duration:450});
		  });
	    });
	});

		$('.eventNavi').each(function(){
			origW = $(this).width();
			$(this).hover(function(){
				$(this).animate({height: '400px'}, duration);
			},function(){
				$(this).animate({height : '100%'}, duration);
			});
		});
	*/
	/*_____________________________________________event Listener end______________________________________________________________________*/
	
	/*_________________________________________________transition code______________________________________________________________________*/
	function naviLeft(tempX, tempY)
	{
		curX = tempX - tempX%screenW;	// .scrollLeft() doesnt work in FF nd IE so new tweak
		curY = tempY - tempY%screenH;
		//curX = $('body').scrollLeft(); tweak for FF nd IE
		$('html, body').animate({scrollLeft: curX - screenW}, duration);
		loadImg(curX - screenW, curY);
	}
	
	function naviRight(tempX, tempY)
	{
		curX = tempX - tempX%screenW;
		curY = tempY - tempY%screenH;
		//curX = $('body').scrollLeft();	tweak for FF nd IE
		$('html, body').animate({scrollLeft: curX + screenW}, duration);
		loadImg(curX + screenW, curY);
	}
	
	function naviUp(tempX, tempY)
	{
		curX = tempX - tempX%screenW;	// .scrollLeft() doesnt work in FF nd IE so new tweak
		curY = tempY - tempY%screenH;
		//curX = $('body').scrollLeft(); tweak for FF nd IE
		$('html, body').animate({scrollTop: curY - screenH}, duration);
		loadImg(curX, curY - screenH);
	}
	
	function naviDown(tempX, tempY)
	{
		curX = tempX - tempX%screenW;	// .scrollLeft() doesnt work in FF nd IE so new tweak
		curY = tempY - tempY%screenH;
		//curX = $('body').scrollLeft(); tweak for FF nd IE
		$('html, body').animate({scrollTop: curY + screenH}, duration);
		loadImg(curX, curY + screenH);
	}
	
	function loadImg(newScreen, curY)
	{
		
		if(curY == 2*screenH)
		{
			switch(newScreen)
			{
			case 0:
				//$("#dramaticsImgContainer").empty().html('<img src="../images/ajax-loader.gif" />');
				$('#dramaticsImgContainer').css({'background-image' : 'url(images/dramaticsImg.png)'});
				$('#dramaticsMatterContainer').load('AJAXcontent/dramaticsContent.html');
				break;
			case 1*screenW:
				$('#purpleHazeImgContainer').css({'background-image' : 'url(images/purpleHazeImg.png)'});
				$('#purpleHazeMatterContainer').load('AJAXcontent/purpleHazeContent.html');
				break;
			case 2*screenW:
				$('#pcImgContainer').css({'background-image' : 'url(images/cynosureImg.png)'});
				$('#pcMatterContainer').load('AJAXcontent/pcContent.html');
				break;
			case 3*screenW:
				$('#dancingImgContainer').css({'background-image' : 'url(images/dancingImg.png)'});
				$('#dancingMatterContainer').load('AJAXcontent/dancingContent.html');
				break;
			case 4*screenW:
				$('#singingImgContainer').css({'background-image' : 'url(images/singingImg.png)'});
				$('#singingMatterContainer').load('AJAXcontent/singingContent.html');
				break;
			}
			//Sponsor SlideShow
			$('#eventPgSponsorContainer').css({'top' : curY + 86/100*screenH + 'px','left': newScreen + 30/100*screenW + 'px'});
		}
		else if(curY == screenH)
		{
			switch(newScreen)
			{
			case 0:
				$('#pentathlonImgContainer').css({'background-image' : 'url(images/pentathlonImg.png)'});
				$('#pentathlonMatterContainer').load('AJAXcontent/pentathlonContent.html');
				break;
			case 1*screenW:
				$('#iridescenceImgContainer').css({'background-image' : 'url(images/iridescenceImg.png)'});
				$('#iridescenceMatterContainer').load('AJAXcontent/iridescenceContent.html');
				break;
			case 2*screenW:
				$('#etcMatterContainer').load('AJAXcontent/etcContent.html');
				break;
			/*
			case 3*screenW:
				$('#dancingImgContainer').css({'background-image' : 'url(images/dancingImg.png)'});
				break;
			case 4*screenW:
				$('#singingImgContainer').css({'background-image' : 'url(images/singingImg.png)'});
				break;*/
			}
			//Sponsor SlideShow
			$('#eventPgSponsorContainer').css({'top' : curY + 86/100*screenH + 'px','left': newScreen + 30/100*screenW + 'px'});
		}
		 
	}
	
	function backToHome()
	{
		$('html, body').animate({scrollLeft: 5*screenW}, duration);
		$('html, body').animate({scrollTop: '0px'}, duration);
	}
	function gotoEventsScreen()
	{
		$('html, body').animate({scrollTop: screenH}, duration);
		$('html, body').animate({scrollLeft: 4*screenW}, duration);
	}
	function gotoProShowScreen()
	{
		$('html, body').animate({scrollTop: screenH}, duration);
		$('html, body').animate({scrollLeft: 5*screenW}, duration);
	}
	function gotoInformalsScreen()
	{
		$('html, body').animate({scrollTop: screenH}, duration);
		$('html, body').animate({scrollLeft: 6*screenW}, duration);
	}
	function gotoWorkshopScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		//$('html, body').animate({scrollLeft: 6*screenW}, duration);
		$('#workshopContent').load('AJAXcontent/workshopContent.html');
	}
	function gotoAboutUsScreen()
	{
		$('html, body').animate({scrollTop: screenH}, duration);
		$('html, body').animate({scrollLeft: 7*screenW}, duration);
		$('#aboutUsContent').load('AJAXcontent/aboutUs.html');
	}
	function backToEventsScreenLevel1()
	{
		$('html, body').animate({scrollLeft: 0}, duration);
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		backToEventsScreen();
	}
	function backToEventsScreen()
	{
		$('html, body').animate({scrollLeft: 4*screenW}, duration);
		$('html, body').animate({scrollTop: screenH}, duration);
	}
	function gotoSingingScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 4*screenW}, duration);
		$('#singingImgContainer').css({'background-image' : 'url(images/singingImg.png)'});
		$('#singingMatterContainer').load('AJAXcontent/singingContent.html');
		//$('#eventPgSponsorContainer').css({'top' : 2*screenH + 86/100*screenH + 'px', 'left': 4*screenW + 30/100*screenW + 'px'});
	}
	function gotoDancingScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 3*screenW}, duration);
		$('#dancingImgContainer').css({'background-image' : 'url(images/dancingImg.png)'});
		$('#dancingMatterContainer').load('AJAXcontent/dancingContent.html');
		//$('#eventPgSponsorContainer').css({'top' : 2*screenH + 86/100*screenH + 'px', 'left': 3*screenW + 30/100*screenW + 'px'});
	}
	function gotoPcScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 2*screenW}, duration);
		$('#pcImgContainer').css({'background-image' : 'url(images/cynosureImg.png)'});
		$('#pcMatterContainer').load('AJAXcontent/pcContent.html');
		//$('#eventPgSponsorContainer').css({'top' : 2*screenH + 86/100*screenH + 'px', 'left': 2*screenW + 30/100*screenW + 'px'});
	}
	function gotoPurpleHazeScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: screenW}, duration);
		$('#purpleHazeImgContainer').css({'background-image' : 'url(images/purpleHazeImg.png)'});
		$('#purpleHazeMatterContainer').load('AJAXcontent/purpleHazeContent.html');
		//$('#eventPgSponsorContainer').css({'top' : 2*screenH + 86/100*screenH + 'px', 'left': screenW + 30/100*screenW + 'px'});
	}
	function gotoDramaticsScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 0}, duration);
		$('#dramaticsImgContainer').css({'background-image' : 'url(images/dramaticsImg.png)'});
		$('#dramaticsMatterContainer').load('AJAXcontent/dramaticsContent.html');
		//$('#eventPgSponsorContainer').css({'top' : 2*screenH + 86/100*screenH + 'px', 'left': 30/100*screenW + 'px'});
	}
	function gotoPentathlonScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 0}, duration);
		$('html, body').animate({scrollTop: 1*screenH}, duration);
		$('#pentathlonImgContainer').css({'background-image' : 'url(images/pentathlonImg.png)'});
		$('#pentathlonMatterContainer').load('AJAXcontent/pentathlonContent.html');
		//$('#eventPgSponsorContainer').css({'top' : screenH + 86/100*screenH + 'px', 'left': 30/100*screenW + 'px'});
	}
	function gotoIridescenceScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 0}, duration);
		$('html, body').animate({scrollTop: 1*screenH}, duration);
		$('html, body').animate({scrollLeft: screenW}, duration);
		$('#iridescenceImgContainer').css({'background-image' : 'url(images/iridescenceImg.png)'});
		$('#iridescenceMatterContainer').load('AJAXcontent/iridescenceContent.html');
		//$('#eventPgSponsorContainer').css({'top' : screenH + 86/100*screenH + 'px', 'left': screenW + 30/100*screenW + 'px'});
	}
	function gotoEtcScreen()
	{
		$('html, body').animate({scrollTop: 2*screenH}, duration);
		$('html, body').animate({scrollLeft: 0}, duration);
		$('html, body').animate({scrollTop: 1*screenH}, duration);
		$('html, body').animate({scrollLeft: 2*screenW}, duration);
		$('#etcMatterContainer').load('AJAXcontent/etcContent.html');
		//$('#eventPgSponsorContainer').css({'top' : screenH + 86/100*screenH + 'px', 'left': 2*screenW + 30/100*screenW + 'px'});
	}
});

//___________________News Ticker__________________________
$(function () {
    $('#js-news').ticker();
});

/*$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // The speed of the reveal
        ajaxFeed: false,       // Populate jQuery News Ticker via a feed
        feedUrl: false,        // The URL of the feed
	                       // MUST BE ON THE SAME DOMAIN AS THE TICKER
        feedType: 'xml',       // Currently only XML
        htmlFeed: true,        // Populate jQuery News Ticker via HTML
        debugMode: true,       // Show some helpful errors in the console or as alerts
  	                       // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
        controls: true,        // Whether or not to show the jQuery News Ticker controls
        titleText: 'Latest',   // To remove the title set this to an empty String
        displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // The pause on a news item before being replaced
        fadeInSpeed: 600,      // Speed of fade in animation
        fadeOutSpeed: 300      // Speed of fade out animation
    );
});*/		




//_______________sponsors slideshow________________________________
$(function() {
	setInterval( "slideSwitch2()", 3000 );
    setInterval( "slideSwitch()", 3000 );
});
function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

function slideSwitch2() {
    var $active = $('#slideshow2 DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow2 DIV:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow2 DIV:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

/*function eventSlideSwitch() {
    var $active = $('#eventSlideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#eventSlideshow DIV:last');

    var $next =  $active.next().length ? $active.next()
        : $('#eventSlideshow DIV:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
*/