$(document).ready(function()
    {
        $('ul#projects li').live('hover',function(){
            $(this).css({'background-position':'left bottom'});
        });
        $('ul#projects li').live('mouseleave',function(){
            $(this).css({'background-position':'left top'});
        });

        

        // DOMContentLoaded
        $(function() {

            var $filterType = $('#filter a');
            // get the first collection
            var $applications = $('#projects');
            // clone applications to get a second collection
            var $data = $applications.clone();
            $filterType.click(function(e) {
                $('#filter a').removeClass('active');
                $(this).addClass('active');
                if ($(this).attr('id') == 'all') {
                    var $filteredData = $data.find('li');
                } else {
                    var $filteredData = $data.find('li.' + $(this).attr('id') + '');
                }
                // finally, call quicksand
                $applications.quicksand($filteredData, {});

            });

        });




        $(".find-out-more").live('click',function(){
            var api = jQuery("#case-study").qtip("api");
            var id = $(this).parent().attr('data-id');
            var html = $('#' + id +'-detail').html();
            var title = $('li[data-id=' + id + '] h4').first().html();
            api.updateContent(html);
            api.updateTitle(title);
            api.show();
        });
        $("#case-study").qtip({
            content: {
                title: {
                    text: 'Case Study',
                    button: 'Close'
                },
                text: ''
            },
            position: {
                target: $(document.body), // Position it via the document body...
                corner: 'center' // ...at the center of the viewport
            },
            show: {
                when: false//,
            //solo: true // And hide all other tooltips
            },
            hide: false,
            style: {
                width:760,
                height: 500,
                overflow: 'auto',
                padding: '14px',
                border: {
                    width: 9,
                    radius: 9,
                    color: '#666666'
                },
                name: 'light'
            },
            api: {
                beforeShow: function()
                {
                    // Fade in the modal "blanket" using the defined show speed
                    $('#qtip-blanket').fadeIn(this.options.show.effect.length);
                },
                beforeHide: function()
                {
                    // Fade out the modal "blanket" using the defined hide speed
                    $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
                /*INVALID_ELEMENT.focus();
                                        if (INVALID_ELEMENT.type == "text") {
                                                INVALID_ELEMENT.select();
                                        }*/
                }
            }
        });

        // Create the modal backdrop on document load so all modal tooltips can use it
        $('<div id="qtip-blanket">')
        .css({
            position: 'absolute',
            top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
            left: 0,
            height: $(document).height(), // Span the full document height...
            width: '100%', // ...and full width

            opacity: 0.7, // Make it slightly transparent
            backgroundColor: 'black',
            zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
        })
        .appendTo(document.body) // Append to the document body
        .hide(); // Hide it initially
    });