// execute your scripts when the DOM is ready. this is mostly a good habit
    $(document).ready(function() {
	
	    //set img opacity for slides
	    $('.container img.img1').css('opacity', targetOpacity);
	    
            $(".scrollable_splash").scrollable({circular:true, speed:homeTransitionSpeed}).autoscroll({interval:homePause*1000, autopause:false, autoplay:false}); 
            var api = $('.scrollable_splash').data("scrollable");
    
            // This will activate the full screen background!
            jQuery.fn.fullscreenr({images:homepageimages, api:api});
           
            //initialise
            var container = jQuery("div.scrollable_splash").children().eq(1).children();
            totalItems = container.length;
            numSlides = (container.length -1)/2;
            
            totalToLoad = totalItems + $(".home_overlay").length;
            
            for(var i=0; i<totalItems; i++){
                if(i!=1){
                    container.eq(i).css({opacity:targetOpacity});
                }
            }
            
            var outGoing;
            var inComing;
            api.onBeforeSeek(function(event,index){
                if(Math.abs(index - this.getIndex()) == 1 && this.getIndex() != -1){
                    outGoing = this.getIndex()+1;
                    inComing = index+1;

                    container.eq(outGoing).fadeTo(homeTransitionSpeed, targetOpacity);
                    container.eq(inComing).fadeTo(homeTransitionSpeed, 1);
                    
                    //make sure all other items are dimmed
                    for(i=0; i<totalItems; i++){
                        if(i!=outGoing && i!=inComing &&i!=outGoing+numSlides && i!=inComing+numSlides){
                            container.eq(i).css({opacity:targetOpacity});
                        }
                    }
                    
                } else if(Math.abs(index - this.getIndex()) > 1){
                    //from last slide forward to first
                    container.eq(0).fadeTo(homeTransitionSpeed,targetOpacity);
                    container.eq(numSlides).fadeTo(homeTransitionSpeed,targetOpacity);
                    
                    container.eq(1).fadeTo(homeTransitionSpeed,1);
                    container.eq(numSlides+1).fadeTo(homeTransitionSpeed,1);
                } else if(this.getIndex() == -1 && index == -1){
                    //from 1st slide backwards to last
                    container.eq(0).fadeTo(homeTransitionSpeed,1);
                    container.eq(numSlides).fadeTo(homeTransitionSpeed,1);
                    
                    container.eq(1).fadeTo(homeTransitionSpeed,targetOpacity);
                    container.eq(numSlides+1).fadeTo(homeTransitionSpeed,targetOpacity);
                }
                return true;
            
            }).onSeek(function(){
            		
            		if(this.getIndex() >= 1){
					    //remove 1st slide text
					    $('#overlay1').remove();
					}
					if(this.getIndex() >= 2){
					    //remove 1st slide text
					    $('#overlay2').remove();
					}
            });
            
            loadedItems = 0;
            
            $('.scrollable_splash .items img').each(function() { 
            	this.src = $(this).attr('src-data');
            	 })
        	.load(function(){ 
        		$(this).fadeIn(2000); 
        		loadedItems ++;
        		if(loadedItems >= totalToLoad) api.play();
        	});
            
	    
	     //screen resize
        $(window).resize(function(){
            var posX = Math.max(0,($(window).width() - $('#page').outerWidth())/2);
            var posY = Math.max(0,($(window).height() - $('#page').outerHeight())/2);
            
            
            if(posX == 0 || posY == 0){
                $('body').css({
                    overflow:'auto'
                });
                $('.content').css({
                    overflow:'hidden'
                });
            } else {
                $('body').css({
                    overflow:'hidden'
                });
                $('.content').css({
                    overflow:'visible'
                });
            }
            
            posX = Math.max(0,($(window).width() - $('#page').outerWidth())/2);
            posY = Math.max(0,($(window).height() - $('#page').outerHeight())/2);
            
            $('#page').css({
                    position:'absolute',
                    left: posX,
                    top: posY 
            });
	    
            $('.home_overlay').css({
                    position:'absolute',
                    left: posX,
                    top: posY 
            });
            
        });
        
        //make body visible only once all initialisation is finished - to prevent jumpiness
        $("body").css("visibility", "visible");
            
        // To initially run the function:
        $(window).resize();
	
        function updateOrientation(){
            $(window).resize();
        }
        
    });