var Browser = {
  Version: function() {
    var version = 999;
    if (navigator.appVersion.indexOf("MSIE") != -1)
      version = parseFloat(navigator.appVersion.split("MSIE")[1]);
    return version;
  }
}
$(document).ready(function(){
    // If browser is IE add class 'ie'
    if (Browser.Version() <=8) {
      $('body').addClass('ie');
    }
    if (Browser.Version() <=7) {
      $('body').addClass('ie7');
    }
    
    if (DetailPage == true) {
        var currentPage;
        var firstPhoto;
        var headerTitle = $('.BlockTitle span').html();
        var loadPage;
        
        if(window.location.hash) {
			loadPage = window.location.hash;
			window.location.hash = "#Top";
		}
        
        switch(loadPage) {
			case "#Facilities":
			LoadFacilities();
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			case "#Availability":
			LoadAvailability();
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			case "#Environment":
			LoadEnvironment();
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			case "#Descriptions":
			LoadDescriptions();
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			case "#Media":
			LoadMedia();
			// Resize thumbnails
			var tWidth;
			$('.HouseDetailPhoto img').each(function(){
				tWidth = $(this).parent('.HouseDetailPhoto').width();
				$(this).resizeImage(tWidth);
			});
			$('.HouseDetailPhoto:first').addClass("Clicked");
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			case "#Guestbook":
			LoadGuestbook();
			$('.Navigation a[href='+loadPage+']').addClass('Active');
			break;
			
			default:
			LoadHomepage();
			// Resize thumbnails
			var tWidth;
			$('.HouseDetailPhoto img').each(function(){
				tWidth = $(this).parent('.HouseDetailPhoto').width();
				$(this).resizeImage(tWidth);
			});
			$('.Navigation a[href=#HouseInfo]').addClass('Active');
		}
        
        // Load ExtraServices to Footer
        ShowExtraServices();
        
        // Create header title
        $('.Header').append('<div class="HeaderTitle"><span>' + headerTitle + '</span></div>');
        
        // Set gallery
		CreateGallery();
        
		// Click to make blocks visible
		$('.Navigation a, #Footer a').click(function(){
            
			if($(this).hasClass("Home")) {
				window.location = $(this).attr('href');
				return false;
			}
			if($(this).hasClass("ServiceLogo")) {
				window.open($(this).attr('href'));
				return false;
			}
			
			currentPage = $(this).attr('class');
			$('.PersonalTheme').hide();
			$('.Navigation a').removeClass('Active');
			$('#Content').removeAttr('class');
			$(this).addClass('Active');
            
			if ($(this).hasClass("HouseInfo")) {
				LoadHomepage();
				// Resize thumbnails
				var tWidth;
				$('.HouseDetailPhoto img').each(function(){
					tWidth = $(this).parent('.HouseDetailPhoto').width();
					$(this).resizeImage(tWidth);
				});
				$('.HouseDetailPhoto:first').addClass("Clicked");
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Facilities")) {
				LoadFacilities();
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Availability")) {
				LoadAvailability();
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Environment")) {
				LoadEnvironment();
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Descriptions")) {
				LoadDescriptions();
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Media")) {
				LoadMedia();
				// Resize thumbnails
				var tWidth;
				$('.HouseDetailPhoto img').each(function(){
					tWidth = $(this).parent('.HouseDetailPhoto').width();
					$(this).resizeImage(tWidth);
				});
				$('.HouseDetailPhoto:first').addClass("Clicked");
				location.href = "#Top";
				return false;
			}
			if ($(this).hasClass("Guestbook")) {
				LoadGuestbook();
				location.href = "#Top";
				return false;
			}
		});
    } else {
        var headerTitle = $('.ReceiptHeader').html();
    
        $('#Content').addClass('Reservation');
        
        // Create header title
        $('.Header').append('<div class="HeaderTitle"><span>' + headerTitle + '</span></div>');
        
        $('.Navigation a, #Footer a').click(function(){
			var url = DetailPageUrl + $(this).attr('href');
			location.href = url;
			return false;
        });
    }
});

function ShowExtraServices() {
	var serviceLogo1 = $('#ExtraServices').find('.ServiceLogo:eq(0)');
	var serviceLogo2 = $('#ExtraServices').find('.ServiceLogo:eq(1)');
	var serviceLogo3 = $('#ExtraServices').find('.ServiceLogo:eq(2)');
	
	$('#Footer').append("<div class=\"ServiceLogos\"></div>");
	$('#Footer').find('.ServiceLogos').append(serviceLogo1, serviceLogo2, serviceLogo3);
}

function LoadHomepage() {
    $('#Content').addClass('Homepage');
    $('#IntroBlock').show();
    $('#HouseInfo').show();
    $('#AboutHouseOwner').show();
    $('#HouseRating').show();
    $('#Media').show();
    $('#Environment').show();
    
    var mWidth = $('.EnviromentRight').width();
    var mHeight = $('.EnviromentRight').height();
    $('.TipsMap').width(mWidth);
    $('.TipsMap').height(mHeight);
    
    $('#ComparableHouses').show();
    $('#GallPhotos .HouseDetailPhoto').show();
}

function LoadFacilities() {
    CreateFacilityMenu();
    $('#Content').addClass('Facility');
    $('#HouseInfo').show();
    $('#FacilityMenu').show();
    $('#Facilities').show();
}

function LoadDescriptions() {
    $('#Content').addClass('Descriptions');
    $('#Descriptions').show();
    $('#HouseInfo').show();
}

function LoadAvailability() {
    $('#Content').addClass('Availability');
    $('#Availability').show();
    $('#HouseInfo').show();
}

function LoadMedia() {
    $('#Content').addClass('Media');
    $('#Media').show();
    $('#HouseInfo').show();
    
    CreateGallery("Full");
}

function LoadEnvironment() {
    $('#Content').addClass('Environment');
    $('#Environment').show();
    $('#HouseInfo').show();
    
    var mWidth = $('.EnviromentRight').width();
    var mHeight = $('.EnviromentRight').height();
    $('.TipsMap').width(mWidth);
    $('.TipsMap').height(mHeight);
}

function LoadGuestbook() {
    $('#Content').addClass('Guestbook');
    $('#Guestbook').show();
    $('#HouseInfo').show();
}

var loadedGallery = new Boolean();
var gallDescriptions = new Array();

function CreateGallery(type) {
    if (type == "Full") {
        if (loadedGallery == false) {
            loadedGallery = true;
            // Load gallery page
            $('.GallPhoto img').attr('src', firstPhoto);
            $('#Media').before('<div id="Thumbnails" class="PersonalTheme"></div>');
            $('#GallPhotos .HouseDetailPhoto').clone().appendTo('#Thumbnails');
        }
        
        $('#GallPhotos .HouseDetailPhoto').hide();
        $('#Thumbnails').show();
    } else {
        firstPhoto = $('#GallPhotos img:first').attr('src');
        // Load gallery on home
        $('#GallPhotos').prepend('<span class="GallPhoto" style="overflow:hidden;"><img src="' + firstPhoto + '" /></span>');
        $('#GallPhotos').find('.HouseDetailPhoto').remove().insertAfter('.GallPhoto');
        $('#GallPhotos').append('<div id="GallDescription" style="display: none;"></div>');
        for(i=0; i<$('#GallPhotos').find('.HouseDetailPhotoDesc').length; i++)
        {
            gallDescriptions[i] = $('#GallPhotos').find('.HouseDetailPhotoDesc:eq('+i+')').html();
        }
        $('#GallPhotos table').remove();
    }
    $('.HouseDetailPhoto').click(function(){
        var gUrl = $(this).find("img").attr("src");
        $('.GallPhoto img').attr("src", gUrl);
        $('.HouseDetailPhoto').removeClass("Clicked");
        $(this).addClass("Clicked");
        if (type == "Full") {
            var thisInt = parseInt($('.HouseDetailPhoto').index($(this)));
            $('#GallDescription').html(gallDescriptions[thisInt]);
        }
    });
}

function CreateFacilityMenu() {
    var houseName = $('.BlockTitle span').html();
    var FacilitiesName = $('#Facilities .Title').html();
    var LayoutName = $('#Layout .Title').html();
    
    $('#Content').prepend('<div id="FacilityMenu" class="PersonalTheme"><h2>' + houseName + '</h2><ul><li><a rel="Facilities" class="ActiveFacility">' + FacilitiesName +'</span></li><li><a rel="Layout">' + LayoutName +'</a></li></ul></div>');
    
    $('#FacilityMenu a').click(function(){
        fPage = $(this).attr('rel');
        
        $('#Layout').hide();
        $('#Facilities').hide();
        $('#' + fPage).show();
        $('#FacilityMenu a').removeClass('ActiveFacility');
        $(this).addClass('ActiveFacility');
    });
}

$.fn.resizeImage = function(e) {
    var cHeight = $(this).height();
    var cWidth = $(this).width();
    if(cHeight > cWidth) {
        height = e + 'px';
        width = 'auto';
    } else {
        height = 'auto';
        width = e + 'px';
    }
    return $(this).css({'height': height, 'width': width});
}

function InitCharacterLimiters()
{
	$('.character_limit').each(function(){  
		LimitCharacters($(this));

		// bind on key up event  
		$(this).keyup(function(){
			LimitCharacters($(this));
		});
		
		$(this).keypress(function(){
			LimitCharacters($(this));
		});
		
		$(this).keydown(function(){
			LimitCharacters($(this));
		});				
	});
}

function LimitCharacters(element) {
	// get max number of characters
	var max = element.attr('maxchars');
	
	if (max == undefined) {
		max = 0;
	}
	
	// get current number of characters  
	var length = element.val().length;  
	
	if (length > max) {
		element.val(element.val().substring(0, max));
	}
	
	// get current number of characters  
	length = element.val().length;

	// update characters  left
	element.siblings('div:first').html(max - length);
}