// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){
	/**
	 * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
	 */
	
	/**
	 * The plugin binds 6 events to the container to allow external manipulation.
	 * prev, next, goto, start, stop and notify
	 * You use them like this: $(your_container).trigger('next'), $(your_container).trigger('goto', [5]) (0-based index).
	 * If for some odd reason, the element already has any of these events bound, trigger it with the namespace.
	 */		
	
	/**
	 * IMPORTANT: this call to the plugin specifies ALL the settings (plus some of jQuery.ScrollTo)
	 * This is done so you can see them. You DON'T need to specify the commented ones.
	 * A 'target' is specified, that means that #screen is the context for target, prev, next and navigation.
	 */
	$('#screen').serialScroll({
		target:'#sections',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'img.next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		navigation:'#navigation li a',
		duration:700,// 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: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:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		//interval:1000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
		
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
			//alert(elem);
		}
	});
	
	/**
	 * No need to have only one element in view, you can use it for slideshows or similar.
	 * In this case, clicking the images, scrolls to them.
	 * No target in this case, so the selectors are absolute.
	 */
	
	$('#slideshow').serialScroll({
		items:'li',
		prev:'#screen2 a.prev',
		next:'#screen2 a.next',
		offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:1, //as we are centering it, start at the 2nd
		duration:1200,
		force:true,
		stop:true,
		lock:false,
		cycle:false, //don't pull back once you reach the end
		easing:'easeOutQuart', //use this easing equation for a funny effect
		onBefore:function( elem ){
			$('#site_image').attr('src', '../../../../images/frontend/portfolio/loading.gif');
			$('#site_title').html('');
			$('#site_url').html('');
			$('#site_content').html("<p align='center'>Loading..</p>");
		},
		onAfter:function( elem ){
			//alert(elem.id);
			
			switch(elem.id)
				{ 
				
				case 'badmintonengland': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/badmintonengland.png');
					$('#site_title').html('Badminton England / Center Parcs');
					$('#site_url').html('<a href="http://badmintonengland.niddocks.co.uk/" target="_blank">http://badmintonengland.niddocks.co.uk</a>');
					$('#site_content').html("<p>The Badminton England website was created on behalf of Center Parcs. This site sits in a 'Kiosk' environment at each Center Parcs location without a mouse or keyboard, and the site rotates through the items available, providing information about Center Parcs' support of England's badminton players. Badminton England have the functionality to log into a secure area where they can add, update and edit information, photos, news, etc. to provide a highly versatile information portal.</p>");
					break;
					
				case 'bmwkpi': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/bmw-kpi.png');
					$('#site_title').html('BMW KPI');
					$('#site_url').html('<a href="http://www.bmwkpi.co.uk/" target="_blank">www.bmwkpi.co.uk</a>');
					$('#site_content').html("<p>This bespoke web application is a tool for BMW's UK-wide bodyshops to submit their Key Performance Indicators to one location that is available 24/7.</p><p>Both dealer-owned and sub-contracted bodyshops for BMW and Mini log in to this site on a monthly basis to submit their results. These results can then be reviewed immediately by BMW, and the bodyshop themselves can compare their statistics in real-time with other bodyshops to see how they comapre. All reports and graphs are built 'on the fly' and can be downloaded in PDF format.</p>");
					break;
					
				case 'creditcompensation': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/creditcompensation.png');
					$('#site_title').html('Credit Compensation UK');
					$('#site_url').html('<a href="http://www.creditcompensation.co.uk/" target="_blank">www.creditcompensation.co.uk</a>');
					$('#site_content').html("<p>This bespoke web application is a highly sophisticated site that began life as a content management system (CMS). The system continues to act as a website, providing information on financial claims and all about the company, all of which can be altered via the secure management tool. On top of this it also boasts a secure agent's area as well; agents of the company can login to different tools and functions depending upon their subscription level, and gain access to secure messaging, e-mail, document downloads, etc.</p><p>Another feature of this system is the agent's own site that they can update themselves including content, images, meta tags and the page title.</p>");
					break;
					
				case 'ecowise': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/ecowise.png');
					$('#site_title').html('Ecowise Eggs');
					$('#site_url').html('<a href="http://www.ecowiseeggs.co.uk/" target="_blank">www.ecowiseeggs.co.uk</a>');
					$('#site_content').html("<p>A bespoke site written entirely in Flash. Ecowise eggs are very proud of their farming credentials, rearing content hens in a renewable energy powered farm to ensure that their products are as kind to the planet as they are to their customers. Ecowise were very keen that their website reflect the goodness of their product while being easy to navigate around and very user-friendly.</p>");
					break;
					
				case 'euron': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/euron.png');
					$('#site_title').html('Euron UK');
					$('#site_url').html('<a href="http://www.euronuk.com/" target="_blank">www.euronuk.com</a>');
					$('#site_content').html("<p>Euron were one of the first companies to take advantage of our most recent update of <a href=\"http://www.niddocks.co.uk/niddocks-cms.html\">Niddocks' CMS System<\a>. This site boasts both an 'inline' and a backoffice Content Management System so that Euron can make live updates to their website from any location in the world. through the inline CMS, when the website is in edit mode it looks exactly the same as it would do to any visitor on the site, except for the edit mode toolbar that appears at the top of the site. This allows Euron to navigate around the site in the same way you would do if they were simply visiting the site, making it very easy to find content to update. The edit mode toolbar has a number of functions that are applied to the current page you are currently visiting (eg saving, deleting or adding a page).</p>");
					break;					
					
				case 'financesat': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/financesat.png');
					$('#site_title').html('Oxford Universoty Self Assurance Toolkit ');
					$('#site_url').html('<a href="http://financesat.niddocks.co.uk/" target="_blank">http://financesat.niddocks.co.uk</a>');
					$('#site_content').html("<p>Oxford University use this online tool to collate financial information from all of their departments. Using a completely bespoke and manageable backoffice, the financial department at Oxford can create an annual list of questions concerning budgets and spending, and each department then logs in to upload their responses along with evidence in Word / PDF / Exel / etc. documentation. </p><p>These repsonses are then reviewed and the system informs everyone involved of any progress via automated e-mails.</p>");
					break;
					
				case 'greygable': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/greygable.png');
					$('#site_title').html('Grey Gable Surgery');
					$('#site_url').html('<a href="http://www.greygablesurgery.co.uk/" target="_blank">www.greygablesurgery.co.uk</a>');
					$('#site_content').html("<p>A static site that Niddocks Internet Solutions designed and built for doctor's practice in Worcester.</p>");
					break;
					
				case 'happyegg': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/happyegg.png');
					$('#site_title').html('Happy Egg Company');
					$('#site_url').html('<a href="http://www.thehappyegg.co.uk/" target="_blank">www.thehappyegg.co.uk</a>');
					$('#site_content').html("<p>We had great fun working with the Happy Egg Company to create this fun and interactive Flash site. While always under development with the next new feature, it currently boasts a 'Design Your Own Egg' competiton that gives visitors to the site a chance to win a holiday by painting their own egg online. You can also view their recent TV marketing campaign as well.</p<p>The Happy Egg Company were keen to push their eggs as a happy and fun product, and we think they've acheived that!</p>");
					break;
					
				case 'kitchenappliancecentre': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/kitchenappliancecentre.png');
					$('#site_title').html('The Kitchen Appliance Centre');
					$('#site_url').html('<a href="http://www.kitchenappliancecentre.co.uk/" target="_blank">www.kitchenappliancecentre.co.uk</a>');
					$('#site_content').html("<p>The Kitchen Appliance Centre's site is formed from <a href='niddocks-online-shop.html'>Niddocks' Online Shop system</a>. This solution includes all the necessary features and functions to build a successful online business.</p>");
					break;
					
				case 'littlechef': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/littlechef.png');
					$('#site_title').html('Little Chef Golden Egg Competition');
					$('#site_url').html('<a href="http://www.littlechefegg.co.uk/" target="_blank">www.littlechefegg.co.uk</a>');
					$('#site_content').html("<p>This website was put together for Little Chef customers to sign up to a competition to win a Golden Egg.</p>");
					break;
					
				case 'post-itnotes': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/post-itnotes.png');
					$('#site_title').html('3M Post-It Notes');
					$('#site_url').html('');
					$('#site_content').html("<p>The bespoke web application that we built for 3M UK gives website users the chance to design their post-it note from start to finish by building the product as they move through the site. The Flash designer lets the website visitor choose their pad size and colour, and then add graphics and text so that they can produce a bespoke Post-It Note.</p><p>The designer then creates the Post-It Note from the design and sends it directly to the printers as soon as the visitor has placed the order and paid online.</p>");
					break;
					
				case 'sunseeker': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/sunseeker.png');
					$('#site_title').html('Tickety Boo Sunseeker Yacht');
					$('#site_url').html('<a href="http://www.sunseeker82.co.uk/" target="_blank">www.sunseeker82.co.uk</a>');
					$('#site_content').html("<p>A brochure site offering details for an 82 foot yacht that you can charter around the coast of Sicily.</p>");
					break;
					
				case 'tallgirls': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/tallgirls.png');
					$('#site_title').html('Tall Girls');
					$('#site_url').html('<a href="http://www.tallgirls.co.uk/" target="_blank">www.tallgirls.co.uk</a>');
					$('#site_content').html("<p>Tall Girls sell clothing for the taller person (men and women). This site has done very well since its launch and has benefited a lot from Niddocks' SEO.</p>");
					break;				
				
				case 'twowheelcentre': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/twowheelcentre.png');
					$('#site_title').html('Two Wheel Centre');
					$('#site_url').html('<a href="http://www.twowheel.co.uk/" target="_blank">www.twowheel.co.uk</a>');
					$('#site_content').html("<p>Two Wheel Centre's website enables them to sell to a far greater area than their Mansfield-based showroom.</p>");
					break;
					
				case 'whytehallauctions': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/whytehallauctions.png');
					$('#site_title').html('Whytehall Auctions');
					$('#site_url').html('');
					$('#site_content').html("<p>To most of its visitors the Whytehall Auctions website is a site that they can log in to and offer a property for auction at Chek Whyte Industry's prestigious Stanford Hall auction house in Leicestershire. In reality it's a highly functional web application that continued to be developed as it was used, that provides the people who run the auction house with an invaluable tool to organise properties for sale.</p><p>The Whytehall Auction site was one of a number of projects that we have built for Chek Whyte, one of the country's most successful property developers and a recent participant in Channel 4's Secret Millionaire. The real power of this application lies behind the scenes, however, in a protected area of the website that is used by the back-room staff at Whytehall Auctions to manage the business. </p><p>There were a number of challenges associated with the project, the largest being that the site was under development right up until the inaugural auction at Stanford Hall. As the plans and processes at Stanford Hall changed, the way that the site worked needed to reflect this while all the time being used by staff and website visitors. The term 'hot-development' was coined and applied to this method of site building, which was the first project at Niddocks Internet Solutions to be developed in this way.</p>");
					break;
					
				case 'yourshortlist': 
					$('#site_image').attr('src', '../../../../images/frontend/portfolio/yourshortlist.png');
					$('#site_title').html('Yourshortlist');
					$('#site_url').html('<a href="http://www.yourshortlist.co.uk/" target="_blank">www.yourshortlist.co.uk</a>');
					$('#site_content').html("<p>While there are other websites on the market that provide business leads, this one approaches the market from a different angle. Specialising in the Marketing, IT and Telephony industries, suppliers looking for leads are able to sign up to the site and provide much more value to their company name by uploading catalogues, case studies and white papers as well as an in depth description about themselves and the services that they offer. Website visitors looking for leads, on the other hand, can navigate the site to find the area of industry that they seek a supplier for, where they fill in a web form that's completely dynamic and put together through the CMS system.</p><p>The biggest challenge with this project was to change the branding and colour scheme of the site as the website visitor looking for suppliers selects the different categories and subcategories of industry available. The process of industry categories is, once again, dynamic and controlled by non-technical users in the Content Management System (CMS). As a result we had to build the site so that it coped with an unlimited number of industries and would still function if those categories were added to or removed. Our servers were configured to use dynamic website addressing, so that any category entered into the CMS could be translated to a website-friendly term and used in the address; for example http://www.yourshortlist.co.uk/it_hardware/request-quote.html and  http://www.yourshortlist.co.uk/telephony_hardware/request-quote.html. Every page of the site references this part of the address and the resulting content and page styles reflect this.</p><p>Besides the dynamically changing colour scheme, a very satisfying area of this project was the opportunity to bring to the table what we knew about both website users and, from our client base, what businesses in this market would look for in a product such as this. As a result we were able to build a solution that was both practical and relevant to the people who use it.</p>");
					break;
				
				
				
				} 
			
			
		},
		jump: true //click on the images to scroll to them
	});
	
	/**
	 * The call below, is just to show that you are not restricted to prev/next buttons
	 * In this case, the plugin will react to a custom event on the container
	 * You can trigger the event from the outside.
	 */
	
	var $news = $('#news-ticker');//we'll re use it a lot, so better save it to a var.
	$news.serialScroll({
		items:'div',
		duration:2000,
		force:true,
		axis:'y',
		easing:'linear',
		lazy:true,// NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
		interval:1, // yeah! I now added auto-scrolling
		step:2 // scroll 2 news each time
	});	
	
	/**
	 * The following you don't need to see, is just for the "Add 2 Items" and "Shuffle"" buttons
	 * These exemplify the use of the option 'lazy'.
	 */
	$('#add-news').click(function(){
		var 
			$items = $news.find('div'),
			num = $items.length + 1;
			
		$items.slice(-2).clone().find('h4').each(function(i){
			$(this).text( 'News ' + (num + i) );
		}).end().appendTo($news);
	});
	$('#shuffle-news').click(function(){//don't shuffle the first, don't wanna deal with css
		var shuffled = $news.find('div').get().slice(1).sort(function(){
			return Math.round(Math.random())-0.5;//just a random number between -0.5 and 0.5
		});
		$(shuffled).appendTo($news);//add them all reordered
	});
});
