$(function() {
    $('#scrollLeft-detector').mouseenter(function() {
        $('#scrollLeft').show();
    });

     $('#scrollLeft').mouseleave(function() {
        $(this).hide();
    }).click(function() {
        $('#content').scrollTo('-=200', {
             duration: 1000
         });
        return false;
    });

    $('#scrollRight-detector').mouseenter(function() {
        $('#scrollRight').show();
    });
    
    $('#scrollRight').mouseleave(function() {
        $(this).hide();
    }).click(function() {
         $('#content').scrollTo('+=200', {
             duration: 1000
         });
        return false;
    });

    $('#menu-element a').each(function() {
        var a = $(this);
        var img = a.find('img').eq(0);
        var id = img.attr('src').match(/\d+/);
        var title = $('#title-' + id);

        $.preload(['icon-' + id + '-hover', 'icon-' + id + '-active'], {
            base: 'img/',
            ext: '.png'
        });

        var elementAnimate = $('#menu .menu-name span');

        a.mouseenter(function() {
            if (!a.hasClass('active')) {
                img.attr('src', 'img/icon-' + id + '-hover.png');

                elementAnimate.stop();
                elementAnimate.dequeue();
                elementAnimate.hide();
                $('#menu .menu-name span.active').css('opacity', 1).show();

                $('#menu .menu-name span.active').fadeOut(500, function() {
                    title.fadeIn(500);
                });
            }
        }).mouseleave(function() {
            if (!a.hasClass('active')) {
                img.attr('src', 'img/icon-' + id + '.png');

                elementAnimate.stop();
                elementAnimate.dequeue();
                elementAnimate.hide();
                title.css('opacity', 1).show();

                title.fadeOut(500, function() {
                    $('#menu .menu-name span.active').fadeIn(500);
                });
            }
        }).click(function() {
            if (!a.hasClass('active')) {
                loadPage(a.attr('href').replace('#', ''), a, img, id, title);
            }
        });
    });
    
    loadPage();
});

function loadPage(page, linkObj, imageObj, imageId, titleObj)
{
    if (page == undefined) {
        var hash = window.location.hash;
    
        if (hash.length == 0) {
            linkObj = $('a[href=\'#websites\']').eq(0);
            linkObj.addClass('active');
        } else {
            linkObj = $('a[href=\'' + hash  + '\']');

            if (linkObj.length == 0) {
                alert('Podana strona nie istnieje');
                return false;
            } else {
                linkObj = linkObj.eq(0);
            }
        }

        page = linkObj.attr('href').replace('#', '');
        var imageObj = linkObj.find('img').eq(0);
        var imageId = imageObj.attr('src').match(/\d+/);
        var titleObj = $('#title-' + imageId);

        linkObj.addClass('active');
        titleObj.addClass('active').show();
    }

    $('#content').empty().load('categories/' + page + '.html', function() {
        var activeImage = $('#menu-element a.active img');

        activeImage.attr('src', activeImage.attr('src').replace('-active', ''));
        
        $('#menu-element a.active').removeClass('active');
        $('#menu .menu-name span').removeClass('active');

        linkObj.addClass('active');
        titleObj.addClass('active');

        imageObj.attr('src', 'img/icon-' + imageId + '-active.png');
    });
}