window.onload = function () {
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            
            var itemsHeight = ul.innerHeight() - container.outerHeight();
            
            $('.slider', container).slider({
                minValue: 0,
                maxValue: itemsHeight,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'top' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('top', ui.value * -1);
                }
            });
        


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

// fade page in


 $('#load').hide();
 $('#load2').fadeTo(2500, 1, function () {
 $('#load2').fadeOut(700, function() {
	        $('#cover').fadeTo(1000, 0);
	        $('#cover').hide(400);
	});
  });


// this sets the first li and the first slickbox as 'on' at load 

		$('.items li').eq(0).addClass('active');
		$('#load').fadeIn(800);
		$('#load').fadeTo(800, 1);
      	$('#load').fadeOut(800, function() {
	            $('.slickbox').eq(0).fadeIn(800);
			$('span').css('opacity', '1');
			$('.slickbox').eq(0).prepend('<div class="nav">');
			$('.z1').eq(0)
				// commented to try out 'prepend' method
				//.before('<div class="nav">')	
				.cycle({ 
					fx: 'fade',
					speed:  500, 
					timeout: 0,
					pager: '.nav'
 					});
				
				});


// fade and toggle boxes and content


$(".items li").each(function (i){

	$('.slickbox').hide();
	$('#load').hide();

      var $match = $('.slickbox').eq(i);
	var $match2 = $('.z1').eq(i);
  

      $(this).click(
         function (){
		$('.nav').remove();
            $('.slickbox').fadeOut(200, 0);
		$('#load').fadeIn(800);
		$('#load').fadeTo(800, 1);
      	$('#load').fadeOut(800, function() {
			$match.fadeIn(800);
			$('span').css('opacity', '1');
			$match.prepend('<div class="nav">');
			$match2
				// commented to try out 'prepend' method
				//.before('<div class="nav">')	
				.cycle({ 
					fx: 'fade',
					speed:  500, 
					timeout: 0,
					pager: '.nav'
 					});

				});
                         // return false;
				}
	    			)
			});



// add-remove class on lists

$(".items li").addClass('notactive');

$('.items li').click(function() {
    $(this).addClass('active');

if ($(this).is('active')) {
    $(this).removeClass('active');
} else {
    $('.items li').removeClass('active');
    $(this).addClass('active');
}
});


// hover the lists

$('.items li').hover(function() {
    $(this).addClass('activeh');
}, function() {
  $(this).removeClass('activeh');
});


// remove border onfocus

$('.items li').click(function() {
  $(this).removeClass('activeh');
});

// });

};

// end