$(document).ready(
	function(){
		init("#web-image");
		$(".gallery-web div:first").attr("id","first-web");
		$(".gallery-web div:last").attr("id","last-web");
		$('.gallery-web').serialScroll({
			items:'div',
			prev:'a.prev-web',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'a.next-web',//selector to the 'next' button (absolute too)
			duration:700,
			force:true,
			axis:'y',
			lazy:true,//NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
			step:6, //scroll 2 news each time
			cycle: false,
			exclude: 2,
			onAfter:function(elem){
				var currentView = $(elem).attr("id");
				if (currentView == "first-web") { $("a.prev-web").fadeOut("fast"); } else { $("a.prev-web").fadeIn("slow"); }
				if (currentView == "last-web") { $("a.next-web").fadeOut("fast"); } else { $("a.next-web").fadeIn("slow"); }
				}
			});
		}
	);

$(document).ready(
	function(){
		init("#mock-image");
		$(".gallery-mock div:first").attr("id","first-mock");
		$(".gallery-mock div:last").attr("id","last-mock");
		$('.gallery-mock').serialScroll({
			items:'div',
			prev:'a.prev-mock',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'a.next-mock',//selector to the 'next' button (absolute too)
			duration:700,
			force:true,
			axis:'y',
			lazy:true,//NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
			step:6, //scroll 2 news each time
			cycle: false,
			exclude: 2,
			onAfter:function(elem){
				var currentView = $(elem).attr("id");
				if (currentView == "first-mock") { $("a.prev-mock").fadeOut("fast"); } else { $("a.prev-mock").fadeIn("slow"); }
				if (currentView == "last-mock") { $("a.next-mock").fadeOut("fast"); } else { $("a.next-mock").fadeIn("slow"); }
				}
			});
		}
	);
	
$(document).ready(
	function(){
		init("#graphic-image");
		$(".gallery-graphic div:first").attr("id","first-graphic");
		$(".gallery-graphic div:last").attr("id","last-graphic");
		$('.gallery-graphic').serialScroll({
			items:'div',
			prev:'a.prev-graphic',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'a.next-graphic',//selector to the 'next' button (absolute too)
			duration:700,
			force:true,
			axis:'y',
			lazy:true,//NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
			step:6, //scroll 2 news each time
			cycle: false,
			exclude: 2,
			onAfter:function(elem){
				var currentView = $(elem).attr("id");
				if (currentView == "first-graphic") { $("a.prev-graphic").fadeOut("fast"); } else { $("a.prev-graphic").fadeIn("slow"); }
				if (currentView == "last-graphic") { $("a.next-graphic").fadeOut("fast"); } else { $("a.next-graphic").fadeIn("slow"); }
				}
			});
		}
	);

	$(".gallery-main").show();
	function init(target){
		$('a').each(
			function() {
				if (this.getAttribute('href') && (this.getAttribute('rel') == 'pagination-web')) {
          			this.onclick = function(){
            			{
            			$('#web-image').html('<h1>' + this.getAttribute("title") +
            				'</h1><a href="' + this.getAttribute("bonus") +
            				'" class="thickbox"><img src="' + this.href +
            				'" alt="' + this.getAttribute("title") +
            				'" title="' + this.getAttribute("title") +
            				'" width="550' +
            				'" /></a>');
            			tb_init('a.thickbox');
            			}
            		return false;
            		}
            	}
				if (this.getAttribute('href') && (this.getAttribute('rel') == 'pagination-mock')) {
          			this.onclick = function(){
            			{
            			$('#mock-image').html('<h1>' + this.getAttribute("title") +
            				'</h1><a href="' + this.getAttribute("bonus") +
            				'" class="thickbox"><img src="' + this.href +
            				'" alt="' + this.getAttribute("title") +
            				'" title="' + this.getAttribute("title") +
            				'" width="550' +
            				'" /></a>');
            			tb_init('a.thickbox');
            			}
            		return false;
            		}
            	}
				if (this.getAttribute('href') && (this.getAttribute('rel') == 'pagination-graphic')) {
          			this.onclick = function(){
            			{
            			$('#graphic-image').html('<h1>' + this.getAttribute("title") +
            				'</h1><a href="' + this.getAttribute("bonus") +
            				'" class="thickbox"><img src="' + this.href +
            				'" alt="' + this.getAttribute("title") +
            				'" title="' + this.getAttribute("title") +
            				'" width="550' +
            				'" /></a>');
            			tb_init('a.thickbox');
            			}
            		return false;
            		}
            	}
            }
    	);
    }