Sexta Igreja - WebSite

by Riderman Sousa

HTML

<div id="wrap">
        <div id="wrap-content">
            <!--[if lt IE 7]> <div style='clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/banners/warning_bar_0010_portuguese.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div> <![endif]-->
            <div id="header">
                <img id="logo-image" alt="Logo Sexta Igreja" src="Images/Logo.jpg" />
                <div id="menu-title">
                    <ul id="menu">
                        <li class="gradient-top"><a href="/Home/nossaigreja">nossa igreja</a></li>
                        <li class="gradient-top"><a href="/Home/mensagens">mensagens</a></li>
                        <li class="gradient-top"><a href="/Home/sociedades">sociedades</a></li>
                        <li class="gradient-top"><a href="/Home/utilidades">utilidades</a></li>
                        <li class="gradient-top"><a href="/Home/contato">contato</a></li>
                    </ul>
                    <img id="title" alt="Sexta Igreja - Belo Horizonte" src="Images/Title.jpg" />
                </div>
            </div>
            <div id="content">
<div id="home-top">
    <div id="home-content">
        <img id="home-cd" alt="CD Povo da Aliança" src="Images/Capa-CD.png" />
    </div>
    <div id="home-buttons">
        <ul class="buttons">
            <li class="gradient-left">
                <div class="button">
                    <a href="#" title="CD Povo da Aliança"><span class="button-title">CD Povo da Aliança</span>
                    <span>Clique e faça o download</span> </a>
                    <p>1</p>
                </div>
            </li>
            <li class="gradient-left">
                <div class="button">
                   ...

CSS

body
{
    font-size: 12px;
    font-family: Calibri, "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    color: #727376;
    background-color: #F5F5F5;
    margin: 0px;
}

h1
{
    color: #C40000;
    font-size:52px;
    padding:0px;
    margin:0px;
}

p
{
    margin:0px;
    padding:1px 0px
}
a
{
    text-decoration:none;
}
img
{
    border:0;
}
/* Main
-----------------------------------------------------------*/
div#wrap
{
    width: 944px;
    height: 863px;
    padding:18px;
    margin:0px auto;
    overflow:auto;
    position:relative;
    background-color: #FEFEFE;
    
    -moz-box-shadow: 2px 0px 12px 0px #373435;
    -webkit-box-shadow: 2px 0px 12px 0px #373435;
    box-shadow: 2px 0px 12px 0px #373435;
    
}

div#content
{
    margin-top:15px;
    clear:both;
}

div#footer
{
    clear:both;
    margin-top:2px;
}

/* Header
-----------------------------------------------------------*/
div#header
{
    border-bottom: 2px solid #BDBFC1;
    overflow:auto;
}
div#header img#logo-image
{
    max-width:180px;
    max-height:227px;
    float:left;
} 
div#header div#menu-title
{
    width:760px;
    margin:0px;
    font-weight:bold;
    float:left;
    text-align:center;
}
div#header div#menu-title img#title
{
    margin:18px auto;
}
/* Menu
-----------------------------------------------------------*/
ul#menu
{
    margin:0px 0px;
    padding:0px 0px 15px;
    border:0px;
    list-style-type:none;
}
ul#menu li
{
    display: inline-block;
    text-align: center;
}
ul#menu li a
{
    text-decoration: none;
    padding:16px 0px;
    margin:0px;
    width:148px;
    display: block;
    color: #FFFFFF;
}
ul#menu li a:hover
{
    font-weight: bold;
    background-color: #757575;
}

/* Page Home
-----------------------------------------------------------*/
div#home-top
{
    background-color: #FFFFCC;
    overflow: auto;
}
div#home-content
{
    float:left;
    max-width:780px;
    overflow:auto;
}
img#home-cd
{
    /*display:inline-block;*/
   ...

JavaScript

$(window).ready(function () {

        var day = $(".agenda > div#days ul > li:first > a");
        SelectDay(day);

        //Agenda Change Day
        $(".agenda > div#days ul > li > a").click(function () {
            SelectDay($(this));
        });

        //Prior day
        $(".agenda > div#days > a:first").click(function () {
            var priorA = $(".agenda > div#days > ul > li > a.current").parent().prev().find("a");
            if (priorA.is("a")) {
                SelectDay(priorA);
            }
            else {
                var lastItem = $(".agenda > div#days > ul > li:last").find("a");
                SelectDay(lastItem);
            }
        });

        //Next day
        $(".agenda > div#days > a:last").click(function () {
            var priorA = $(".agenda > div#days > ul > li > a.current").parent().next().find("a");
            if (priorA.is("a")) {
                SelectDay(priorA);
            }
            else {
                var firstItem = $(".agenda > div#days > ul > li:first").find("a");
                SelectDay(firstItem);
            }
        });

    });

    function SelectDay(day) {

        //Validate
        if (day.is("a") == false) {
            return;
        }

        //Change class current
        $(".agenda > div#days ul > li > a.current").removeClass("current");
        day.addClass("current");
        var selectedDay = day.attr("title");

        //Remove all current tasks
        $(".agenda div#tasks ul li").hide("fast");

        LoadTasks(selectedDay);
    }

    function LoadTasks(day) {
        //Load tasks
        $.ajax({
            type: "GET",
            url: "Weekdays-tasks.xml",
            dataType: "xml",
            success: function (xml) {
                $(xml).find("Weekday").each(function () {

                    var currentDay = $(this).attr('DisplayName');

                    //Change title Weekday
                    $(".agenda > div#tasks > p:first").text(currentDay);

        ...