var kolo1_1 = ".kolo1_1";
var kolo1_2 = ".kolo1_2";
var kolo1_3 = ".kolo1_3";
var kolo1_4 = ".kolo1_4";
var kolo2_1 = ".kolo2_1";
var kolo2_2 = ".kolo2_2";
var kolo2_3 = ".kolo2_3";
var kolo3_1 = ".kolo3_1";
var kolo3_2 = ".kolo3_2";
var kolo3_3 = ".kolo3_3";
var kolo3_4 = ".kolo3_4";
var kolo3_5 = ".kolo3_5";
var kolo4_1 = ".kolo4_1";
var kolo4_2 = ".kolo4_2";
var kolo4_3 = ".kolo4_3";


function ukryj(kolo) {
    $(".kwadrat").mouseleave(function() {
    $(kolo).animate({
        marginTop: -130,
        marginLeft: 130,
        }, 100, "linear", function() {
        $(kolo).hide(0);
        });
    });
};

function upperLeft(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
        marginTop: -210,
        marginLeft: -10,
        }, 100, "linear");
        });
};

function upper(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
        marginTop: -280,
        marginLeft: 130,
        }, 100, "linear");
        });
};

function upperRight(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
            marginTop: -210,
            marginLeft: 270,
        }, 100, "linear");
        });
};

function lower(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
            marginTop: 20,
            marginLeft: 130,
        }, 100, "linear");
        });
};

function lowerLeft(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
            marginTop: -50,
            marginLeft: -10,
        }, 100, "linear");
        });
};

function lowerRight(kolo) {
    $(kolo).show(0, function(){
    $(kolo).animate({
            marginTop: -50,
            marginLeft: 270,
        }, 100, "linear");
        });
};



/* global $ */
$(document).ready(function(){

/* Pierwsze */

    $(".kolo_1").mouseenter(function(){
        upperLeft(kolo1_1);
        upper(kolo1_2);
        upperRight(kolo1_3);
        lower(kolo1_4);
    });


/* Drugie */

    $(".kolo_2").mouseenter(function(){
        upperLeft(kolo2_1);
        upperRight(kolo2_2);
        lower(kolo2_3);
    });

/* Trzecie */

    $(".kolo_3").mouseenter(function(){
        upperLeft(kolo3_1);
        upper(kolo3_2);
        upperRight(kolo3_3);
        lower(kolo3_4);
    });

/* Czwarte */

    $(".kolo_4").mouseenter(function(){
        upperLeft(kolo4_1);
        upperRight(kolo4_2);
        lower(kolo4_3);
    });

/* Zamknij */

ukryj(kolo1_1);
ukryj(kolo1_2);
ukryj(kolo1_3);
ukryj(kolo1_4);
ukryj(kolo2_1);
ukryj(kolo2_2);
ukryj(kolo2_3);
ukryj(kolo3_1);
ukryj(kolo3_2);
ukryj(kolo3_3);
ukryj(kolo3_4);
ukryj(kolo3_5);
ukryj(kolo4_1);
ukryj(kolo4_2);
ukryj(kolo4_3);

});