$(document).ready(function(){

	var config = {
		type		: 'web',
		perPage		: 8,			// A maximum of 8 is allowed by Google
		page		: 0				// The start page
	}

	// The small arrow that marks the active search icon:
	var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');

	$('ul.icons li').click(function(){
		var el = $(this);

		if(el.hasClass('active')){
			// The icon is already active, exit
			return false;
		}

		el.siblings().removeClass('active');
		el.addClass('active');

		// Move the arrow below this icon
		arrow.stop().animate({
			left		: el.position().left,
			marginLeft	: (el.width()/2)-4
		});

		// Set the search type
		config.type = el.attr('data-searchType');
		$('#more').fadeOut();
	});

	// Focusing the input text box:
	$('#s').focus();

	$('#searchForm').submit(function(){
		googleSearch();
		return false;
	});

	function googleSearch(settings){

	// If no parameters are supplied to the function,
	// it takes its defaults from the config object above:

	settings = $.extend({},config,settings);
	settings.term = settings.term || $('#s').val();

	// URL of Google's AJAX search API
	var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+
					'?v=1.0&callback=?';
	
	$.getJSON(apiURL,{
		q	: settings.term,
		rsz	: settings.perPage,
		start	: settings.page*settings.perPage
	},function(r){

		var results = r.responseData.results;
		$('#more').remove();

		if(results.length){

			// If results were returned, add them to a pageContainer div,
			// after which append them to the #resultsDiv:

			var pageContainer = $('<div>',{className:'pageContainer'});

			for(var i=0;i<results.length;i++){
				// Creating a new result object and firing its toString method:
				pageContainer.append(new result(results[i]) + '');
			}

			var cursor = r.responseData.cursor;

			// Checking if there are more pages with results,
			// and deciding whether to show the More button:

			if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
				$('<div>',{id:'more'}).appendTo(pageContainer).click(function(){
					googleSearch({append:true,page:settings.page+1});
					$(this).fadeOut();
				});
			}
			
			pageContainer.append('<div class="clear"></div>').hide();

			$.fancybox(
				$(pageContainer).html(),
				{
					'autoDimensions'	: false,
					'width'         	: 400,
					'height'        	: 'auto',
					'showNavArrows'		: false,
					'transitionIn'		: 'elastic'
				}
			);
			$('#more').click(function(){
				googleSearch({append:true,page:settings.page+1});
			});
		}
		else {
			
			var pageContainer = $('<div>',{className:'pageContainer'});
			// No results were found for this search.

			$('<p>',{
				className	: 'notFound',
				html		: 'No Results Were Found!'
			}).appendTo(pageContainer);
			// .hide().appendTo(resultsDiv).fadeIn();
			$.fancybox(
				$(pageContainer).html(),
				{
					'autoDimensions'	: false,
					'width'         	: 400,
					'height'        	: 'auto',
					'showNavArrows'		: false,
					'transitionIn'		: 'elastic'
				}
			);
		}
	});
}

	function result(r){

		// This is class definition. Object of this class are created for
		// each result. The markup is generated by the .toString() method.

		var arr = [];

		// GsearchResultClass is passed by the google API
		switch(r.GsearchResultClass){

			case 'GwebSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.url,'">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.url,'">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GimageSearch':
				arr = [
					'<div class="imageResult">',
					'<a href="',r.url,'" title="',r.titleNoFormatting,
					'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
					'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',
					r.tbHeight,'" /></a>','<div class="clear"></div>',
					'<a href="',r.originalContextUrl,'">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GvideoSearch':
				arr = [
					'<div class="imageResult">',
					'<a href="',r.url,'" title="',r.titleNoFormatting,
					'" class="pic" style="width:150px;height:auto;">',
					'<img src="',r.tbUrl,'" width="100%" /></a>',
					'<div class="clear"></div>','<a href="',
					r.originalContextUrl,'">',r.publisher,'</a>',
					'</div>'
				];
			break;
			case 'GnewsSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.unescapedUrl,'">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.unescapedUrl,'">',r.publisher,'</a>',
					'</div>'
				];
			break;
		}

		// The toString method.
		this.toString = function(){
			return arr.join('');
		}
	}
});