$(document).ready(function () {

    $("a[rel^='prettyPhoto']").prettyPhoto({
        theme: 'facebook',
        default_width: 800,
        default_height: 400

    });

    $.fn.qtip.styles.mystyle = { // Last part is the name of the style
        width: 150,
        padding: 5,
        background: '#821010',
        color: 'white',
        textAlign: 'center',
        border: {
            width: 7,
            radius: 5,
            color: '#821010'
        },
        tip: 'bottomLeft',
        name: 'dark' // Inherit the rest of the attributes from the preset dark style
    }

    $('.ie').qtip({
        content: 'Internet Explorer 8+. Cilck <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">here</a> to download.',
        style: 'mystyle',
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            },
            adjust: { screen: true }
        },
        hide: {
            fixed: true // Make it fixed so it can be hovered over
        }

    });

    $('.firefox').qtip({
        content: 'Firefox 3.0+. Cilck <a href="http://www.mozilla.com/en-US/firefox/personal.html">here</a> to download.',
        style: 'mystyle',
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            },
            adjust: { screen: true }
        },
        hide: {
            fixed: true // Make it fixed so it can be hovered over
        }

    });

    $('.chrome').qtip({
        content: 'Chrome 3.0+. Cilck <a href="http://chrome.google.com">here</a> to download.',
        style: 'mystyle',
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            },
            adjust: { screen: true }
        },
        hide: {
            fixed: true // Make it fixed so it can be hovered over
        }

    });

    $('.safari').qtip({
        content: 'Safari 3.0+. Cilck <a href="http://www.apple.com/safari/">here</a> to download.',
        style: 'mystyle',
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            },
            adjust: { screen: true }
        },
        hide: {
            fixed: true // Make it fixed so it can be hovered over
        }

    });


    $('.mailIconImage').qtip({
        content: 'Join our email newsletter list.',
        style: 'mystyle',
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            },
            adjust: { screen: true }
        }



    });

    $("#DropContainer").css('height', '5px');
    $(".showForm").toggle(
         function () {
             $("#DropContainer").animate({ height: "325px" }, { queue: false, duration: 1700, easing: 'easeOutBounce' })
         },
         function () {
             $("#DropContainer").animate({ height: "5px" }, { queue: false, duration: 1700, easing: 'easeOutBounce' })
         }
    );

    var liftoffTime = new Date("September 18, 2011 14:00:00");
    $("#EasterDetails").countdown({ until: liftoffTime, format: 'dHMS',
        layout: '<ul class="horizList countdownList">{y<}<li class="countItem"><span class="countNumber">{yn}</span> <span class="countLabel">{yl}</span></li>{y>}{o<}<li><span class="countNumber">{on}</span><span class="countLabel">{ol}</span></li>{o>}' +
    '{d<}<li><span class="countNumber">{dn}</span><span class="countLabel">{dl}</span></li>{d>}{h<}<li><span class="countNumber">{hn}</span><span class="countLabel">{hl}</span></li>{h>}' +
    '{m<}<li><span class="countNumber">{mn}</span><span class="countLabel">{ml}</span></li>{m>}{s<}<li><span class="countNumber">{sn}</span><span class="countLabel">{sl}</span></li>{s>}</ul>'
    });

    $("#EasterCountdown2").countdown({ until: liftoffTime, format: 'dHMS',
        layout: '<ul class="horizList countdownList">{y<}<li class="countItem"><span class="countNumber">{yn}</span> <span class="countLabel">{yl}</span></li>{y>}{o<}<li><span class="countNumber">{on}</span><span class="countLabel">{ol}</span></li>{o>}' +
    '{d<}<li><span class="countNumber">{dn}</span><span class="countLabel">{dl}</span></li>{d>}{h<}<li><span class="countNumber">{hn}</span><span class="countLabel">{hl}</span></li>{h>}' +
    '{m<}<li><span class="countNumber">{mn}</span><span class="countLabel">{ml}</span></li>{m>}{s<}<li><span class="countNumber">{sn}</span><span class="countLabel">{sl}</span></li>{s>}</ul>'
    });
});