1
\$\begingroup\$

I'm working on the floors of a building, using SVG objects generated by Raphael.js. All objects are clickable and all have different shapes, but all of them have the same actions. The code below is just a little sample. How could I optimize it?

// FLOOR 00    
var budA4_0 = new Raphael(document.getElementById('inter-budynek-A4_0'), 302, 232);
        // A4.0.2   
        var A4_0_2 = budA4_0.path("M306,112v61c0,0-2.5,54-53,59.5s-137.5,0-137.5,0v-92H136v3.5h54.5v5H215v-37H306z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.0.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.0.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.0.2');
                    $('#pietro').text('0');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.0.3   
        var A4_0_3 = budA4_0.path("M115.5,139.875 115.5,233.875 10.5,233.875 10.5,136.875 55.5,136.875 55.625,140z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.0.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.0.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.0.3');
                    $('#pietro').text('0');
                    $('#liczbaPom').text('6');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('123');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            }); 

        // FLOOR 01 
        var budA4_1 = new Raphael(document.getElementById('inter-budynek-A4_1'), 302, 232);
        // A4.1.1   
        var A4_1_1 = budA4_1.path("M0.338,0 L104.338,0 L104.338,80 L79.838,80 L79.838,87.5 L88.338,87.5 L88.338,111.5 L0.338,111.5Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.1.1.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.1.1.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.1.1');
                    $('#pietro').text('1');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.1.2   
        var A4_1_2 = budA4_1.path("M300,111.5 L300,0 L104,0 L104,80 L123.75,80 L123.75,54.75 L165.5,54.75 L165.5,80.125 L196.5,80.125 L214,80.125 L214,85.5 L206,85.5 L206,111.5z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.1.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.1.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.1.2');
                    $('#pietro').text('1');
                    $('#liczbaPom').text('6');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('123');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.1.3   
        var A4_1_3 = budA4_1.path("M106,231h124c0,0,67,6,70-64.625V111.5h-94V142h-21.125v-5.125H165v4.625h-37.5v-5H106V231z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.1.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.1.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.1.3');
                    $('#pietro').text('1');
                    $('#liczbaPom').text('3');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('73');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.1.4   
        var A4_1_4 = budA4_1.path("M88.338,111.5 L0.338,111.5 L0.338,229.884 L106.338,229.884 L106.338,136.5 L88.338,136.5Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.1.4.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.1.6.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.1.4');
                    $('#pietro').text('1');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('98');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });


        // FLOOR 02 
        var budA4_2 = new Raphael(document.getElementById('inter-budynek-A4_2'), 302, 232);
        // A4.2.1   
        var A4_2_1 = budA4_2.path("M0,-0.212 105.167,-0.212 104.833,79.454 91.167,79.454 81.167,79.454 81.167,85.788 89.833,85.788 89.833,111.122 0,111.122z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.2.1.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.2.1.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.2.1');
                    $('#pietro').text('2');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.2.2   
        var A4_2_2 = budA4_2.path("M300,-0.212 105.5,-0.212 105.5,53.788 105.494,81.457 123.167,81.788 123.167,53.788 167.167,53.788 167.167,81.122 195.834,81.122 217.25,81.122 217.25,85.788 207.834,85.788 207.834,111.454 300,111.454z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.2.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.2.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.2.2');
                    $('#pietro').text('2');
                    $('#liczbaPom').text('6');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('123');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.2.3   
        var A4_2_3 = budA4_2.path("M207.167,111.122H300c0,0,0,16.666,0,62.666c-5.577,60-67.5,57.406-67.5,57.406h-126    v-92.739h22v4h37.334v-4H184.5v6h22.667Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.2.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.2.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.2.3');
                    $('#pietro').text('2');
                    $('#liczbaPom').text('3');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('73');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.2.4   
        var A4_2_4 = budA4_2.path("M89.833,111.122 0,111.122 0,231.194 106.5,231.194 106.5,141.788 78.833,141.788 78.833,136.834 89.5,136.834 89.5,111.122Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.2.4.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.2.4.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.2.4');
                    $('#pietro').text('2');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('98');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });


        // FLOOR 03 
        var budA4_3 = new Raphael(document.getElementById('inter-budynek-A4_3'), 302, 232);
        // A4.3.1   
        var A4_3_1 = budA4_3.path("M0,-0.212 105.167,-0.212 104.833,79.454 91.167,79.454 81.167,79.454 81.167,85.788 89.833,85.788 89.833,111.122 0,111.122z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.3.1.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.3.1.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.3.1');
                    $('#pietro').text('3');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.3.2   
        var A4_3_2 = budA4_3.path("M300,-0.212 105.5,-0.212 105.5,53.788 105.494,81.457 123.167,81.788 123.167,53.788 167.167,53.788 167.167,81.122 195.834,81.122 217.25,81.122 217.25,85.788 207.834,85.788 207.834,111.454 300,111.454z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.3.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.3.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.3.2');
                    $('#pietro').text('3');
                    $('#liczbaPom').text('6');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('123');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.3.3   
        var A4_3_3 = budA4_3.path("M207.167,111.122H300c0,0,0,16.666,0,62.666c-5.577,60-67.5,57.406-67.5,57.406h-126    v-92.739h22v4h37.334v-4H184.5v6h22.667Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.3.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.3.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.3.3');
                    $('#pietro').text('3');
                    $('#liczbaPom').text('3');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('73');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.3.4   
        var A4_3_4 = budA4_3.path("M89.833,111.122 0,111.122 0,231.194 106.5,231.194 106.5,141.788 78.833,141.788 78.833,136.834 89.5,136.834 89.5,111.122Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.3.4.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.3.4.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.3.4');
                    $('#pietro').text('3');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('98');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            }); 


        // FLOOR 04
        var budA4_4 = new Raphael(document.getElementById('inter-budynek-A4_4'), 302, 232);
        // A4.4.1   
        var A4_4_1 = budA4_4.path("M0,-0.212 105.167,-0.212 104.833,79.454 91.167,79.454 81.167,79.454 81.167,85.788 89.833,85.788 89.833,111.122 0,111.122z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.4.1.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.4.1.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.4.1');
                    $('#pietro').text('4');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.4.2   
        var A4_4_2 = budA4_4.path("M300,-0.212 105.5,-0.212 105.5,53.788 105.494,81.457 123.167,81.788 123.167,53.788 167.167,53.788 167.167,81.122 195.834,81.122 217.25,81.122 217.25,85.788 207.834,85.788 207.834,111.454 300,111.454z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.4.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.4.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.4.2');
                    $('#pietro').text('4');
                    $('#liczbaPom').text('6');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('123');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.4.3   
        var A4_4_3 = budA4_4.path("M207.167,111.122H300c0,0,0,16.666,0,62.666c-5.577,60-67.5,57.406-67.5,57.406h-126 v-92.739h22v4h37.334v-4H184.5v6h22.667Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.4.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.4.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.4.3');
                    $('#pietro').text('4');
                    $('#liczbaPom').text('3');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('73');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.4.4   
        var A4_4_4 = budA4_4.path("M89.833,111.122 0,111.122 0,231.194 106.5,231.194 106.5,141.788 78.833,141.788 78.833,136.834 89.5,136.834 89.5,111.122Z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.4.4.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.4.4.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.4.4');
                    $('#pietro').text('4');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('98');
                    $('#inter-budynek-wraper ul.info').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            }); 


        // FLOOR 05
        var budA4_5 = new Raphael(document.getElementById('inter-budynek-A4_5'), 302, 232);
        // A4.5.3   
        var A4_5_3 = budA4_5.path("M207.167,111.122H300c0,0,0,16.666,0,62.666c-5.577,60-67.5,57.406-67.5,57.406h-126 v-92.739h22v4h37.334v-4H184.5v6h22.667z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.5.3.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.5.3.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.5.3');
                    $('#pietro').text('5');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            }); 
        // A4.5.1   
        var A4_5_1 = budA4_5.path("M0,0 144.167,0 144.167,54.833 125.833,54.833 125.833,78.667 91.167,79.667 81.167,79.667 81.167,86 89.833,86 89.833,111.333 0,111.333z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.5.1.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.5.1.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.5.1');
                    $('#pietro').text('5');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            }); 
        // A4.5.2   
        var A4_5_2 = budA4_5.path("M300,0 144.5,0 144.5,54 167.167,54 167.167,77.333 195.834,77.333 222.25,77.333 222.25,84 207.834,84 207.834,111.667 300,111.667z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.5.2.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.5.2.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.5.2');
                    $('#pietro').text('5');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });     
        // A4.5.4   
        var A4_5_4 = budA4_5.path("M89.833,111.122 0,111.122 0,231.194 106.5,231.194 106.5,141.788 78.833,141.788 78.833,135.121 89.5,135.121 89.5,111.122z").click(function () { 
                $.fancybox.open([
                    {
                        href : 'img/rzuty/A4/A4.5.4.jpg',
                        openEffect : 'elastic',
                        openSpeed  : 150,
                        closeEffect : 'elastic',
                        closeSpeed  : 150,
                    }
                ], {
                    beforeShow : function() {
                        $('<a class="pdf" href="img/rzuty/A4/A4.5.4.pdf" target="_blank"></a>').appendTo(".fancybox-inner");                    
                    }
                });
            }).mouseover(
            function () {
                    this.animate({"fill-opacity": .5}, 200);
                    $('#lokal').text('A4.5.4');
                    $('#pietro').text('5');
                    $('#liczbaPom').text('4');
                    $('#budynek').text('A4');
                    $('#powierzchnia').text('83');
                    $('#inter-budynek-wraper ul').removeClass('invisible');
                }).mouseout(function () {
                    this.animate({"fill-opacity": .0}, 200);
                    $('#inter-budynek-wraper ul.info').addClass('invisible');
            });
\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

As you noticed, you are violating DRY ( Dont repeat yourself ).

Your code has plenty of repetitions, part of the trick is try and catch them all

  • My assumption is that A4 is the name or number of the building, that should be 1 variable in the whole code
  • My assumption is that you have 6 floors, every floor is initialized the same way
  • My assumption is that per room ( I assume your paths are rooms ), the only different data points are the path, the floor the room belongs to, the nr of the room and the pietro, liczbaPom, and powierzchnia
  • Which brings me to: names must be in English, always, no exceptions!!

You can synthezize all that information into something like this :

var building = 'A4',
     floorCount = 6,
     rooms = 
     [ 
      { floor: 1 , nr: 1 , pietro : 1 , liczbaPom: 4 , powierzchnia : 83,
         path : "M0.338,0 L104.338,0 L104.338,80 L79.838,80 L79.838,87.5 L88.338,87.5 L88.338,111.5 L0.338,111.5Z" },
      { floor: 1 , nr: 2 , pietro : 1 , liczbaPom: 4 , powierzchnia : 83,
         path : "M300,111.5 L300,0 L104,0 L104,80 L123.75,80 L123.75,54.75 L165.5,54.75 L165.5,80.125 L196.5,80.125 L214,80.125 L214,85.5 L206,85.5 L206,111.5z") },
      { floor: 0 , nr: 3 , pietro : 1 , liczbaPom: 4 , powierzchnia : 83,
         path : "M115.5,139.875 115.5,233.875 10.5,233.875 10.5,136.875 55.5,136.875 55.625,140z" },
     ];

Of course you still have to type the other rooms, but the pattern should be obvious.

Creating the floors then becomes a simple for loop :

//This creates each floor
for( var floor = 0 ; floor  < floorCount ; floor ++ ){
  window['bud' + building + '_' + floor] = 
    new Raphael(document.getElementById('inter-budynek-' + building + '_' + floor), 302, 232);
}

And creating each and every room becomes something like this :

rooms.forEach( function(room){

  var varNameFloor = 'bud' + building + '_' + room.floor,
      varNameRoom = varNameFloor + "_" + room.nr,
      buildingName = building + '.' + room.floor + '.' + room.nr,
      fileNameRoot = 'img/rzuty/' + building + '/' + buildingName,
      jpgFile = fileNameRoot + '.jpg',
      pdfFile = fileNameRoot + '.pdf';

  window[varNameRoom] = window[varNameFloor].path( room.path ).click( function(){
    $.fancybox.open([{href : jpgFile , openEffect : 'elastic', openSpeed  : 150, closeEffect : 'elastic', closeSpeed  : 150 }], 
     { beforeShow : function() {
       $('<a class="pdf" href="' + pdfFile + '" target="_blank"></a>').appendTo(".fancybox-inner");                     
      }
    });
  }).mouseover( function (){
    this.animate({"fill-opacity": .5}, 200);
    $('#lokal').text( buildingName );
    $('#pietro').text( room.pietro );
    $('#liczbaPom').text( room.liczbaPom);
    $('#budynek').text('A4');
    $('#powierzchnia').text( room.powierzchnia );
    $('#inter-budynek-wraper ul').removeClass('invisible');
  }).mouseout(function () {
    this.animate({"fill-opacity": .0}, 200);
    $('#inter-budynek-wraper ul.info').addClass('invisible');
  });     
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.