$(document).ready(function () {
	
	$('#slide-1 .ipad-portrait-csusa').animate({
		  right: '+=1350'
		}, { queue: true, duration: 1000 }) 
	
		$('#slide-1 .ipad-landscape-csusa').animate({
		  right: '+=1470'
		}, { queue: true, duration: 1000 })
	
		$('#slide-1 .ipad-csusa-liberty').animate({
		  right: '+=1350'
		}, { queue: true, duration: 800 })
		
		$('#showcase-container').animate({backgroundPosition: "-100px 0px"}, 1000, function() {
		  // Animation complete.
		});
		
	var width = $(window).width(); 
	$('.showcase-slide, #work, #services, #about, #contact, #get-quote, #overlay').css({'width' : width });
	  
	var height = $(document).height();
	$('#overlay').css({'height' : height });

	//Resize showcase slider on window resize
	function resize(){
    	$(window).resize(function(){
        
        var fullwidth = $(window).width();
        var divwidth = $('.showcase-slide, #work, #services, #about, #contact, #get-quote, #overlay, #header');
        divwidth.width(fullwidth);
        
    	}).resize();
	}

	//resize window width
	resize();

	$.localScroll.defaults.axis = 'y';
	$.localScroll({ duration: 1000 });
	
	function initialize() {
	var geocoder;
	var map;

  	geocoder = new google.maps.Geocoder();
  	var latlng = new google.maps.LatLng(-34.397, 150.644);
  	var myOptions = {
	zoom: 12,
	center: latlng,
	zoomControl: true,
	scrollwheel: true,
	panControl: true,
	scaleControl: false,
	mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  
  var address = "Class Creative, Birmingham Science Park, Faraday Wharf, Birmingham, B7 4BB";
					  
  geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	   
	   /*contentString = '<div class="map-info-content">'+
						'<h1>Class Creative</h1>'+
						'<p>Class Creative, Birmingham Science Park, Faraday Wharf, Birmingham, B7 4BB</p>'+
						'</div>';*/

	  /*var infowindow = new google.maps.InfoWindow({
		  content: contentString,
		  maxWidth: 300
	  });*/
	  map.setCenter(results[0].geometry.location);
	  var marker = new google.maps.Marker({
		  map: map,
		  position: results[0].geometry.location,
		  icon: 'images/map-marker.png'
	  });
	  
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

	} else {
	  alert("Geocode was not successful for the following reason: " + status);
	}
  });
}
		
		togglenav("#work-nav a", "#work");
		togglenav("#services-nav a","#services");
		togglenav("#about-nav a", "#about");
		togglenav("#contact-nav a", "#contact");
		togglenav("#get-quote-nav a", "#get-quote");
		
		function addmap() {
			$("#contact-nav a").click(function() {
					$("#map-container").css({'display':'block', 'position':'relative', 'width' : '400px', 'height' : '320px'});
				$("#map-canvas").css({'width' : '360px', 'height' : '270px', 'position':'absolute'});
					initialize();
			});
		}
		

		$('#overlay').click(function() {
			$(".showcase-slide").stop().trigger('start');
			$('#overlay').css('z-index' , '-10');
			$('#overlay').animate({ opacity : 0});
			$("#header ul li a").removeClass('active');
			slideAllUp();
		});
		
		$('.close').click(function() {
			$('.showcase-slide').stop().trigger('start');
			$('#overlay').css('z-index' , '-10');
			$('#overlay').animate({ opacity : 0});
			$("#header ul li a").removeClass('active');
			slideAllUp();
		});
		
		$('.showcase-mini-slide a').click(function() {
			$('.showcase-slide').stop().trigger('start');
			$('#overlay').css('z-index' , '-10');
			$('#overlay').animate({ opacity : 0});
			$("#header ul li a").removeClass('active');
			slideAllUp();
		});

    	$('#showcase-container').serialScroll({
		target:'#showcase',
		items:'.showcase-slide', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'.next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		duration:300,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		//queue:true,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		//stop:true,// Each click will stop any previous animations of the target. (false by default)
		//lock:true, // Ignore events if already animating (true by default)        
		// On which element (index) to begin ( 0 is the default, redundant in this case )       
		//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
		//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
		//lazy:true,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		interval:7000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
			easing: "easeInQuad",
		
		
		
		onBefore:function( e, elem, $pane, $items, pos ){
					if(elem.id == 'slide-start') {
					
					$('#showcase-container').animate({backgroundPosition: "0px 0px"}, 1000, function() {
		  // Animation complete.
		});
		}
					if(elem.id == 'slide-1') { 
			
		$('#slide-1 .ipad-portrait-csusa').animate({
		  right: '+=150'
		}, { queue: true, duration: 1000 }) 
	
		$('#slide-1 .ipad-landscape-csusa').animate({
		  right: '+=270'
		}, { queue: true, duration: 1000 })
	
		$('#slide-1 .ipad-csusa-liberty').animate({
		  right: '+=150'
		}, { queue: true, duration: 800 })
		
		$('#showcase-container').animate({backgroundPosition: "-100px 0px"}, 1000, function() {
		  // Animation complete.
		});
		
		}
				
				
				else if(elem.id == 'slide-2') {
			
		$('#slide-2 .iphone-bfuture-bullring').animate({
		  right: '+=200'
		}, { queue: true, duration: 800 }) 	
			
		$('#slide-2 .iphone-portrait-bfuture').animate({
		  right: '+=300'
		}, { queue: true, duration: 1000 })  
		
		$('#slide-2 .iphone-bfuture-bull').animate({
		  right: '+=500'
		}, { queue: true, duration: 1100 }) 
		
		$('#showcase-container').animate({backgroundPosition: "-200px 0px"}, 1000, function() {
		  // Animation complete.
		});
		
		}
					
					
				else if(elem.id == 'slide-3') {  $('#slide-3 .imac-qrky').animate({
		  right: '+=250'
		}, { queue: true, duration: 800 })
	
		$('#slide-3 .imac-qrky-qrcode').animate({
		  right: '+=350'
		}, { queue: true, duration: 1000 }) 
		
		$('#showcase-container').animate({backgroundPosition: "-300px 0px"}, 1000, function() {
		  // Animation complete.
		});
		}
					
					
				resetall(elem.id);
			
		    e.preventDefault();
		    if( this.blur )
		        this.blur();
			
				},
			
		onAfter:function(elem){
		    //'this' is the element being scrolled ($pane) not jqueryfied
		}
    	});

	//setTimeout("$('.showcase-slide').trigger( 'goto',[0]);",600);
	//setTimeout("$('#slide-start').remove();",650);
	

 	$('#drop-downs').serialScroll({
		target:'#showcase-mini',
		items:'.showcase-mini-slide', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'.mini-prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'.mini-next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		duration:500,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		//queue:false,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		//stop:false,// Each click will stop any previous animations of the target. (false by default)
		//lock:true, // Ignore events if already animating (true by default)        
		start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )       
		cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		step:3, // How many items to scroll each time ( 1 is the default, no need to specify )
		//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
		lazy:true,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		interval:0, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
			easing: "easeInQuad",
		
		onBefore:function( e, elem, $pane, $items, pos ){
			
				},
			
		onAfter:function(elem){
		    //'this' is the element being scrolled ($pane) not jqueryfied
		}
    	});
		
	$("#main-content img").lazyload({      
    		 effect : "fadeIn", effectspeed: 3000, threshold : 200
 	});

    	$('.work-post-gallery-images ul').each(function(i) {
        	$(this).before('<ul class="imgSelect imgSelect'+i+'">'+'<li class="prev prev'+i+'"></li>'+'<li class="next next'+i+'"></li>').cycle({
		    fx:     'fade',
		    speed:  'fast',
			timeout: 0,
		    next:  '.next' + i,
			prev: '.prev' + i,
			//after: onAfter
		});
		
		
        });
		addmap();
});

function resetall (id) {
	if (id != 'slide-1') {
			 $('#slide-1 .ipad-portrait-csusa').animate({
	  right: '0px',
	},  { queue: true, duration: 1000 })
			  $('#slide-1 .ipad-landscape-csusa').animate({
				right: '-150px',
	},  { queue: true, duration: 1000 })
			  $('#slide-1 .ipad-csusa-soccerball').animate({
				right: '0px',
	},  { queue: true, duration: 1000 })
	
				$('#slide-1 .ipad-csusa-liberty').animate({
				right: '-30px',
	},  { queue: true, duration: 1000 })
	}
	
	if (id != 'slide-2') {
	$('#slide-2 .iphone-bfuture-bullring').animate({
	  right: '-10px'
	}, 1000, function() {
	  // Animation complete.
	});
	
	$('#slide-2 .iphone-portrait-bfuture').animate({
	  right: '-150px'
	}, 1000, function() {
	  // Animation complete.
	});
	
	 $('#slide-2 .iphone-bfuture-bull').animate({
	  right: '-35px'
	}, 1000, function() {
	  // Animation complete.
	});
	}
	
	if (id != 'slide-3') {
			 $('#slide-3 .imac-qrky').animate({
	  right: '-100px'
	},  { queue: true, duration: 1000 })
	
			$('#slide-3 .imac-qrky-qrcode').animate({
	  right: '-200px'
	},  { queue: true, duration: 1000 }) }
	
	$('.showcase-mini-slide a').click(function() {
	$('#work').slideUp("slow");
	});
	
}


//Show hide toggles for the main navigation
	function togglenav(trigger, hiddendiv) {

	$(hiddendiv).hide();
    	$(trigger).show();

	$(trigger).click(function() {
		if ($(trigger).hasClass('active')) {
			slideAllUp();
			$('#overlay').css('z-index' , '-10');
			$('#overlay').animate({ opacity : 0});
			$("#header ul li a").removeClass('active');
			$(".showcase-slide").stop().trigger('start');
		}
		else if($("#header ul li a").hasClass('active')){
			slideAllUp2();
			$(hiddendiv).slideDown("slow", function () {});
			$('#overlay').css('z-index' , '9998');
			$('#overlay').animate({ opacity : 0.8});
			$("#header ul li a").removeClass('active');
			$(trigger).addClass('active');
			$(".showcase-slide").stop().trigger('stop');
		}
		else{
			$(hiddendiv).slideDown("slow", function () {});
			$('#overlay').css('z-index' , '9998');
			$('#overlay').animate({ opacity : 0.8});
			$("#header ul li a").removeClass('active');
			$(trigger).addClass('active');
			$(".showcase-slide").stop().trigger('stop');
		}
		if(trigger=="#contact-nav"){
			$("#map-container").css({'display':'block', 'position':'relative', 'width' : '400px', 'height' : '320px'});
			$("#map-canvas").css({'width' : '360px', 'height' : '270px', 'position':'absolute'});
			initialize();
		}
		return false;
	});
}


//slide all header divs up
var slideAllUp = function(){
    $("#work").slideUp("slow");
    $("#services").slideUp("slow");
    $("#about").slideUp("slow");
    $("#contact").slideUp("slow");
	$("#get-quote").slideUp("slow");
};

var slideAllUp2 = function(){
    	$("#work").hide();
    	$("#services").hide();
    	$("#about").hide();
    	$("#contact").hide();
	$("#get-quote").hide();
};