$(function() {
    var container = $('.products-grid');

    var sortProductsBy = (function() {
        var products = $('li', container),
            elems = products.get(),
            lastCriterion = null;

        return function(criterion) {
            if (lastCriterion !== criterion) {
                lastCriterion = criterion;
                elems.sort(function(left, right) {
                    var a = $('span.kind', left).text(), b = $('span.kind', right).text();
                    return b === criterion ? 1 : a === criterion ? -1 : 0;
                });

                products.hide();
                $.each(elems, function(i, product) {
                    $(product).appendTo(container);
                });
                showProducts();
            }
        };
    })();

    $('div#sort a').click(function() {
        sortProductsBy($(this).attr('href').substr(1).toUpperCase());
        return false;
    });

    function showProducts() {
        var products = $('li', container), i = 0, max = products.length, delay = 0;
        function callback() {
            $(products.get(i)).show('fast', function() {
                if (++i < max) {
                    setTimeout(callback, delay);
                }
            });
        }
        setTimeout(callback, delay);
    }

    showProducts();

    $('img[rel]').overlay({
         effect: 'apple',
         expose: '#000',
         top: '20',
         onLoad: function(content) {
            var rel = content.target.getTrigger().attr('rel');
            if (rel) {
                document.location.hash = rel.replace(/#/, '/');
            }
            this.getOverlay().find('a.player').flowplayer(0).load();
        },
        onClose: function(content) {
            document.location.hash = '';
            $f().unload();
        }
    });

    $('a.player').flowplayer('player/flowplayer-3.2.2.swf', {
        screen: {
            bottom: 0
        },
        plugins: {
            controls: {
                url: 'player/flowplayer.controls-3.2.1.swf',
                backgroundColor: 'transparent',
                backgroundGradient: 'none',
                sliderBorder: '1px solid rgba(160,160,160,0.7)',
                volumeSliderColor: '#FFFFFF',
                volumeBorder: '0px solid rgba(160,160,160,0.7)',
                timeColor: '#ffffff',
                durationColor: '#535353',
                tooltipColor: 'rgba(255, 255, 255, 0.7)',
                tooltipTextColor: '#000000',
                sliderColor: '#000000',
                autoHide: 'true'
            },
            viral: {
                url: 'player/flowplayer.viralvideos-3.2.2.swf',
                icons: {
                    overColor: '#000000',
                    livespaces: false
                },
                buttons: {
                    color: '#8a8a8a',
                    overColor: '#383737',
                    fontColor: '#ffffff',
                    lineColor: '#232423'
                },
                canvas: {
                    backgroundColor: '#000000',
                    '.label': {
                        color: '#fefefe',
                        fontWeight: 'bold'
                    },
                    '.title': {
                        color: '#ffffff',
                        fontWeight: 'bold'
                    },
                    '.input': {
                        color: '#ffffff',
                        backgroundColor: '#232423'
                    },
                    '.embed': {
                        color: '#bee0be',
                        backgroundColor: '#000000',
                        fontSize: 6,
                        fontWeight: 'normal'
                    },
                     '.success': {
                          color: '#efd605',
                          fontSize: 10,
                          fontWeight: 'normal'
                      },
                    '.error': {
                        color: '#efd605',
                        backgroundColor: '#000000',
                        fontSize: 10,
                        fontWeight: 'normal'
                    }
                },
                closeButton: {
                    color: '#000000',
                    overColor: '#787777'
                },
                email: {
                    script: './scripts/share.php',
                    texts: {
                        subject: 'Video you might be interested in',
                        template: 'Hallo,<p>{0}<p/><a href="{1}">{1}</a>'
                    }
                },
                share: {
                    orkut: false,
                    digg: false,
                    livespaces: false,
                    bebo: false
                },
                embed: false
            }
        },
        clip: {
            autoPlay: true
        }
    });

    $('#awards, #friends, #contact').click(function(){
         $.scrollTo('100%', 350);
    });

    $('#back').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow'); return false;
    });

    // Page layout
    $('.product-item').borderImage('url("img/preview_bg.png")2 7 3 3', 100);

    $('#container li')
        .animate({'opacity': 1 })
        .hover(function() {
            $(this).animate({ 'opacity': 0.6 });
        }, function() {
            $(this).animate({ 'opacity': 1 });
        });

    var hash = document.location.hash.replace(/\//, '');
    if (hash !== '') {
        setTimeout(function () {
            $('img[rel=' + hash + ']').click();
        }, 1500);
    }
});