$(function () {

	//Examples of how to assign the ColorBox event to elements
	/*w = screen.width;
	h = screen.height;*/
	w = $(window).width();
	h = $(window).height();
	//console.log(w);
	//console.log(h);
	$("a[id='photo-zoom-2']").colorbox();
	$("a[id='photo-zoom-2']").colorbox({slideshow:false,opacity:"0"});
	$("a[id='photo-zoom-2']").colorbox({width:'100%', height:'100%', iframe:false});
	$("a[id='photo-zoom-2']").colorbox({scalePhotos:true});
	$("a[id='photo-zoom-2']").colorbox({scrolling:false});
	$("a[id='photo-zoom-2']").colorbox({
		onComplete:function(){
			ancho = $('#cboxLoadedContent').width();
			alto = $('#cboxLoadedContent').height();
			html_text = "<a href=\"#\" class = \"cloud-zoomo\" id=\"zoomo\" style=\"visibility:hidden\" rel=\"zoomWidth:"+w+", zoomHeight:"+h+", position:'inside',adjustX: 0, adjustY:0,smoothMove:10, showTitle:false\">&nbsp;</a>";

			$(html_text).insertBefore($('#cboxPhoto'));

			$('#cboxPhoto')
			.attr("style","width:"+$('#cboxLoadedContent').width()+"px;height:"+$('#cboxLoadedContent').height()+"px")
			.attr("src", $("a[id='photo-zoom-2']").attr("normal"));

			$('#zoomo')
			.html($('#cboxPhoto'))
			.attr("href", $("a[id='photo-zoom-2']").attr("zoom"))
			.CloudZoomo();
		}
	});


	//Example of preserving a JavaScript event for inline calls.
	$("#zoom1").click(function(){
		$('#zoom1').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
		return false;
	});

	$('#items').serialScroll({
		target:'#scroller',
		items:'li', // Selector to the items ( relative to the matched elements )
		prev:'#scroller-prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'#scroller-next',// Selector to the 'next' button (absolute too)
		axis:'x',// The default is 'y' scroll on both ways
		//navigation:'#thumbs li a',
		duration:400,// 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)
		exclude: 0,

		//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();
			$('#items ul li').each( function(){
				$(this).removeClass("sel");
			}
			);
		},
		onAfter:function( elem ){
			$(elem).addClass("sel");

		}
	});

	$('#scroller-prev').click(
	function () {

		/*
		if ( $('#slide ul li.sel').size() > 0 ) {
		$('#slide ul li.sel').animate({'opacity':'0.1'}, 200);
		$('#slide ul li.sel').removeClass("sel");
		}
		*/
		$('#items ul').trigger('prev');

		return false;
	}
	);

	$('#scroller-next').click(
	function () {

		/*
		if ( $(elem).prev('li').size() > 0 ) {
		$(elem).prev('li').animate({'opacity':'0.1'}, 200);
		$(elem).prev('li').removeClass("sel");
		}
		*/
		$('#items ul').trigger('next');
		return false;
	}
	);


	$('#scroller li a').click( function() {
		img = $(this).find("img");

		$('#zoom1')
		.attr("zoom", img.attr("zoom"))
		.attr("href", img.attr("zoom"))
		.CloudZoom()
		.find("img")
		.fadeOut(100)
		.attr("src", img.attr("normal"))
		.fadeIn(200);
		$("a[id='zoom-detalle']")
		.attr("zoom", img.attr("zoom"))
		.attr("href", img.attr("zoom"))
		
		$("a[id='photo-zoom-2']")
		.attr("zoom", img.attr("zoom"))
		.attr("href", img.attr("zoom"));
		//.fadeOut(1);
		//.CloudZoom()
		//.find("img")
		//.fadeOut(100)
		//.attr("src", img.attr("normal"))
		//.fadeIn(200);
		return false;
	});
});

$(window).resize(function() {
	var xSize = setWidth();
	var ySize = setHeight();
	//$('#zoomo').width = xSize;
	$.colorbox.resize({width:xSize, height:ySize})
	$('#cboxPhoto')
			.attr("style","width:"+$('#cboxLoadedContent').width()+"px;height:"+$('#cboxLoadedContent').height()+"px");
	
});

function setWidth(){
	return $(window).width();
}

function setHeight(){
	return $(window).height();
}