$(document).ready(function(){

$('.sub').click(function(){
	//Get our current and clicked view
	currentView = $('#bucket').val();
	clickedView = $(this).attr('id');
	// reset styles
	$('.sub').removeClass('nohover');
	$('.sub .title').css('display','none');
	$('.sub .buttons').removeClass('hover');
	// Set stylings on clicked area
	$(this).addClass('nohover');
	$(this).find('.buttons').addClass('hover');
	$(this).find('.title').css('display','block');
	spinnerid = $(this).attr('id');
	$('#editspinner').val(spinnerid);
	// Determine if the clicked view is the current view
	if(clickedView == currentView)
		{
		// If it is we do nothing unless it is our main view
		// if the clicked view is our main view then we reset the site
		if(clickedView == 'spinner1')
			{
			$(this).removeClass('nohover');
			$(this).find('.buttons').removeClass('hover');
			$(this).find('.title').css('display','block');
			$('#mainscreen').css('display','block');
			$('#mainscreen').removeClass('big');
			$('#spinner1').animate({width: '59%',height: '50%'}, 1000);
			$('#spinner2').animate({width:'35%', height: '21%', right: '2%'},1000);
			$('#spinner3').animate({width:'35%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'35%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'35%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'42%', width: '19%', top: '56%', left: '2%'},1000);
			$('#spinner7').animate({height:'42%', width: '18%', left: '23%', top: '56%'},1000);
			$('#spinner8').animate({height:'42%', width: '18%', left: '43%', top: '56%'},1000);
			$('#bucket').val('');
			}
		}
	// If clicked view does not equal current view run this
	else
		{
		// turn off our mainscreen to all ow new data to be loaded and animated in
		$('#mainscreen').css('display','none');
		
		// Loop through animations for bringing each sub area to main area
		if(clickedView == 'spinner1')
			{
			$('#mainscreen').addClass('big');
			$('#spinner1').animate({width: '74%',height: '70%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner2').animate({width:'20%', height: '21%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner2')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner2').animate({width: '52%',height: '70%', right: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner3')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner3').animate({width: '52%', height: '70%', top: '3%', right: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', top: '52%', height: '21%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', top: '77%', height: '21%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner4')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner4').animate({width: '52%', height: '70%', top: '3%', right: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', top: '3%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner5')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner5').animate({width: '52%', height: '70%', top: '3%', right: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', top: '3%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner6')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner6').animate({width: '52%', height: '70%', top: '3%', left: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', top: '3%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner7')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner7').animate({width: '52%', height: '70%', top: '3%', left: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', top: '3%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner8').animate({height:'21%', width: '23%', left: '53%', top: '77%'},1000);
			}
		else if(clickedView == 'spinner8')
			{
			$('#mainscreen').removeClass('big');
			$('#spinner8').animate({width: '52%', height: '70%', top: '3%', left: '24%'}, 1000, function() {$('#mainscreen').fadeTo(1000,1);});
			$('#spinner1').animate({width:'20%', height: '70%'},1000);
			$('#spinner2').animate({width:'20%', height: '21%', top: '3%', right: '2%'},1000);
			$('#spinner3').animate({width:'20%', height: '21%', top: '27%', right: '2%'},1000);
			$('#spinner4').animate({width:'20%', height: '21%', top: '52%', right: '2%'},1000);
			$('#spinner5').animate({width:'20%', height: '21%', top: '77%', right: '2%'},1000);
			$('#spinner6').animate({height:'21%', width: '23%', top: '77%', left: '2%'},1000);
			$('#spinner7').animate({height:'21%', width: '23%', left: '27.5%', top: '77%'},1000);
			}
		$('#bucket').val(clickedView);
		}
	// get our data tag and send ajax call to the server to get our data
	if($(this).find('.buttons a').attr('rel') == 'main')
		{
		href = $(this).find('.buttons a').attr('href');
		$.ajax({
  			url: 'spinner/data.php?p='+href,
  			// Load our data into the main and fullscreen data containers
  			success: function(data) {
  			parts = data.split('||');
    		$('.data').html(parts[4]);
    		if($('#editscreen').length) 
    			{
    			$('#editid').val(parts[0]);
    			$('#editalias').val(parts[1]);
    			$('#edittitle').val(parts[2]);
    			$('#editcontent').val(parts[4]);
				}
  			}
			});
		}
	});


// Hover function for main areas
$('.sub').hover(
  function () {
    	$(this).find('.title').addClass('hover');
  },
  function () {
    	$(this).find('.title').removeClass('hover');
  }
);

// Toggle main screen and full screen functions
$('.buttons a').click(function(){
	if($(this).attr('rel') == 'main')
		{
		if($('#mainscreen').hasClass('hideme'))
			{
			$('#mainscreen').removeClass('hideme');
			$('.sub .title').removeClass('hideme');
			}
		else 
			{
			$('#mainscreen').addClass('hideme');
			$('.sub .title').addClass('hideme');
			}
		}
	if($(this).attr('rel') == 'full')
		{
		$('#fullscreen').addClass('hover');
		$('.sub').fadeTo('fast',.5);
		$('#mainscreen').fadeTo('fast',0);
		}
	if($(this).attr('rel') == 'edit')
		{
		$('#editscreen').addClass('hover');
		$('.sub').fadeTo('fast',.5);
		$('#mainscreen').fadeTo('fast',0);		
		}
	return false;
	});
	
// Close the fullscreen window
$('#closefull').click(function(){
	$('#fullscreen').removeClass('hover');
	$('.sub').fadeTo('fast',1);
	$('#mainscreen').fadeTo('fast',1);
	return false;
	});
	
// Close the edit window
$('#closeedit').click(function(){
	$('#editscreen').removeClass('hover');
	$('.sub').fadeTo('fast',1);
	$('#mainscreen').fadeTo('fast',1);
	return false;
	});

// Submit edit form
$('#editsubmit').click(function(){
	$('#throbber').css('display','block');
	id = $('#editid').val();
	alias = $('#editalias').val();
	title = $('#edittitle').val();
	content = $('#editcontent').val();
	$.post("spinner/data.php", $("#editform").serialize(), function (data){
	if(data == 'success')
		{
    	$('.data').html(content);
    	}
    else
    	{
    	$('.data').html(data);
    	}
	$('#editscreen').removeClass('hover');
	$('.sub').fadeTo('fast',1);
	$('#mainscreen').fadeTo('fast',1);
	$('#throbber').css('display','none');
   	});
	return false;
	});
});