$(document).ready(function() {

    /* Style active category link */
    $('ul#menu a').each(function(){
        // Categories
        if ($(this).attr('href').substr(-1, 1) == $('span#category').text()) {
            $(this).addClass('activeCategory');
        }
        // Guestbook & Impressum
        var category = $('span#category').text();
        if (category == 'guestbook' || category == 'showImpressum') {
            if ($(this).attr('href').indexOf(category) > 0) {
                $(this).addClass('activeCategory');
            }
        }
        // Information
        if (category == 'context=gallery&action=show') {
            if ($(this).attr('href').indexOf(category) > 0
                && $(this).attr('href').indexOf('showImpressum') == -1) {
                $(this).addClass('activeCategory');
            }
        }
    });



/*
 * SCALING SITE & AREAS
 */

    var wrapper = $('section#wrapper');
    var height  = wrapper.innerHeight();
    var width   = wrapper.innerWidth();

    var tHeight = 0.15 * height;
    var mHeight = 0.7 * height;
    var bHeight = 0.15 * height;

    var lWidth  = 0.2 * width;
    var mWidth  = 0.6 * width;
    var rWidth  = 0.2 * width;

    var header          = $('section#header');
    var headerArea      = $('div#headerArea');

    var navigation      = $('section#navigation');
    var navigationArea  = $('div#navigationArea');

    var display         = $('section#display');
    var displayArea     = $('div#displayArea');

    var information     = $('section#information');
    var informationArea = $('div#informationArea');

    var footer          = $('section#footer');
    var footerArea      = $('div#footerArea');

    var zoom            = $('div#zoom');

    var headerAreaHeight      = tHeight - (header.outerHeight() - headerArea.innerHeight());
    var navigationAreaHeight  = mHeight - (navigation.outerHeight() - navigationArea.innerHeight());
    var displayAreaHeight     = mHeight - (display.outerHeight() - displayArea.innerHeight());
    var informationAreaHeight = mHeight - (information.outerHeight() - informationArea.innerHeight());
    var footerAreaHeight      = bHeight - (footer.outerHeight() - footerArea.innerHeight());

    var navigationAreaWidth   = lWidth - (navigation.outerWidth() - navigationArea.innerWidth());
    var displayAreaWidth      = mWidth - (display.outerWidth() - displayArea.innerWidth());
    var informationAreaWidth  = rWidth - (information.outerWidth() - informationArea.innerWidth());



/*
 * Writing into CSS
 */

    headerArea.css('height', headerAreaHeight);

    navigationArea.css({
        'height' : navigationAreaHeight,
        'width'  : navigationAreaWidth 
    });
    navigation.css('top', tHeight);
    
    displayArea.css({
        'height': displayAreaHeight,
        'width' : displayAreaWidth
    });

    display.css({
        'top'  : tHeight,
        'left' : lWidth
    });

    informationArea.css({
        'height'  : informationAreaHeight,
        'width'   : informationAreaWidth
    });
    information.css({
        'top'  : tHeight,
        'left' : lWidth + mWidth
    })

    footerArea.css('height', footerAreaHeight);

/*
 * Adjusting menu-button image size
 */

    var menuLi = $('ul#menu li');
    $('ul#menu a li img').each(function(){
        $(this).css('width', menuLi.width());
    });


/*
 * ADJUSTING GALLERY TITLE & LOGO
 */

    var galleryTitle = $('div#galleryTitle');
    var titleText = $('div#galleryTitle div');
    var logo = $('img#logo');

    galleryTitle.css({
        'margin-top' : (headerAreaHeight - galleryTitle.height()) / 2
    });
    logo.css({
        'margin-top' : (galleryTitle.height() - logo.height()) / 2
    });
    titleText.css({
        'margin-top' : (galleryTitle.height() - titleText.height()) / 2
    });


/*
 * ADJUSTING COPYRIGHTINFO IN FOOTER
 */

    var copyrightInfo = $('div#copyrightInfo');

    copyrightInfo.css({
        'margin-top' : (footerAreaHeight - copyrightInfo.height()) / 2
    });


    var zoomWidth = informationAreaWidth;
    zoom.css({
        'width'  : zoomWidth,
        'height' : zoomWidth,
        'margin-top': (information.innerWidth() - informationAreaWidth) / 2,
        'margin-right': (information.innerWidth() - informationAreaWidth) / 2
    });
/*
 * SCALING displayCenterBox
 */

    var displayCenterBox    = $('div#displayCenterBox');
    var displayCenterBoxTop = (displayAreaHeight - displayCenterBox.outerHeight()) / 2;

/*
 * Writing into CSS
 */

    displayCenterBox.css('top', displayCenterBoxTop);



/*
 * Resizing displayed picture
 */

    var pictureArea = $('div#picture');
    var pictureLink = $('a#pictureLink');
    var optionPanel = $('div#optionPanel');
    /*var picture     = $('div#picture img');*/
    var picture       = $('img#actualPicture');

    pictureArea.hover(function(){
        optionPanel.fadeIn(100);
    }, function(){
        optionPanel.fadeOut(100);
    });

    /* Image height = 95% of displayArea */
    picture.css({
        'height' : 0.95 * displayAreaHeight
    });

    /* Height difference between image and displayArea */
    var diff = displayAreaHeight - picture.height();

    /*picture.css('margin-top', diff / 2);*/
    $('div#wrap').css('margin-top', diff / 2);

/*
 * Adjusting background color for picture
 */

    var bgcolor = $('span#bgcolor').html();
    if (bgcolor != '') {
        displayArea.css({
            'background-color' : '#' + bgcolor,
            'background-image' : 'none'
        });
    }

/*
 * Reading message and showing message box
 */

    var message = $('section#message div').html();
    if (message != '') {
        $('section#message').fadeIn(1000);
    } else {
        $('section#message').hide();
    }


/*
 * Rotating picture when clicking
 */

    var pictureHeight = picture.height();
    var pictureWidth = picture.width();

    /* Calculating scaling factor */
    var factor = pictureHeight / pictureWidth;

    /* Rotate and resize picture */
    var x = 0;
    $('div#rotateRight').click(function(){
        x++;
        picture.animate({
            rotate : '+=90deg'
        });
        var scalingValue = x == 1 || x == 3 ? factor : 1;
        picture.animate({
            scale  : scalingValue
        });

        if (x == 4) {
            x = 0;
        }
    });
    $('div#rotateLeft').click(function(){
        x--;
        if (x == -1) x = 3;
        picture.animate({
            rotate : '-=90deg'
        });
        var scalingValue = x == 1 || x == 3 ? factor : 1;
        picture.animate({
            scale  : scalingValue
        });
    });

    $('div.option').hover(function(){
        $(this).removeClass().addClass('optionHover')
    }, function(){
        $(this).removeClass().addClass('option');
    });


/*
 * Picture navigation functions
 */

    var forwLink = $('div#forward a');
    var backLink = $('div#backward a');
    var forwUrl  = $('div#forward a').attr('href');
    var backUrl  = $('div#backward a').attr('href');
    var pic  = $('a#pictureLink');

    forwLink.click(function(){
        pic.animate({
            left: '-=1000'
        }, 300);
        document.location = forwUrl;
    });

    backLink.click(function(){
        pic.animate({
            right: '-=1000'
        }, 300);
        document.location = backUrl;
    });


});