/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/

$(document).ready(function(){
						   
	$("a.fancy").fancybox({
	
		'frameWidth': 570, 
		'frameHeight':	470

	})
	
	$("a.website").fancybox({
	
		'frameWidth': 620, 
		'frameHeight':	320
	
	})

	//Get the height of the first item  
    $('#mask').css({'height':$('#panel-1').height()});    
      
    //Calculate the total width - sum of all sub-panels width  
    //Width is generated according to the width of #mask * total of sub-panels  
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));  
      
    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)  
    $('#panel div').width($('#mask').width());  
      
    //Get all the links with rel as panel  
    $('a[rel=panel]').click(function () {  
      
        //Get the height of the sub-panel  
        var panelheight = $($(this).attr('href')).height();  
          
        //Set class for the selected item  
        $('a[rel=panel]').removeClass('selected');  
        $(this).addClass('selected');  
          
        //Resize the height  
        $('#mask').animate({'height':panelheight},{queue:false, duration:500});           
          
        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor  
        $('#mask').scrollTo($(this).attr('href'), 800);       
          
        //Discard the link default behavior  
        return false;  
    });  
      
	
	
		
	//global vars
	var inputUser = $("#nick");
	var inputMessage = $("#message");
	var loading = $("#loading");
	var messageList = $(".content > ul");
	
	
	
	//functions
	function updateShoutbox(first){
		
		if(first == true) {
			//just for the fade effect
			messageList.hide();
			loading.fadeIn();
		}
		
		//send the post to shoutbox.php
		$.ajax({
			type: "POST", url: "http://worstmergelaneever.com/system.php", data: "action=update",
			complete: function(data){
				
				messageList.html(data.responseText);
				
				if(first == true) {
					loading.fadeOut();
					messageList.fadeIn(2000);		
				}

				return true;
			}
		});				
	}
	//check if all fields are filled
	function checkForm(){
		if(inputUser.attr("value") && inputMessage.attr("value"))
			return true;
		else
			return false;
	}
	
	//Load for the first time the shoutbox data
	 updateShoutbox(true);
	
	setInterval(function () { updateShoutbox(false) } , 30000);
	
	
	//on submit event
	$("#form").submit(function(){
		if(checkForm()){
			var nick = inputUser.attr("value");
			var message = inputMessage.attr("value");
			//we deactivate submit button while sending
			$("#send").attr({ disabled:true, value:"Sending..." });
			$("#send").blur();
			
			$.ajax({
				type: "POST", url: "system.php", data: "action=insert&nick=" + nick + "&message=" + message,
				complete: function(data){
					
					inputMessage.attr({value: "" });
					
					messageList.html(data.responseText);
					updateShoutbox(true);
					//reactivate the send button
					$("#send").attr({ disabled:false, value:"Shout it!" });
				}
			 });
		}
		else alert("Please fill all fields!");
		//we prevent the refresh of the page after submitting the form
		return false;
	});
});


function popWindow(page,DaName,w,h,scroll) {        
	
	document.getElementById("frame").src = "";
	
	document.getElementById('popOut').innerHTML = '<a href="#reload" onclick="reloadFrame()">Reload Video</a>';
	
	tempWindow = window.open(page,DaName,"scrollbars="+scroll+",resizable=no,width="+w+",height="+h+",status=no,location=no,toolbar=no,menubar=no");
	tempWindow.focus();  
	
	
}

function reloadFrame() {
	
	
	document.getElementById("frame").src = "video.php";
	
	document.getElementById('popOut').innerHTML = '<a href="#reload" onclick="popWindow(\'video.php\',\'Worst Merge Lane Ever\',500,400,\'no\')">Pop Out</a>';
}
	
getTwitters('tweet', { 
  id: 'worstmergelane', 
  count: 5, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '%text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});