$(document).ready(function() {

	//carousel for scrolling
	$('#mycarousel').jcarousel({
		scroll:1
	});


	//init jcarousel
	$('#newsbox').jcarousel({
		vertical: true,
		auto: 10,
		scroll: 1,
		wrap: 'last'
	});

	//galleria for display
	$('#mycarousel').galleria({
		history   : false, // activates the history object for bookmarking, back-button etc.
		clickNext : false, // helper for making the image clickable
		insert    : '#mainimg', // the containing selector for our main image
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

			// fade in the image & caption
			if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				image.css('display','none').fadeIn(1000);
			}
			caption.css('display','none').fadeIn(1000);

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(500,0.3);

			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');

			// add a title for the clickable image
			image.attr('title','');
			
			var theimage = $('.galleria_wrapper img').get(0);
			var str = theimage.src;
			var dot = '.';
			str = str.replace('_thumb.',dot);
			str = str.replace(/\/thumb\//,'/products/');
			theimage2 = jQuery("<img>").attr('src',str);
			$('.galleria_wrapper').html(theimage2);
			var widthsz = $('[name="width"]').val();
			var heightsz = $('[name="height"]').val();

			//JQzoom specific, add a css class, modify the alt text
			//image.attr('alt',image.attr('src'));

			//image resizing
			var max_width = parseInt($('div.galleria_wrapper').css('width')); 	//Sets the max width, in pixels, for every image
			var max_height = parseInt($('div.galleria_wrapper').css('height'));
			var selector = 'div.galleria_wrapper img'; 	//Sets the syntax for finding the images.  Defaults to all images.
			//For images inside of a particular element (id="abc") or class (class="abc"),
			//use '.abc img' or '#abc img' respectively.  Don't leave off the img tag!!!
			//End configuration options.  You don't need to change anything below here.

			$(theimage2).each(function(){
				var width = widthsz;
				var height = heightsz;
				var new_width =0;
				var new_height = 0;

				//scale height
				if (height > max_height) {
					//set variables for manipulation
					var ratio = (width / height);
					var newer_height = max_height;
					var newer_width = (newer_height * ratio);
					$(this).height(newer_height).width(newer_width);
				}


				if (width > max_width) {
					//Set variables	for manipulation
					var ratio = (height / width );
					new_width = max_width;
					new_height = (new_width * ratio);
					//Shrink the image and add link to full-sized image
					$(this).height(new_height).width(new_width);

					if (new_height > max_height) {
						//set variables for manipulation
						var ratio = (new_width / new_height);
						var newer_height = max_height;
						var newer_width = (newer_height * ratio);
						$(this).height(newer_height).width(newer_width);
					}

				} //ends if statement


				//for thickbox			
				$(this).wrap('<a href="' + str + '" class="thickboxs"></a>');
				tb_init('a.thickboxs');
			} //ends each function
			);

		},
		onThumb : function(thumb) { // thumbnail effects goes here

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '0.3';

			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

			// hover effects
			thumb.hover(
			function() { thumb.fadeTo('fast',1); },
			function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
			)
		}
	});


});