document.write("<style type='text/css'> #s_gallery{overflow:hidden;} </style>");
document.write("<style type='text/css'> #p_gallery{overflow:hidden;} </style>");
document.write("<style type='text/css'> #d_gallery{overflow:hidden;} </style>");
document.write("<style type='text/css'> #sections{overflow:hidden;} </style>");

$(document).ready(function(){

function parseURL(url) { 
   var a =  document.createElement('a');
   a.href = url;
   return {
       source: url,
       protocol: a.protocol.replace(':',''),
       host: a.hostname,
       port: a.port,
       query: a.search,
       params: (function(){
           var ret = {},
               seg = a.search.replace(/^\?/,'').split('&'),
               len = seg.length, i = 0, s;
           for (;i<len;i++) {
               if (!seg[i]) { continue; }
               s = seg[i].split('=');
               ret[s[0]] = s[1];
           }
           return ret;
       })(),
       file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
       hash: a.hash.replace('#',''),
       path: a.pathname.replace(/^([^\/])/,'/$1'),
       relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
       segments: a.pathname.replace(/^\//,'').split('/')
   };
}

function getPosition(url) { //code thanks to Vincent Roman
	var details = parseURL(url);
	if (details.hash !== ""){
		var galleryItems = $("#"+ details.hash).parent().children();
		var counter = 0;
		var matchcount = 0;
		$(galleryItems).each(function () {
			if ($(this).attr('id') == details.hash) {
				matchcount = counter;
			} else {
				counter++;
			}
		});
		return matchcount;
	}
	else return 0;//makes sure it returns a number
}

$('#s_gallery').css('width','900px').css('overflow','hidden');
$('#p_gallery').css('width','900px').css('overflow','hidden');
$('#d_gallery').css('width','900px').css('overflow','hidden');
$('#sections').css('width','950px').css('overflow','hidden');


function getArrowID (){
	var getURL = location.href;
	console.log(getURL);
}


/*
var $scroll = $('#g_main');

$scroll 
	.after('<div id="g_nav_l"><a class="prev" href="#"><img src="images/arrows/dr_prev-trans.png" alt="" width="30px" height="90px" /></a></div>')
	.after('<div id="g_nav_r"><a class="next" href="#"><img src="images/arrows/dr_next-trans.png" alt="" width="30px" height="90px" /></a></div>');
*/

var scrollOptions = {
	items:'li',
	prev:'#g_nav_l a.prev',
	next:'#g_nav_r a.next',
	duration:500,
	force:true,
	stop:true,
	step:1,
	lock:false,
	start: getPosition(window.location),
	cycle:true, //don't pull back once you reach the end
	easing: 'swing',
	constant:false,
	onAfter: trigger

};

function trigger(data) {
	window.location.hash = data.id;
}

$('#s_gallery').serialScroll(scrollOptions);	

$('#p_gallery').serialScroll(scrollOptions);	

$('#d_gallery').serialScroll(scrollOptions);
	
$('#sections').serialScroll({
			items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
			prev:'#d_nav_l a.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'#d_nav_r a.next',// Selector to the 'next' button (absolute too)
			axis:'x',// The default is 'y' scroll on both ways
			start:0, //as we are centering it, start at the 2nd
			duration:800,
			force:true,
			stop:true,
			step:1,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:false
	});

		
		//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
});