var SERVICE_URL = "service.asmx/",
    filmSlideshow = null,
    filmThumbnailSlideshow = null,
    imageSlideshow = null,
    imageThumbnailSlideshow = null,
    flowplayers = new Array();

$(document).ready(function ()
{
    /* Global
    *********************************************************************************************/
    // Animates « and »
    $(".move-left, .move-right").hover(function ()
    {
        if ($(this).hasClass("move-left"))
            $("span", $(this)).stop().animate({ "left": -6 }, 200);
        else
            $("span", $(this)).stop().animate({ "right": -6 }, 150);
    },
    function ()
    {
        if ($(this).hasClass("move-left"))
            $("span", $(this)).stop().animate({ "left": 0 }, 200);
        else
            $("span", $(this)).stop().animate({ "right": 0 }, 150);
    });

    /* Contact form
    *********************************************************************************************/
    $("input", ".button").hide();
    $("a", ".button").show();

    $(".button a").click(function (evt)
    {
        evt.preventDefault();

        if (validateForm())
        {
            new contact().send($(".textbox-name").val(),
                                $(".textbox-email").val(),
                                $(".textbox-phone").val(),
                                $(".textbox-message").val(),
                                function ()
                                {
                                    $(".contact-form").css({ "height": $(".form").outerHeight() });
                                    $(".form").fadeOut(200, function ()
                                    {
                                        $(".messages").css({ "height": 0 });
                                        //$(".sending").fadeIn(250);            // Sending animation commented out - new version of Jquery does not handle this smoothly.
                                    });
                                },
                                function (val)
                                {
                                    if (val.IsValid)
                                    {
                                        $(".contact-form").css({ "height": $(".contact-form").outerHeight() });
                                        //$(".sending").fadeOut(200, function ()
                                        //{
                                        var h = $(".contact-sidebar").outerHeight();
                                        $(".contact-form").animate({ "height": h }, 500, function ()
                                        {
                                            $(".thank-you").fadeIn(200);
                                        });
                                        //});
                                    }
                                    else
                                    {
                                        //$(".sending").fadeOut(200, function ()
                                        //{
                                        $(".contact-form").css({ "height": "" });
                                        $(".form").fadeIn(200, function ()
                                        {
                                            // Server side error - display an error message.
                                            var m = $('<p class="error-message">' + val.Message + '</p>');
                                            $(".messages").empty()
                                                                .append(m)
                                                                .animate({ "height": $(m).outerHeight() + 20 }, 250, function ()
                                                                {
                                                                    $(m).fadeIn(250);
                                                                });
                                        });
                                        //});
                                    }
                                },
                                function (xhr, st, e)
                                {

                                });
        }
    });

    $(".form .form-element .textbox, .form .form-element .textarea").blur(function ()
    {
        // Name
        if ($(this).attr("id").contains("tboName"))
            validate.name(this);

        // Email
        if ($(this).attr("id").contains("tboEmail"))
            validate.email(this);

        // Phone number
        if ($(this).attr("id").contains("tboPhoneNumber"))
            validate.phoneNumber(this);

        // Message
        if ($(this).attr("id").contains("tboMessage"))
            validate.message(this);
    });

    function validateForm()
    {
        var returnValue = true;

        returnValue = validate.name($(".textbox-name")) && returnValue;
        returnValue = validate.email($(".textbox-email")) && returnValue;
        returnValue = validate.phoneNumber($(".textbox-phone")) && returnValue;
        returnValue = validate.message($(".textbox-message")) && returnValue;

        return returnValue;
    }

    /* Validator
    *******************************************/
    var validate = new validator();
    function validator() { }
    validator.prototype.required = function (element)
    {
        if ($(element).val() == "")
            return false;
        else
            return true;
    }
    validator.prototype.name = function (element)
    {
        var _this = this,
            valid = _this.required(element);
        _this.animate(element, valid, "Please enter your name");
        return valid;
    }
    validator.prototype.email = function (element)
    {
        var _this = this,
            valid = true,
            message = "";

        function validateEmail()
        {
            if (/^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/.test($(element).val()))
                return true;
            else
                return false;
        }

        valid = _this.required(element);
        if (!valid)
            message = "Please enter your email address";
        else
        {
            valid = validateEmail();
            message = "Please enter a valid email address";
        }

        _this.animate(element, valid, message);
        return valid;
    }
    validator.prototype.phoneNumber = function (element)
    {
        var _this = this,
            valid = true,
            message = "";

        if ($(element).val().length > 0)
        {
            if (/^\+?([0-9 ()]+)$/.test($(element).val()))
                valid = true;
            else
                valid = false;
        }

        _this.animate(element, valid, "Your phone number cannot contain letters");
        return valid;
    }
    validator.prototype.message = function (element)
    {
        var _this = this,
            valid = _this.required(element);
        _this.animate(element, _this.required(element), "Please enter a message");
        return valid;
    }
    validator.prototype.animate = function (element, valid, message)
    {
        var _help = $(element).siblings(".help");

        if (valid)
        {
            if ($(element).parent().hasClass("form-element-error"))
            {
                $(element).parent().removeClass("form-element-error");
                _help.animate({ "height": 0 }, 200);
            }
        }
        else
        {
            // If a different message is displayed, quickly fade the message out and in. Otherwise just set the message.
            if (_help.children("p").text() != message)
            {
                if (_help.children("p").text() != "")
                {
                    _help.fadeOut(150, function ()
                    {
                        _help.children("p").text(message);
                        _help.fadeIn(150);
                    });
                }
                else
                    _help.children("p").text(message);
            }
            else
                _help.children("p").text(message);

            // Expand the error message, unless already expanded.
            if (!$(element).parent().hasClass("form-element-error"))
            {
                $(element).parent().addClass("form-element-error");
                _help.animate({ "height": 27 }, 200);
            }
        }
    }

    /* Portfolio thumbnail page
    *********************************************************************************************/
    $(".portfolio .project a").hover(function ()
    {
        //$("img", this).animate({ "borderWidth": 5 }, 200);
    },
    function ()
    {
        //$("img", this).animate({ "borderWidth": 0 }, 100);
    });

    /* Project page
    *********************************************************************************************/
    $(".project .move-left, .project .move-right").hover(function ()
    {
        if ($(this).hasClass("move-left"))
            $("span", $(this)).stop().animate({ "left": -6 }, 200);
        else
            $("span", $(this)).stop().animate({ "right": -6 }, 150);
    },
    function ()
    {
        if ($(this).hasClass("move-left"))
            $("span", $(this)).stop().animate({ "left": 0 }, 200);
        else
            $("span", $(this)).stop().animate({ "right": 0 }, 150);
    });

    // Video
    if ($(".film-slideshow").length > 0)
    {
        filmSlideshow = new projectSlideshow($(".film-slideshow")[0]);
        filmSlideshow.slideshow.transition = "fade";
        filmSlideshow.slideshow.speed = 250;
        filmSlideshow.slideshow.onSlide = stopPlayers;
    }

    // Video thumbnails
    if ($(".film-thumbnail-slideshow").length > 0)
    {
        filmThumbnailSlideshow = new thumbnailSlideshow($(".film-thumbnail-slideshow")[0]);
        filmThumbnailSlideshow.slideshow.transition = "fade";
        filmThumbnailSlideshow.slideshow.speed = 300;
    }

    // Image
    if ($(".image-slideshow").length > 0)
    {
        imageSlideshow = new projectSlideshow($(".image-slideshow")[0], true);
    }

    // Image thumbnails
    if ($(".image-thumbnail-slideshow").length > 0)
    {
        imageThumbnailSlideshow = new thumbnailSlideshow($(".image-thumbnail-slideshow")[0]);
        imageThumbnailSlideshow.slideshow.transition = "fade";
        imageThumbnailSlideshow.slideshow.speed = 300;
    }
});

// Set active slideshow
var activeSlideShow = 'film';
function setActiveSlideShow(type)
{
    switch (type)
    {
        case "film":
            if (activeSlideShow != 'film')
            {
                $(imageSlideshow.slideshow.element).fadeOut(200, function ()
                {
                    $(filmSlideshow.slideshow.element).fadeIn(200);
                });
                activeSlideShow = 'film';
            }
            break;
        case "image":
            if (activeSlideShow != 'image')
            {
                stopPlayers();
                $(filmSlideshow.slideshow.element).fadeOut(200, function ()
                {
                    $(imageSlideshow.slideshow.element).fadeIn(200);
                });
                activeSlideShow = 'image';
            }
            break;
    }
}

// stops all players on the page.
function stopPlayers()
{
    for (var i = 0; i < flowplayers.length; i++)
    {
        if ($f(flowplayers[i]).isPlaying())
            $f(flowplayers[i]).stop();
    }
}