// Constants

var TIP_STYLE = {
    width: 550,
    background: "#ffffff",
    color: "#000000",
    textAlign: "left",
    border: { width: 10, radius: 10, color: "#ff0086" },
    padding: 12,
    tip: true
};

var TIP_RIGHT = {
    position: { corner: { target: "bottomRight", tooltip: "topLeft" }, adjust: { y: 15 } },
    show: { when: { event: "click"} },
    hide: { when: { event: "unfocus"} },
    style: TIP_STYLE
};

var TIP_LEFT = {
    position: { corner: { target: "bottomLeft", tooltip: "topRight" }, adjust: { y: 15 } },
    show: { when: { event: "click"} },
    hide: { when: { event: "unfocus"} },
    style: TIP_STYLE
};


$(document).ready(function() {

    var rootUrl = $("#rootUrl").val();

    // Bind the thumbnail scrollable menu
    $("#thumb-menu").scrollable();

    // Set up smooth scrolling for anchor tags
	$("#thumb-menu a").click(function() {
        var elementClicked = $(this).attr("href");
        var destination = $(elementClicked).offset().top;
        $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1000);
        return false;
    });

    // Thumbnail image transition effects
    $("div.thumbs a").each(function() {
        $(this).click(function(event) {
            event.preventDefault();
            var img = $(this).children("img");
            var divMainImg = $(this).parent().siblings("div.main");

            divMainImg.children("img").fadeOut(200, function() {
                $(this).remove();
                var newImg = img.clone().hide();
                newImg.appendTo(divMainImg).fadeIn(400);
            });
        });
    });

    // Open site links in a new window
    $("a.url").click(function() {
        window.open(this.href);
        return false;
    });

    // Set up contact tip
    var contact = $("#contact-tip").remove();
    var contactTip = $.extend({}, TIP_LEFT, { api: { onShow: bindSendMessage }, content: contact });
    $("#contact").qtip(contactTip);

    // Set up about tip
    var about = $("#about-tip").remove();
    var aboutTip = $.extend({}, TIP_RIGHT, { content: about });
    $("#about").qtip(aboutTip);

    // Bind the send message button
    function bindSendMessage() {
        $("#btnSendMessage").unbind("click");
		$("#btnSendMessage").click(function() {
            if (validateForm()) {
                sendMessage();
            }
        });
    }

	// Returns true if the form is valid
    function validateForm() {
        var name = $("#tbName").val();
        var email = $("#tbEmail").val();
        var message = $("#tbMessage").val();

        $("#name-input").removeClass("error");
        $("#email-input").removeClass("error");
        $("#message-input").removeClass("error");

        if (!validateName(name))
            return false;

        if (!validateEmail(email))
            return false;

        if (!validateMessage(message))
            return false;

        return true;
    }

    function validateName(str) {
        var regex = /^([a-zA-Z\s'-]+){1}$/
        if (str.match(regex) == null) {
            $("#name-input").addClass("error");
            return false;
        }
        return true;
    }

    function validateEmail(str) {
        var regex = /^([a-zA-Z0-9]+([\.+_-][a-zA-Z0-9]+)*)@(([a-zA-Z0-9]+((\.|[-]{1,2})[a-zA-Z0-9]+)*)\.[a-zA-Z]{2,6})$/
        if (str.match(regex) == null) {
            $("#email-input").addClass("error");
            return false;
        }
        return true;
    }

    function validateMessage(str) {
        if (str.length < 10) {
            $("#message-input").addClass("error");
            return false;
        }
        return true;
    }

    // Make ajax call to send the message
	function sendMessage() {
        var name = $("#tbName").val();
        var email = $("#tbEmail").val();
        var message = $("#tbMessage").val();
        var jsonData = { name: name, email: email, message: message };
        var jsonString = JSON.stringify(jsonData);

        $.ajax({
            type: "POST",
            url: rootUrl + "/sendmessage",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: jsonString,
            success: function(data) {
                $("#tbName").val("");
                $("#tbEmail").val("");
                $("#tbMessage").val("");
                $("#contact").qtip("hide");
            }
        });
    }

});