function navigationPrimary() {
                $('#navigation li').removeClass('hover');
                $('#navigation li a')
                        .css({ opacity: 1.0 })
                        .mouseover(function() {                         
                                $(this).stop().animate(
                                        { opacity: 0.0 }
                                , 500);
                        })
                        .mouseout(function() {
                                $(this).stop().animate(
                                        { opacity: 1.0 }
                                , 800);
                        });
        } 

function navigationSecondary() {
                $('.mini_nav li').removeClass('hover');
                $('.mini_nav li a')
                        .css({ opacity: 1.0 })
                        .mouseover(function() {                         
                                $(this).stop().animate(
                                        { opacity: 0.0 }
                                , 700);
                        })
                        .mouseout(function() {
                                $(this).stop().animate(
                                        { opacity: 1.0 }
                                , 1100);
                        });
			
		}
		

// GALLERY

$(function() {
        
    $('#slideshow').after('<div id="nav" class="nav"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav',
        before: onBefore
    });
    
        function onBefore() {
        $('#title').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow2').after('<div id="nav2" class="nav2"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav2',
        before: onBefore
    });
    
        function onBefore() {
        $('#title2').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow3').after('<div id="nav3" class="nav3"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav3',
        before: onBefore
    });
    
        function onBefore() {
        $('#title3').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow4').after('<div id="nav4" class="nav4"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav4',
        before: onBefore
    });
    
        function onBefore() {
        $('#title4').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow5').after('<div id="nav5" class="nav5"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav5',
        before: onBefore
    });
    
        function onBefore() {
        $('#title5').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow6').after('<div id="nav6" class="nav6"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav6',
        before: onBefore
    });
    
        function onBefore() {
        $('#title6').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow7').after("<div id='nav7' class='nav7'><\/div>").cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav7',
        before: onBefore
    });
    
        function onBefore() {
        $('#title7').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow8').after('<div id="nav8" class="nav8"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav8',
        before: onBefore
    });
    
        function onBefore() {
        $('#title8').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow9').after('<div id="nav9" class="nav9"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav9',
        before: onBefore
    });
    
        function onBefore() {
        $('#title10').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow10').after('<div id="nav10" class="nav10"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav10',
        before: onBefore
    });
    
        function onBefore() {
        $('#title10').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow11').after('<div id="nav11" class="nav11"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav11',
        before: onBefore
    });
    
        function onBefore() {
        $('#title11').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow12').after('<div id="nav12" class="nav12"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav12',
        before: onBefore
    });
    
        function onBefore() {
        $('#title12').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow13').after('<div id="nav13" class="nav13"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav13',
        before: onBefore
    });
    
        function onBefore() {
        $('#title13').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow14').after('<div id="nav14" class="nav14"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav14',
        before: onBefore
    });
    
        function onBefore() {
        $('#title14').html(this.alt);
    }
});


$(function() {
        
    $('#slideshow15').after('<div id="nav15" class="nav15"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav15',
        before: onBefore
    });
    
        function onBefore() {
        $('#title15').html(this.alt);
    }
});

$(function() {
        
    $('#slideshow16').after('<div id="nav16" class="nav16"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav16',
        before: onBefore
    });
    
        function onBefore() {
        $('#title16').html(this.alt);
    }
});

$(function() {
        
    $('#slideshow17').after('<div id="nav17" class="nav17"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav17',
        before: onBefore
    });
    
        function onBefore() {
        $('#title17').html(this.alt);
    }
});

$(function() {
        
    $('#slideshow18').after('<div id="nav18" class="nav18"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav18',
        before: onBefore
    });
    
        function onBefore() {
        $('#title18').html(this.alt);
    }
});

$(function() {
        
    $('#slideshow19').after('<div id="nav19" class="nav19"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav19',
        before: onBefore
    });
    
        function onBefore() {
        $('#title19').html(this.alt);
    }
});

$(function() {
        
    $('#slideshow20').after('<div id="nav20" class="nav20"><\/div>').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav20',
        before: onBefore	
    });
    
        function onBefore() {
        $('#title20').html(this.alt);
    }
});



$(document).ready(function() {
                navigationPrimary();
    			navigationSecondary();
			
				$('img#fenc1').hover(function() {
					$(this).attr("src","images/fencing_on.jpg");
						}, function() {
					$(this).attr("src","images/fencing_up.jpg");
				});

				$('img#trell1').hover(function() {
					$(this).attr("src","images/trellis_on.jpg");
						}, function() {
					$(this).attr("src","images/trellis_up.jpg");
				});
				
					$.easing.drop = function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;};

					// create custom overlay effect for jQuery Overlay
					$.tools.overlay.addEffect("drop",  

					        // loading animation
					        function(done) { 
					                var animateProps = { top: '0', left: '5' };
					                this.getOverlay().animate(animateProps, 0, 'drop', done).show();
					        }, 

					        // closing animation
					        function(done) {
					                var animateProps = {top: '0', left: '5'};
					                this.getOverlay().animate(animateProps, 0, 'drop', function()  {
					                        $(this).hide();
					                        done.call();            
					                });
					        }
					);

					$("a[rel]").overlay({
					        effect: 'drop',
					        expose: '',
					        api: true

					});

					// click on paragraph of class pclose closes overlay

					$(".pclose").click(function () {

					$("a[rel='#mies1']").overlay().close();
					$("a[rel='#mies2']").overlay().close();
					$("a[rel='#mies3']").overlay().close();
					$("a[rel='#mies4']").overlay().close();
					$("a[rel='#mies5']").overlay().close();
					$("a[rel='#mies6']").overlay().close();
					$("a[rel='#mies7']").overlay().close();
					$("a[rel='#mies8']").overlay().close();
					$("a[rel='#mies9']").overlay().close();
					$("a[rel='#mies10']").overlay().close();
					$("a[rel='#mies11']").overlay().close();
					$("a[rel='#mies12']").overlay().close();
					$("a[rel='#mies13']").overlay().close();
					$("a[rel='#mies14']").overlay().close();
					$("a[rel='#mies15']").overlay().close();
					$("a[rel='#mies16']").overlay().close();
					$("a[rel='#mies17']").overlay().close();
					$("a[rel='#mies18']").overlay().close();
					$("a[rel='#mies19']").overlay().close();
					});
				
        });