$(document).ready(function(){
    $('#Loading').css('left', ($(window).width() - $('#Loading').width()) / 2);
    $('#Loading').css('top', ($(window).height() - $('#Loading').height()) / 2);
    
    $(document).bgStretcher({
	images: ['Images/Background.jpg'], 
	imageWidth: 1024,
	imageHeight: 768
    });

    $('#ClientInformation').hide();

    $('#Logo').css('background-color', '#000');

    $('a').hover(function(){
	$(this).animate({
	    color: '#FFF100'
	}, 200);
    }, function(){
	if(!$(this).hasClass('Current'))
	    $(this).animate({
		color: '#FFFFFF'
	    }, 50);
    });

    $('#Logo').css('top', $(document).height() * 0.20);
    $('#Menu').css('top', $('#Logo').position()['top'] + $('#Logo').height() + 142);
    $('.Page').css('top', $('#Logo').position()['top'] + $('#Logo').height() / 2);

    var CurrentLocation = document.location.toString();
    if(CurrentLocation.match('#'))
	SwitchPage(CurrentLocation.split('#')[1]);
    else{
	$('.Page').fadeOut(1000);
	$('#Menu li').css('opacity', 0);
	document.title = 'LE BORGNE - Accueil'
    }

    $('#Menu li a, .PageHeader a').click(function(){
	SwitchPage($(this).attr('href').split('#')[1]);
    });

    Gallery.Setup();

    SetInputFocusOut($('input[Name="Name"]'), 'PRÉNOM & NOM');
    SetInputFocusOut($('input[Name="Email"]'), 'COURRIEL');
    SetInputFocusOut($('textarea[Name="Message"]'), 'MESSAGE');

    $('.GalleryPrevious').hover(function(){
	$(this).attr('src', 'Images/GalleryPreviousHover.png');
    }, function(){
	$(this).attr('src', 'Images/GalleryPrevious.png');
    });

    $('.GalleryNext').hover(function(){
	$(this).attr('src', 'Images/GalleryNextHover.png');
    }, function(){
	$(this).attr('src', 'Images/GalleryNext.png');
    });
    
    $('#Loading').hide();
});

$(window).load(Resize);
$(window).resize(Resize);

function Resize(){
    $('#Logo').css('top', $(document).height() * 0.20);
    $('#Menu').css('top', $('#Logo').position()['top'] + $('#Logo').height() + 24);
    $('.Page').css('top', $('#Logo').position()['top'] + $('#Logo').height() / 2);

    Gallery.ResizeImages();
    
    $('#Loading').css('left', ($(window).width() - $('#Loading').width()) / 2);
    $('#Loading').css('top', ($(window).height() - $('#Loading').height()) / 2);
}

Gallery = {
    CurrentPage: 0,
    Setup: function(){
	Gallery.Filter();
	
	$('#Gallery li a').click(function(){
	    $(this).parent().addClass('Current');
	    Gallery.Display($(this).attr('href'), $(this).attr('rel'));
	    return false; 
	});
    },
    NextPage: function(){
	if(Gallery.CurrentPage < Math.floor($('#Gallery li').size() / 9)){
	    Gallery.CurrentPage++;
	    Gallery.Filter();
	}
    },
    PrevPage: function(){
	if(Gallery.CurrentPage > 0){
	    Gallery.CurrentPage--;
	    Gallery.Filter();
	}
    },
    Filter: function(){
	$('#Gallery li').hide()
	
	if(Gallery.CurrentPage > 0)
	    $('#Gallery li:gt('+((Gallery.CurrentPage * 9) - 1)+')').filter(function(Index){
		return Index < 9
	    }).fadeIn();
	else
	    $('#Gallery li:lt(9)').fadeIn();
    },
    Display: function(Path, Information){
	var Image = $('<img />').attr('src', Path).addClass('DisplayImage').appendTo($('body'));
	Image.hide();

	$('#ClientInformation .Information').html(Information);

	$('#Loading').fadeIn('slow');

	Image.load(function(){
	    $('#Pages #Realisations').fadeOut();

	    $('#Loading').fadeOut('fast', function(){
		Gallery.ResizeImages();
		$('#Logo').css('background-color', '');
		Image.fadeIn('slow', function(){
		    Gallery.ResizeImages();
		    $('#ClientInformation').fadeIn();
		});
	    });
	});

	Image.click(function(){
	    $('#Pages #Realisations').fadeIn();
	    Gallery.HideDisplays();
	});
    },
    HideDisplays: function(){
	$('#Logo').css('background-color', '#000');
	$('.DisplayImage').fadeOut('slow', function(){
	    $(this).remove();
	});
	$('#ClientInformation').hide();
    },
    NextDisplay: function(){
	var NextDisplay = $('#Gallery li.Current').next();
	if(NextDisplay.size()){

	    $('.DisplayImage').fadeOut('slow', function(){
		$(this).remove();
	    });

	    $('#Gallery li.Current').removeClass('Current');
	    NextDisplay.addClass('Current');
	    Gallery.Display(NextDisplay.find('a').attr('href'), NextDisplay.find('a').attr('rel'));

	}
    },
    PrevDisplay: function(){
	var PrevDisplay = $('#Gallery li.Current').prev();
	if(PrevDisplay.size()){

	    $('.DisplayImage').fadeOut('slow', function(){
		$(this).remove();
	    });

	    $('#Gallery li.Current').removeClass('Current');
	    PrevDisplay.addClass('Current');
	    Gallery.Display(PrevDisplay.find('a').attr('href'), PrevDisplay.find('a').attr('rel'));

	}
    },
    ResizeImages: function(){
	$('.DisplayImage').each(function(){
	    var Ratio = $(this).height() / $(this).width();

	    if(($(window).height() / $(window).width()) > Ratio){
		$(this).height($(window).height());
		$(this).width($(window).height() / Ratio);
	    }else{
		$(this).width($(window).width());
		$(this).height($(window).width() * Ratio);
	    }

	    $(this).css('left', ($(window).width() - $(this).width()) / 2);
	    $(this).css('top', ($(window).height() - $(this).height()) / 2);
	});
    }
}

function SetInputFocusOut(Element, Value){
    if(Element.val() == '')
	Element.val(Value);
    
    Element.focus(function(){
	if($(this).val() == Value)
	    $(this).val('');
    });

    Element.blur(function(){
	if($(this).val() == '')
	    $(this).val(Value);
    });
}

function SwitchPage(Page){
    $('.Page').fadeOut(500);
    $('#'+Page).fadeIn(750);

    if(Page == 'Accueil')
	ShowMenu();
    else
	HideMenu();
    
    TitrePage = Page.replace('-', ' - ');
    TitrePage = TitrePage.replace('Reseaux', 'Réseaux');
    TitrePage = TitrePage.replace('Hebergeurs', 'Hébergeurs');
    
    document.title = 'LE BORGNE - ' + TitrePage;

    Gallery.HideDisplays();
}

function ShowMenu(){
    $('.Page').fadeOut(750);
    
    var Timeout = 500;
    $('#Menu li').each(function(){
	$(this).fadeIn();
	$(this).animate({
	    'opacity': 1
	}, Timeout);
	Timeout += 100;
    });

    Gallery.HideDisplays();
}

function HideMenu(){
    var Timeout = 500;
    $('#Menu li').each(function(){
	$(this).animate({
	    'opacity': 0
	}, Timeout, function(){
	    $(this).hide(500);
	});
	Timeout += 100;
    });
}

function WriteEmail(){
    document.write('<a href="mailto:info'+'@'+'leborgne.ca">info'+'@'+'leborgne.ca</a>');
}

function ValidateContactForm(){
    $('input, textarea').attr('title', '');
    $('input, textarea').removeClass('Error');
    
    if($('input[name="Name"]').val().length < 5 || $('input[name="Name"]').val() == 'PRÉNOM & NOM'){
	SetError($('input[name="Name"]'), 'Ne soyez pas timide, entrer votre prénom et votre nom.');
	return false;
    }
    
    if(!ValidateEmail($('input[name="Email"]').val()) || $('input[name="Email"]').val() == 'COURRIEL'){
	SetError($('input[name="Email"]'), 'Nous vous prions de nous fournir votre courriel. Ne craigniez, nous n\'allons pas revendre votre information.');
	return false;
    }
    
    if($('textarea[name="Message"]').val().length < 15 || $('textarea[name="Message"]').val() == 'MESSAGE'){
	SetError($('textarea[name="Message"]'), 'Ne soyez pas timide, ecrivez nous un message un peu plus long.');
	return false;
    }
    
    return true;
}

function SetError(Element, Error){
    Element.attr('title', Error);
    Element.tipsy({
	trigger: 'focus', 
	gravity: 'w'
    });
    Element.addClass('Error');
    Element.focus();
}

function ValidateEmail(Email){ 
    var EmailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; 
    return EmailPattern.test(Email);
}