/*
 * Pleas specific javascript file.
 *
 * Document   : pleas.js
 *  Created on : 16.5.2010, 0:29:25
 *  Author     : Ontran Technologies s.r.o. http://www.ontran.cz
 *  Description:
 *      Dynamic parts on www.pleas.cz web site.
 *      This file is based on jQuery framework.
 */

$(document).ready(function(){
    setTimeout(function(){
        $('.ready-fadeout').animate({'opacity':0.0}, 800, function(){
            $(this).remove();
        });
    }, 100);
    setTimeout(function(){
        $('.quality-stamp').animate({'width': '132px', 'opacity': 1.0}, 300);
    }, 1000);
    $('div.katalog-presentation-content div.presentation-box div.photo-box a, div.katalog-presentation-content div.presentation-box div.photo-box img.fullsize').click(animateEvent);
    $('div.katalog-presentation-content div.more-info-box img.plus').click(function(){
        $('div.katalog-presentation-content div.presentation-box div.photo-box:first a').click();
    });
    
    
    $('a.target-blank').live('click', function(event){
        event.preventDefault();
        window.open(this.href);
    });
});

var animateEvent = function(evt){
    evt.preventDefault();

    /* stop creating new animation while animating */
    if($('div.presentation-box :animated').length > 0) {
        return;
    }

    var count = $(this).parents('div.photo-box').prevAll('div.photo-box').length;
    if(count > 0) {
        animateGalleryElements(count);
    } else {
        $(this).parents('div.photo-box').find('img.fullsize').each(function(){
            if($(this).data('displayed') == 1) {
                $(this).data('displayed', 0);
                $(this).animate({'opacity': 0}, 'fast', 'linear', function(){
                    $(this).css('display', 'none');
                });
            } else {
                $(this).data('displayed', 1);
                $(this).css({'opacity': 0, 'display': 'block'});
                $(this).animate({'opacity': 1.0}, 'fast', 'linear', function(){

                });
            }

        });
    }
};

function hideBeforeLoad() {
    $(".pre-loading").removeClass('do-not-display').addClass('ready-fadeout');
    $('.quality-stamp').width(100).css('opacity', 0.0);
}
function qualityStampForIe() {
    $("img.quality-stamp").attr('src', '/images/pleas/quality-ie.gif');
}
function animateGalleryElements(numberOfRot) {
    var presentationBox = $('div.presentation-box');
    var duration = 1000;

    var first = presentationBox.find('div.photo-box-1 img.photo');
    var second = presentationBox.find('div.photo-box-2 img.photo');
    var third = presentationBox.find('div.photo-box-3 img.photo');
    var fourth = presentationBox.find('div.photo-box-4 img.photo');
    var fifth = presentationBox.find('div.photo-box-5 img.photo');

    if(numberOfRot == 1) {
        fifth.animate({
            top: fourth.css('top'),
            left: fourth.css('left'),
            width: fourth.css('width')
        }, duration, "swing", function(){

        });
        fourth.animate({
            top: third.css('top'),
            left: third.css('left'),
            width: third.css('width')
        }, duration, "swing", function(){

        });
        third.animate({
            top: second.css('top'),
            left: second.css('left'),
            width: second.css('width')
        }, duration, "swing", function(){

        });
        second.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width')
        }, duration, "swing", function(){

        });
        first.animate({
            opacity: 0.0
        }, duration, "swing", function(){
            setTimeout(function(){
                first.attr('style', '');
                second.attr('style', '');
                third.attr('style', '');
                fourth.attr('style', '');
                fifth.attr('style', '');
                rotateGaleryElements(numberOfRot);
            }, 50);
        });
    }

    if(numberOfRot == 2) {
        fifth.animate({
            top: third.css('top'),
            left: third.css('left'),
            width: third.css('width')
        }, duration, "swing", function(){

        });
        fourth.animate({
            top: second.css('top'),
            left: second.css('left'),
            width: second.css('width')
        }, duration, "swing", function(){

        });
        third.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width')
        }, duration, "swing", function(){

        });
        second.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        first.animate({
            opacity: 0.0
        }, duration, "swing", function(){
            setTimeout(function(){
                first.attr('style', '');
                second.attr('style', '');
                third.attr('style', '');
                fourth.attr('style', '');
                fifth.attr('style', '');
                rotateGaleryElements(numberOfRot);
            }, 50);
        });
    }

    if(numberOfRot == 3) {
        fifth.animate({
            top: second.css('top'),
            left: second.css('left'),
            width: second.css('width')
        }, duration, "swing", function(){

        });
        fourth.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width')
        }, duration, "swing", function(){

        });
        third.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        second.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        first.animate({
            opacity: 0.0
        }, duration, "swing", function(){
            setTimeout(function(){
                first.attr('style', '');
                second.attr('style', '');
                third.attr('style', '');
                fourth.attr('style', '');
                fifth.attr('style', '');
                rotateGaleryElements(numberOfRot);
            }, 50);
        });
    }

    if(numberOfRot == 4) {
        fifth.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width')
        }, duration, "swing", function(){

        });
        fourth.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        third.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        second.animate({
            top: first.css('top'),
            left: first.css('left'),
            width: first.css('width'),
            opacity: 0.0
        }, duration, "swing", function(){

        });
        first.animate({
            opacity: 0.0
        }, duration, "swing", function(){
            setTimeout(function(){
                first.attr('style', '').css('opacity', 1.0);
                second.attr('style', '');
                third.attr('style', '');
                fourth.attr('style', '');
                fifth.attr('style', '');
                rotateGaleryElements(numberOfRot);
            }, 50);
        });
    }
}
function rotateGaleryElements(numberOfRot) {
    var presentationBox = $('div.presentation-box');

    for(var i=0;i<numberOfRot;i++) {
        /* move the first element to the last position */
        var first = presentationBox.find('div.photo-box:first');
        presentationBox.append('\n<div class="photo-box">\n\
                <a href="' + first.find('a:has(img.photo)').attr('href') + '">\n\
                    <img src="' + first.find('a:has(img.photo) img').attr('src') + '"\n\
                         alt="' + first.find('a:has(img.photo) img').attr('alt') + '"\n\
                         title="' + first.find('a:has(img.photo) img').attr('title') + '"\n\
                         class="photo" />\n\
                </a>\n\
                <div class="description-box">\n\
                    <h2 class="label">\n\
                        ' + first.find('div.description-box h2').html() + '\n\
                    </h2>\n\
                    <div class="detail">\n\
                        ' + first.find('div.description-box div.detail').html() + '\n\
                    </div>\n\
                </div>\n\
                <img src="' + first.find('img.fullsize').attr('src') + '"\n\
                     alt="' + first.find('img.fullsize').attr('alt') + '"\n\
                     title="' + first.find('img.fullsize').attr('title') + '"\n\
                     class="fullsize" />\n\
            </div>');

        presentationBox.find('div.photo-box:last a, div.photo-box:last img.fullsize').click(animateEvent);
        first.remove();
    }

    /* relabel classes */
    presentationBox.find('div.photo-box').removeClass().addClass('photo-box').each(function(){
        $(this).addClass('photo-box-' + ($(this).prevAll('div.photo-box').length+1));
    });
}