/*
 * Create a 3D carousel similar to the popular Flash carousel
 *
 * @name		carousel3d
 * @author		Kevin Crossman
 * @contact		kevincrossman@gmail.com
 * @version		1.1
 * @date			Oct 29 2008
 * @type    	 	jQuery
 * @example

 *
 *
 */

var sBrowserIE = 0; // presume that browser version is not IE
 function detectBrowser(){ 
        if (navigator.appVersion.indexOf("MSIE")==-1)
        {
            //alert("Not IE")            
			sBrowserIE = 0;
        }
        else
        {
            //alert("IE")
			sBrowserIE = 1;
        }
    }

detectBrowser(); // detect if the browser is IE


/*
 * Create a 3D carousel similar to the popular Flash carousel
 *
 * @name		carousel3d
 * @author		Kevin Crossman
 * @contact		kevincrossman@gmail.com
 * @version		1.1
 * @date			Oct 29 2008
 * @type    	 	jQuery
 * @example
 *
 *	 	* Place icon images inside <div id="carousel" />
 *
 * 				<div id='carousel'>
 *						<img src='images/image1.png' alt='image1' />
 *						<img src='images/image2.png' alt='image2' />
 *						<img src='images/image3.png' alt='image3' />
 *						<img src='images/image4.png' alt='image4' />
 *
 *		* to make image a page link, add class 'link' and set the longdesc attr to a web address
 *						<img class="link" src='images/image5.png' alt='image5' longdesc="http://plugins.jquery.com/" />
 *
 *				</div>
 *
 *	 	* If using text box, place spans inside <div id="carouselText" /> and add <div class="text" /> to house the info when displayed
 * 		* spans should contain content that will be displayed when the icon is clicked
 *
 * 				<div class="text"></div>
 *				<div id="carouselText">
 *					<span>customize this space for icon 1</span>
 *					<span>customize this space for icon 2</span>
 *					<span>customize this space for icon 3</span>
 *					<span>customize this space for icon 4</span>
 *				</div>
 *
 *
 *
 *
 */

(function($j) {

	$j.fn.extend({

		carousel3d: function(options) {

				opt = $j.extend({},$j.carouselSetup.defaults, options);		// extend options

				$this = $j(this);

				opt.speed = parseInt(2 - opt.speed);
        		btnSpeed = Math.round(3 - opt.speed) * $j.browser.msie ? 0.008 : 0.002;		// original button speed
        		//contSpeed = btnSpeed * $j.browser.msie ? 0.5 : 0.15;					// original continuous speed
				contSpeed = btnSpeed * $j.browser.msie ? 0.02 : 0.001;					// original continuous speed
           		opt.speed = opt.speed * $j.browser.msie ? 75000 : 150000;					// original mouse speed

				$imgs = $j('img', $this).hide();											// set variable with carousel images; hide for now
				//$texts = $j('span', $j('#carouselText')).hide();						// set variable with carousel text boxes; hide for now
				//if (opt.textBox && !$texts.size()) alert('<div id="carouselText" /> + <span>\'s. . . do not exist.  either add them or set textBox option to 0');

				items = $imgs.size(); 													// number of icons in carousel
				numSlots = items * opt.padding; 										// in order for the movement to flow smoothly, there are additional 'slots' in the carousel which the images will pace through

				if (opt.padding == 0) opt.padding = 1;									// padding must be at least 1

				$imgs.each(function(i) {												// setup images
					new $j.imageSetUp(this, i) 
				});		
																
				new $j.carouselSetup();													// setup carousel
           }
	});


	$j.imageSetUp = function(im, _index) {

		im.orig_w = $j(im).width(), im.orig_h = $j(im).height();										// save the original dimensions; used when image is clicked

		var w_h = resize( im.orig_w, 128, im.orig_h, 108).split('|');								// calculate w/h of images in carousel
		//var w_h = im.orig_h;	
		im.h = w_h[1], im.w = w_h[0];
		//im.h = im.orig_h, im.w = im.orig_w;

		im.slot = _index * opt.padding;																// position of the image in the carousel
		im.angle = parseInt(( _index * opt.padding ) * (( Math.PI * 2 ) / numSlots )*1000)/1000;	// original angle of the image

		/*
				im.clicked = { 																				// css to animate when image is clicked
					top: parseInt(opt.centerY - im.orig_h/6) + 'px',
					left: parseInt(opt.centerX - im.orig_w/6) + 'px',
					width: im.orig_w + 'px',
					height: im.orig_h + 'px'
				};
		*/
		//im.animateOn = function(el) { $imgs.fadeOut(700); el.animate( im.clicked, 10000 ) }; 	// hide the carousel
		//new $j.TextBoxSetUp(im, _index);											// setup text box

		$j(im).attr('id', 'pix'+_index).css({position: 'absolute'});					// id will be referenced when moving the image

		if ($j(im).hasClass('link')) {
			//$j(im).click( function(){ window.open($j(this).attr('longdesc')) } );
		}
		else {
			//$j(im).one('click', clickOn);											// bind clickOn to image
		}

	};

    $j.TextBoxSetUp = function(im, _index) {
     /*
		im.textClicked = {																			// css to animate when image is clicked
			left: opt.centerX - opt.radiusX - im.w + 'px',
			top: opt.centerY + 'px',
			width: im.w + 'px',
			height: im.h + 'px'
		};

		im.textBoxCss = {																			// textBox positioning css
			top: opt.centerY *0.5 + 'px',
			left: opt.centerX - opt.radiusX * 0.5 + 'px'
		};

		im.textAnimateOn = function(el) {
			var msg = '';
			if ( !$texts.size() ) msg += '<div id="carouselText" /> + <span>\'s. . . do not exist';
			else if ( !$j('#text').size() ) msg += '<div id="text" /> does not exist';
			else {
				$imgs.fadeOut(700);
				el.animate( im.textClicked, 500 );
				$j('#text')
					.css( im.textBoxCss )
					.html( $texts.eq(_index).html() )
					.fadeIn(700);
			}
			if (msg) alert( 'Cannot setup text box; ' + msg );
		};
	*/
	};

	$j.carouselSetup = function() {

		var im, _t, _s;

		if (opt.control=='buttons') controls();
		else if (opt.control=='continuous') rate = btnSpeed *.3;
		else $j().mousemove(function(e) { rate = (e.pageX - opt.centerX) / opt.speed; });

		// javascript Motion Tween by PHILIPPE MAEGERMAN; very similar to tweening in Flash.
		// check out the full details at his site: http://jstween.blogspot.com/
		t1 = new Tween(new Object(), 'xyz', Tween.regularEaseInOut, 0, 1000, 10000);
	
		t1.onMotionChanged = function(event) {

			for (var j=0; j < items, im=$j('#pix'+j)[0]; j++) {
			
				im.slot = (im.slot == numSlots - 1) ? 0: im.slot++;					// if image is in last slot, set as first slot; else advance 1 slot
				_t = Math.sin(im.angle) * opt.radiusY + opt.centerY;				// calculate top positioning
				_s = ((_t - opt.perspective) / (opt.centerY + opt.radiusY - opt.perspective));	// calculate size of image based on position in carsousel

				$j(im).css({ 														// set css values for image
					top: _t,
					left: Math.cos(im.angle) * opt.radiusX + opt.centerX, 			// calculate left positioning
					width: im.w * _s, 												// multiply image size by newly calculated size
					height: im.h * _s,
					zIndex: Math.round(_t)+1000										// z-index makes front images fully visible
				});

				if(!sBrowserIE) { // if is not IE we work with opacity for fade
					$j(im).css({ opacity: (opt.fadeEffect == 1)? Math.sin(im.angle) : 1 });
				}
				else{ // if is IE we work with visibility for fade

					if(Math.sin(im.angle) <= 0){
						$j(im).css({ visibility:  'hidden' });
					}
					else{
						$j(im).css({ visibility:  'visible' });
					}
				}

				if (opt.fadeEffect == 1) {
					$j(im)[ Math.sin(im.angle) <= 0 ? 'hide' : !$j(im).is(':visible') ? 'show' : ''  ];
				}

				im.angle += opt.control=='continuous' ? contSpeed : rate;			// change image angle based on carousel speed
           	}
       	};

		var iRandC = Math.floor(Math.random()*6);

       	t1.start();																		// start the motion
		$imgs.fadeIn(500);																// fadeIn the images
    };
	
    var opt, numSlots, items, rate = contSpeed = btnSpeed = 0;		// initialize variables

	function clickOn() {
		/*
		// actions when image in carousel is clicked
		var elem = this;
		t1.stop(); 																					// stop the Tween motion
		$j('#buttonwrapper:visible').fadeOut();										// hide the buttons

		$cloned = 																				// clone the image clicked and leave the original in place (this seemed easier than pulling the orig out of place)
		$j(this).clone().prependTo($this).click(function() { 					// add to carousel, when clicked again . . .
			$imgs.fadeIn();																	// show the carousel images

			$j(this)																					// animate back to carousel slot
				.animate({
					left: $j(elem).position().left + 'px', 									// change position
					top: $j(elem).position().top + 'px',
					width: $j(elem).width() + 'px', 										//  and size
					height: $j(elem).height() + 'px'
             	}, function() {
					$j(this).remove();															// remove the cloned image,
            		$j(elem).one('click', clickOn);										// rebind the image click event,
            		t1.start();																		// and restart carousel
          		});

          	$j('#text:visible').fadeOut();													// if showing, hide the text box
       		$j('#buttonwrapper:hidden').fadeIn();									// if hidden, show the buttons
       	});

       	(opt.textBox) ? elem.textAnimateOn($cloned) : elem.animateOn($cloned);			// animate the clone; enlarge or position to side of text box
		*/

    };

	function controls() {																		// add button and functions
		rate=0;
		var btns = $j('<div id="buttonwrapper" />').css({ left: opt.centerX+'px', top: opt.centerY*0.01+'px'}),
			left_btn = $j('<div id="left" />').hover(function(){rate=btnSpeed}, function(){rate=0}),
			right_btn = $j('<div id="right" />').hover(function(){rate=-btnSpeed}, function(){rate=0});
			$this.prepend( btns.append( left_btn, right_btn ));
    };

	// resize the images
	function resize(w, max_w, h, max_h) {
		
		
		if (w > max_w || h > max_h) {
			var x_ratio = max_w / w;
			var y_ratio = max_h / h;
			if ((x_ratio * h) < max_h) return max_w + '|' + Math.ceil(x_ratio * h);
			else return Math.ceil(y_ratio * w) + '|' + max_h;
		}
		else return w + '|' + h;
		
	};

	function resetAnimations() {														// clicked images and text boxes must be repositioned after resizing screen
		//$imgs.each(function(i) {
			//this.clicked.left = parseInt(opt.centerX*1 - this.orig_w/2) + 'px';
       		//this.textClicked.left = parseInt(opt.centerX*1 - opt.radiusX*1 - this.w*1) + 'px';
        	//this.textBoxCss.left = parseInt(opt.centerX*1 - opt.radiusX*1) + 'px';
		//});
	};

    $j(window).resize(function() {
		//opt.centerX = $this.offset().left+$this.width()/2- 45;
		resetAnimations();
	});

    $j.carouselSetup.defaults = {
        control: 'mouse',	  																	// 'button', 'mouse', or  'continuous' control
        speed: 1,																				// speed of mouse or button.  use scale of 1-5
        radiusX: 250,																			// x radius of the carousel
        radiusY: 80,																			// y radius of the carousel
        centerX: 0,																				// x position on the screen
        centerY: 270,																			// y position on the screen
        perspective: 10,																		// perspective of the image as it travels around the carousel
      	padding: 398, 																			// the number of padded items in between each icon.
        																						// the more padding, the more precise the incremental movement,
        																						// however this also create a lot more calculations
        																						// to keep icons evenly spaced, the num of icons should be a multiple of the padding
        fadeEffect: 1,																			// fade icons as cycle to the back of the carousel
        textBox: 0																				//  1 = display text area for each icon, 0 = no display
    };

})(jQuery);



// init carousel

	jQuery(function($) {
		//$j("#carousel").html($j("#holder_images").html()).carousel3d({ centerX: $j('#carousel').offset().left + $j('#carousel').width()/2 - 45 });
		 $j("#carousel").html($j("#holder_images").html()).carousel3d({ centerX: $j('#carousel').offset().left + $j('#carousel').width()/2 - 45 });
	});


/*
jQuery(function($) {
	$j("#carousel").html($j("#holder_images").html()).carousel3d({ centerX: $j('#carousel').offset().left + $j('#carousel').width()/2- 45 }); 
});
*/