Tixi homepage teaser

components.js

/// <reference path="jquery.1.4.2.js" />

jQuery.fn.watermark = function (text) {
    return this
        .addClass("watermark")
        .val(text)
        .focus(function () {
            if ($(this).hasClass("watermark")) {
                $(this)
                    .removeClass("watermark")
                    .val("");
            }
        });
};

jQuery.fn.teaserSlider = function () {
    this.index = 0;
    this.count = 0;
    this.delay = 2500;
    this.moveToNext = function () {
        var teaser = this;

        teaser.index += 1;
        if (teaser.index === teaser.count) teaser.index = 0;
        var leftIndex = teaser.index * 315;

        var $activeImage = $($(".image-panel .images img", teaser)[teaser.index]);

        $(".content-panel h2", teaser)
            .fadeOut(150, function () { $(this).text($activeImage.attr("alt")); })
            .fadeIn(150);

        $(".image-panel .images", teaser)
            .animate({
                marginLeft: '-' + leftIndex + 'px'
            },
            300,
            function () {
                window.setTimeout(
                    function () { teaser.moveToNext(); },
                    teaser.delay);
            });

        teaser.setCredit($activeImage);
    };
    this.setCredit = function ($activeImage) {
        var teaser = this;
        var $credit = $(".image-panel .credit", teaser);
        $credit.empty();
        var activeImageCredit = $activeImage.attr("data-credit");
        if (activeImageCredit != undefined)
            $credit.append(
                $("<a rel='external'>&copy;</a>")
                    .attr("href", activeImageCredit)
            );
    };

    var teaser = this;
    var $images = $(".image-panel .images img", teaser);
    teaser.count = $images.length;
    teaser.setCredit($($images[0]));
    window.setTimeout(function () { teaser.moveToNext(); }, teaser.delay);

    return this;
}

global.js

/// <reference path="jquery.1.4.2.js" />
/// <reference path="components.js" />

$(function () {
    var $homepage = $("#homepage-content");
    if ($homepage.length != 1) return;

    $homepage
        .find("#signup-teaser")
            .teaserSlider()
            .find("#event-title-1")
                .watermark("your event title")
            .end()
            .find("form")
                .submit(function (e) {
                    e.preventDefault();
                    $homepage
                        .find("#signup-teaser")
                            .animate({ left: '-900px' }, 500)
                        .end()
                        .find("#getting-started-step-1")
                            .show()
                            .animate({ left: '0' }, 500);
                });
});

Home.aspx

<%@ Page Language="C#" MasterPageFile="~/tixi/Masters/Default.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="FuelAdvance.Galapagos.WebUI.tixi.Home" EnableViewState="False" Title="" %>
<%@ Register TagPrefix="tixi" TagName="Step1" Src="~/Components/GettingStarted/Step1/Step1Control.ascx" %>
<asp:Content ContentPlaceHolderID="NoFormPlaceHolder" runat="server">
    <div id="homepage-content">
        <div id="signup-teaser">
            <div class="image-panel">
                <span class="images">
                    <img runat="server"
                        src="~/App_Themes/Default/Assets/HomepagePanelTrackDay.jpg"
                        alt="Revving up a day on the track?"
                        data-credit="http://www.flickr.com/photos/pcw/3757400758/sizes/o/" />
                    <img runat="server"
                        src="~/App_Themes/Default/Assets/HomepagePanelGig.jpg"
                        alt="Rocking out a concert?"
                        data-credit="http://www.flickr.com/photos/kenneth_hynek/3469552172/sizes/o/" />
                    <img runat="server"
                        src="~/App_Themes/Default/Assets/HomepagePanelGolf.jpg"
                        alt="Planning a day on the green?"
                        data-credit="http://www.flickr.com/photos/snapeverything/4177871431/sizes/o/" />
                    <img runat="server"
                        src="~/App_Themes/Default/Assets/HomepagePanelWedding.jpg"
                        alt="Something to celebrate?" />
                </span>
                <span class="credit"></span>
            </div>
            <div class="content-panel">
                <form method="get" action="/tixi/GettingStarted/Step1.aspx">
                    <fieldset>
                        <legend>Signup</legend>
                        <h2>Ticketing without the dramas.</h2>
                        <div>
                            <span>tixi.com.au/</span>
                            <label for="event-title-1">Event Title</label>
                            <input id="event-title-1" type="text" />
                        </div>
                        <input type="submit" class="submit" value="Go" />
                    </fieldset>
                </form>
            </div>
        </div>
        <tixi:Step1 runat="server" />
    </div>
</asp:Content>