$(window).load(function(){
    var work_detail = $('#work-detail');
    // {{{ work detail gallery
    var work_gallery = $('> .gallery', work_detail),
        work_title = $('> .details > h2', work_detail),
        work_images_container = $('> .images', work_gallery),
        work_images = work_images_container.children();
    if (work_images.length > 1)
    {
        var next = $('<a class="gray">Next</a>'),
            prev = $('<a class="gray">Previous</a>'),
            nav = $("<div><span class='divider'>&nbsp;&nbsp;/&nbsp;&nbsp;</span></div>"),
            counter = $('<span />').data('total', work_images.length);
        counter
            .bind('update', function(e, img_index){
                var el = $(this);
                el.text(img_index + ' OF ' + el.data('total'));
            });
        // {{{ previous action
        prev
            .click(function(){
                var el = $(this);
                if (!el.data('finished'))
                {
                    el.data('finished', true);
                    var img = $('> *:visible', work_images_container).fadeOut('slow');
                    if (img.data('first'))
                    {
                        $('> *:last', work_images_container)
                            .fadeIn('slow', function(){
                                el.data('finished', false);
                            });
                        counter
                            .trigger('update', [ counter.data('total') ]);
                    }
                    else
                    {
                        img.prev()
                            .fadeIn('slow', function(){
                                el.data('finished', false);
                            });
                        counter
                            .trigger('update', [ img.data('index') ]);
                    }
                }
                gTrackEvent('Slideshow','Previous',work_title.text());
            })
            .prependTo(nav);
        // }}}
        // {{{ next action
        next
            .click(function(){
                var el = $(this);
                if (!el.data('finished'))
                {
                    el.data('finished', true);
                    var img = $('> *:visible', work_images_container).fadeOut('slow');
                    if (img.data('last'))
                    {
                        $('> *:first', work_images_container)
                            .fadeIn('slow', function(){
                                el.data('finished', false);
                            });
                        counter
                            .trigger('update', [ 1 ]);
                    }
                    else
                    {
                        img.next()
                            .fadeIn('slow', function(){
                                el.data('finished', false);
                            });
                        counter
                            .trigger('update', [ (parseInt(img.data('index'), 10) + 2) ]);
                    }
                }
                gTrackEvent('Slideshow','Next',work_title.text());
            })
            .appendTo(nav);
        // }}}
        // {{{ image action
        work_images
            .each(function(i){
                var el = $(this);
                if (i === 0)
                {
                    el.data('first', true);
                    var tmp = typeof(el.attr('height')) !== 'undefined' ? parseInt(el.attr('height'), 10) : el.height();
                    work_images_container
                        .height(tmp);
                }
                else
                {
                    el
                    .data('first', false)
                    .data('last', false)
                    .hide();
                    if (i === work_images.length - 1)
                    {
                        el.data('last', true);
                    }
                }
                el
                .css({
                    'cursor': 'pointer',
                    'position': 'absolute',
                    'top': '0px',
                    'left': '0px'
                })
                .click(function(){
                    next.click();
                    gTrackEvent('Slideshow','Image',work_title.text());
                })
                .data('index', i)
                .children()
                    .click(function(){
                        next.click();
                    });
            });
        // }}}
        nav.css({
            position: 'absolute',
            bottom: '0px',
            left: '0px'
        })
        .prepend('<span class="divider">&nbsp;&nbsp;|&nbsp;&nbsp;</span>')
        .prepend(counter.trigger('update', [ 1 ]));
        $('> .gallery-nav', work_gallery)
            .append(nav);
    }
    
    // }}}
    // {{{ work detail related projects
    var work_rp_container = $('> .details > .related-projects', work_detail),
        work_rp = $('> ul > li', work_rp_container),
        work_rp_popup = $("<div class='popup' />").hide().css('opacity', 0);
    work_rp
        .each(function(){
            var el = $(this),
                anchor = $('> a', el),
                popup = work_rp_popup.clone();
            popup
                .text(anchor.attr('title'))
                .click(function(){
                    location.pathname = anchor.attr('href');
                })
                .appendTo(el);
            anchor
                .removeAttr('title');
            el
            .css('position', 'relative')
            .hover(function(){
                popup
                    .show()
                    .fadeTo('slow', 0.8);
            },
            function(){
                popup
                    .hide()
                    .fadeTo(0, 0);
            });
        });

    // }}}
    // {{{ work index
    var work_index = $('#work > .work-index');
    if (work_index.length)
    {
        $.getJSON('/service/work/', function(response){ 
            if (response.success)
            {
                // {{{ work sort/filter
                // {{{ data prep
                work_index
                    .append('<input type="hidden" id="animations" value="out-down" />');
                var sort_menu = $('<ul />').hide(),
                    filter_menu = sort_menu.clone(true),
                    i, sort, menu_close, current_filter, filter_slugs = Array(),
                    skip_hashchange = false,
                    loader_img = $('<img class="loader-img" src="/images/work_loader.gif" />')
                        .css({ 
                            top: '2px',
                            right: '3px',
                            position: 'absolute',
                            verticalAlign: 'middle', 
                            marginLeft: '65px'
                        }),
                    sort_div = $('<div />')
                        .data('enabled', true)
                        .addClass('closed')
                        .click(function(e){
                            var el = $(this);
                            if (el.data('enabled'))
                            {
                                if (!el.data('animating'))
                                {
                                    el.data('animating', true).toggleClass('closed');
                                    $('> ul', el)
                                        .slideToggle('normal', function(){ el.data('animating', false) });
                                }
                            }
                        })
                        .append(loader_img.clone()),
                    filter_div = sort_div.clone(true),
                    sort_options = response.sort_opts,
                    filter_options = response.tags,
                    work_data = response.work_data,
                    items_per_row = 6,
                    min_rows = 4,
                    min_items = min_rows * items_per_row,
                    filter_reset = 'Show All',
                    li_hoverin = function()
                    {
                        $(this).addClass('hover');
                    },
                    li_hoverout = function()
                    {
                        $(this).removeClass('hover');
                    },
                    li_click_filter = function()
                    {
                        var el = $(this);
                        skip_hashchange = true;
                        el.addClass('selected')
                            .siblings()
                            .removeClass('selected')
                            .parent()
                            .hide();
                        work_index_filter(el.text());
                        location.hash = el.data('hash');
                        gTrackEvent('Filter','Clicked',el.text());
                    },
                    li_click_sort = function()
                    {
                        var el = $(this),
                            criteria = el.data('criteria');
                        el.addClass('selected')
                            .siblings()
                            .removeClass('selected')
                            .parent()
                            .hide();
                        if (criteria)
                        {
                            work_index_sort(criteria);
                        }
                        gTrackEvent('Sort','Clicked',el.text());
                    };
                // }}}
                // {{{ create menus
                filter_options.push(filter_reset);
                filter_options.push('__divider__');
                for (i in filter_options)
                {
                    if (filter_options[i] === '__divider__')
                    {
                        $('<li><hr /></li>')
                            .css('cursor', 'default')
                            .appendTo(filter_menu);
                    }
                    else
                    {
                        var hash = filter_options[i] === filter_reset 
                                ? ''
                                : '#' + encodeURIComponent(slugify(filter_options[i]));
                        filter_slugs[slugify(filter_options[i])] = filter_options[i];
                        $('<li>' + filter_options[i] + '</li>')
                            .data('hash', hash)
                            .hover(
                                li_hoverin,
                                li_hoverout
                            )
                            .click(li_click_filter)
                            .appendTo(filter_menu);
                    }
                }
                /*
                for (sort in sort_options)
                {
                    if (sort_options[sort] === '__divider__')
                    {
                        $('<li><hr /></li>')
                            .css('cursor', 'default')
                            .appendTo(sort_menu);
                    }
                    else
                    {
                        $('<li>' + sort_options[sort] + '</li>')
                            .data('criteria', sort)
                            .hover(
                                li_hoverin,
                                li_hoverout
                            )
                            .click(li_click_sort)
                            .appendTo(sort_menu);
                    }
                }
                $('> li', sort_menu)
                    .each(function(){
                        var el = $(this);
                        if (el.text() === 'Featured')
                        {
                            el.addClass('selected').css('color', '#EC008C');
                        }
                    });
                */
                // }}}
                filter_div
                    // .css('margin-right', '16px')
                        .hover(function(){
                            clearTimeout(menu_close);
                        },
                        function(e){
                            var el = $(this);
                            if (el.hasClass('closed'))
                            {
                                return;
                            }
                            menu_close = setTimeout(function(){
                                if (el.data('enabled'))
                                {
                                    if (!el.data('animating'))
                                    {
                                        el.data('animating', true).addClass('closed');
                                        $('> ul', el)
                                            .slideUp('normal', function(){ el.data('animating', false) });
                                    }
                                }
                            }, 1000);
                        })
                    .addClass('filter')
                    .prepend('<p>Filter By</p>')
                    .append(filter_menu)
                    .appendTo('#work > .page-header > .misc');
                /*
                sort_div
                    .addClass('sort')
                    .prepend('<p>Sort By</p>')
                    .append(sort_menu)
                    .appendTo('#work > .page-header > .misc');
                    */
            
                // }}}
                // {{{ transition function
                var transition = function(items, items_hidden)
                {
                    var ic = items.length,
                        hc = items_hidden.length,
                        tc = hc > ic ? hc : ic,
                        rows = Math.ceil(hc / items_per_row),
                        containers = $('> li', work_index),
                        total_items = rows * items_per_row,
                        num_items = min_items > total_items ? min_items : total_items,
                        transition_time = 300,
                        i = 0;

                    skip_hashchange = false;
                    $('#footer').fadeTo('fast', 0);
                    filter_div.data('enabled', false);
                    sort_div.data('enabled', false);
                    $('.misc .loader-img').css('visibility', 'visible');
                    containers
                        .each(function(i){
                            if (i > (num_items - 1))
                            {
                                $(this).hide();
                            }
                            else
                            {
                                $(this).show();
                            }
                        });
                    // {{{ function transition_callback()
                    function transition_callback()
                    {
                        $('#footer').fadeTo('slow', 1);
                        filter_div.data('enabled', true);
                        sort_div.data('enabled', true);
                        $('.misc .loader-img').css('visibility', 'hidden');
                    }
                    // }}}
                    // {{{ function fader(row)
                    function fader(row)
                    {
                        if (row < rows)
                        {
                            var start = row * items_per_row,
                                end = ++row * items_per_row,
                                fading_items = items_hidden.slice(0, items_per_row);
                            items_hidden = items_hidden.slice(items_per_row);
                            fading_items.fadeIn(transition_time, function(i) {
                                if (++start < end)
                                {
                                    if (start === hc)
                                    {
                                        transition_callback();
                                    }
                                    return;
                                }
                                if (start === hc)
                                {
                                    transition_callback();
                                }
                                fader(row);
                            });
                        }
                    }
                    // }}}
                    items.fadeOut(transition_time, function() {
                        $(this).remove();
                        if (++i < ic)
                        {
                            return;
                        }
                        fader(0);
                    });
                    if (hc === 0)
                    {
                        transition_callback();
                    }
                    else if (ic === 0)
                    {
                        setTimeout(function(){
                            fader(0);
                        }, transition_time);
                    }
                };
                // }}}
                // {{{ tag work entries
                var work_items = $('> li > div', work_index),
                    work_reference = work_items.clone(true).data('criteria', ''),
                    work_overlay = $('<div class="overlay" />').hide(),
                    work_count = work_items.length,
                    work_item, work_item_reference, 
                    label, anchor, item_tags, tag, x, t, 
                    tags = [],
                    a_hover_over = function()
                    {
                        $('> .overlay', this)
                            .css('opacity', 0)
                            .show()
                            .fadeTo('slow', 0.8);
                    },
                    a_hover_out = function()
                    {
                        $('> .overlay', this)
                            .hide()
                            .css('opacity', 0);
                    };
            
                for (i = 0; i < work_count; ++i)
                {
                    work_item = $(work_items[i]);
                    work_item_reference = $(work_reference[i]);

                    // border
                    $('> a', work_item_reference)
                        .prepend(work_overlay.clone())
                        .hover(
                            a_hover_over,
                            a_hover_out
                        );
                    label = $('> .hidden', work_item).text();
                    sort = {};
                    if (work_data[label] !== undefined)
                    {
                        for (x in work_data[label].sort)
                        {
                            sort[x] = work_data[label].sort[x];
                        }
                        item_tags = work_data[label].tags;
                        for (t in item_tags)
                        {
                            tag = item_tags[t];
                            if ($.isArray(tags) && $.inArray(tag, tags) == -1)
                            {
                                tags.push(tag);
                            }
                        }
                        work_item
                            .data('name', label)
                            .data('tags', item_tags)
                            .data('sort', sort);
                        work_item_reference
                            .data('name', label)
                            .data('tags', item_tags)
                            .data('sort', sort);
                    }
                }

                // }}}
                // {{{ function work_index_sort(criteria)
                var work_index_sort = function(criteria)
                {
                    var items_view = $('> li', work_index),
                        items = $('> div:visible', items_view),
                        items_temp = [],
                        items_keep = [],
                        x;
                    items.each(function(i){
                        var el = $(this),
                            sort = el.data('sort'),
                            name = el.data('name');
                        if (sort !== undefined)
                        {
                            var order = sort[criteria];
                            items_temp[sort[criteria]] = el.data('name');
                        }
                    });
                    for (x in items_temp)
                    {

                        items_keep.push(items_temp[x]);
                    }
                    work_reference.each(function(i) {
                        var el = $(this),
                            sort = el.data('sort'),
                            copy = copy_work(el),
                            curr_order = $.inArray(el.data('name'), items_keep);
                        if (sort !== undefined)
                        {
                            var order = sort[criteria] + items_keep.length;
                            if (curr_order > -1)
                            {
                                order = curr_order;
                            }
                            $(items_view[order]).append(copy);
                        }
                    });
                    var items_hidden = $('> li > div:hidden', work_index),
                        animation = $('#animations').val();
                    items_hidden.each(function(){
                        var el = $(this);
                        if ($.isArray(items_keep) && $.inArray(el.data('name'), items_keep) == -1)
                        {
                            el.remove();
                        }
                    });
                    work_reference.data('criteria', criteria);
                    transition(items, items_hidden);
                };
                // }}}
                // {{{ function work_index_filter(tag)
                var work_index_filter = function(tag)
                {
                    var items_view = $('> li', work_index),
                        items = $('> div', items_view),
                        items_hidden,
                        animation = $('#animations').val(),
                        j = 0, x;
                    $('> div:hidden', items_view).remove();
                    if (tag == filter_reset)
                    {
                        work_reference.each(function(i) {
                            var el = $(this),
                                item = copy_work(el),
                                order = work_reference.data('criteria').length ? el.data('sort')[work_reference.data('criteria')] : i;
                            $(items_view[order]).append(item);
                        });
                    }
                    else
                    {
                        var items_temp = [],
                            items_keep = [];
                        work_reference.each(function(i) {
                            var el = $(this),
                                criteria = work_reference.data('criteria'),
                                sort = el.data('sort'),
                                tags = el.data('tags'),
                                order = criteria.length ? el.data('sort')[criteria] : j++;
                            if ($.isArray(tags) && $.inArray(tag, tags) > -1)
                            {
                                var copy = copy_work(el);
                                items_temp[order] = copy;
                            }
                        });
                        for (x in items_temp)
                        {
                            items_keep.push(items_temp[x]);
                        }
                        for (x in items_keep)
                        {
                            $(items_view[x]).append(items_keep[x]);
                        }
                    }
                    items_hidden = $('> li > div:hidden', work_index);
                    transition(items, items_hidden);
                };
                // }}}
                // {{{ function copy_work(work)
                var copy_work = function(work)
                {
                    var w = work.clone(true);
                        w.hide();
                        w.data('tags', work.data('tags'));
                        w.data('sort', work.data('sort'));
                        w.data('name', work.data('name'));
                    return w;
                };
                // }}}
                $(window).bind( 'hashchange', function(){
                    var hash = location.hash,
                        filter_hash = decodeURIComponent(hash.replace("#",""));
                    // Iterate over all nav links, setting the "selected" class as-appropriate.
                    $('.misc li')
                        .each(function(){
                            var el = $(this);
                            el[ el.data( 'hash' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
                        });
                    if (!skip_hashchange)
                    {
                        current_filter = filter_hash && filter_hash in filter_slugs
                            ? filter_slugs[filter_hash] : filter_reset;
                        work_index_filter(current_filter);
                    }
                })
                $(window).trigger( 'hashchange' );
            }
            else
            {
                // location.reload();
            }
        });
    }

    // }}}
    // {{{ home page slideshow
    var slideshow = $('#slideshow').data('intervals', 0),
        slides = $('> .slide', slideshow),
        slides_count = slides.length,
        // slide_start = Math.floor(Math.random() * 100) % slides_count,
        required_intervals = 10, // higher interval, higher remaining time accuracy
        slide_animate_delay = 8000 / required_intervals,
        slide_animate = function ()
        {
            var now = slideshow.data('showing'),
                next = now == slides_count - 1 ? 0 : now + 1,
                num_intervals = slideshow.data('intervals');
            if (num_intervals === required_intervals)
            {
                slides.eq(now).fadeOut(1000);
                slides.eq(next).fadeIn(1000);
                slideshow.data('showing', next).data('intervals', 0);
            }
            else
            {
                slideshow.data('intervals', num_intervals + 1);
            }
        },
        interval;
    $('> .slide_flash', slideshow).each(function() {
        swfobject.registerObject($(this).attr('id'), '9.0.115');
    });
    // slides.eq(slide_start).show();
    if (slides_count > 1)
    {
        slideshow.data('showing', 0);
        slideshow.hover(
            function()
            {
                clearInterval(interval);
            }, 
            function()
            {
                interval = setInterval(slide_animate, slide_animate_delay);
            });
        interval = setInterval(slide_animate, slide_animate_delay);
    }
    // }}}
    // {{{ home page featured
    $('#home > .features .image a')
        .each(function () {
            var overlay = $('<div class="overlay" />').css('opacity', 0);
            $(this)
                .append(overlay)
                .mouseover(function () {
                    overlay
                        .css('opacity', 0)
                        .show()
                        .fadeTo('slow', 0.8);
                })
                .mouseout(function () {
                    overlay
                        .hide()
                        .css('opacity', 0);
                });
        });
    // }}}
    // {{{ contact page tracking
    $("#page a[href='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=krate&sll=40.748737,-73.944656&sspn=0.013037,0.016265&ie=UTF8&hq=krate&hnear=&z=16&iwloc=A']")
        .click(function(){
            gTrackEvent('Map','Clicked','Krate');
        });
    $("#page a[href='mailto:studio@kratedesign.com']")
        .click(function(){
            gTrackEvent('Email','Clicked','studio@kratedesign.com');
        });

    // }}}
});