/*
jQuery Plugin scoot v1.0.0
Requires: jsurl, jQuery 1.2.3+ (Not tested with earlier versions), and jQuery dimensions (which is rolled into jQuery 1.2.6...).
Author: Nico Westerdale
http://www.iconico.com
*/


(function() {
	
	var scootX, scootY, sBoxX, sBoxY, sBox, sBoxIn, sBoxInL, sBoxInR, sBoxImgs, scooting, ascooting, scootSpeed, sSelected, sCurrentSelected;

	var opts;

	//Set up the scoot - only need to call it once
	jQuery.fn.scoot = function(options) {
		 
		opts = jQuery.extend({}, jQuery.fn.scoot.defaults, options);
		
		//Generate HTML and Set up Scoot variables
		sBox = jQuery(this);
		sBox.css(opts.css)
		sBox.append('<div id="divScootInnerL"></div>');
		sBoxInL = jQuery('#divScootInnerL');
		sBoxInL.css(opts.leftcss).css('marginLeft', '-' + sBoxInL.width() + 'px');
		sBox.append('<div id="divScootInnerR"></div>');
		sBoxInR = jQuery('#divScootInnerR');
		sBoxInR.css(opts.rightcss).css('marginLeft', sBox.width() + 'px');
		FixAllPngs();
		
	sBox.append('<div id="divScootInner"></div>');
	sBoxIn = jQuery('#divScootInner').css(opts.innercss);
	for (var i=0; i<opts.images.length; i++)
		sBoxIn.append('<a class="history" id="slide_'+opts.ids[i]+'" target="_self" href="#slide_'+opts.ids[i]+'" ><img src="' + opts.images[i] + '" width="80" height="80" alt=""  /></a>');
		sBoxIn.wrapInner('<div></div>')
		sBoxIn.children('div').css(opts.innerwrapcss);
		
		sBoxImgs = jQuery('#divScootInner  img');
		sBoxX = sBox.offset().left;
		sBoxY = sBox.offset().top;
		scootSpeed = opts.speed * (sBoxImgs.length - 6);	//adjust speed based on number of chips
		
		//Moving over the box, 
		sBox.hover(function(e){
			setScootPos(e, jQuery(this));
			scooting = true;
			sBoxInL.css(opts.leftcssover);
			sBoxInR.css(opts.rightcssover);
			sBox.css(opts.overcss);
			FixAllPngs();
		}, function(e){
			setScootPos(e, jQuery(this));
			scooting = false;
			if (!ascooting) stopScoot();
			sBoxInL.css(opts.leftcss);
			sBoxInR.css(opts.rightcss);
			sBox.css(opts.css);
			FixAllPngs();
		}).mousemove(function(e){
			setScootPos(e, jQuery(this));
			scooting = true;
			doScoot();
		});
		
		//Clicking a chip 
		jQuery.fn.moveme = function(e) {
	
		//doSlideClick();
	
		  sCurrentSelected = sSelected;
			sSelected = sBoxImgs.index(this);
		
			
			sBoxImgs.css(opts.imgcss);	
			
			jQuery(this).css(opts.imgselectcss);
			
			//interface with other UI elemts passing 0-index chip clicked
			if (opts.callback && sCurrentSelected != sSelected) opts.callback(sBoxImgs.index(this));
			
			stopScoot();
			scooting = false;		//need to disable mouseovers while doing this
			if (sBox.width() < sBoxIn.width()) {
				//scoot so that clicked chip is in the center
				ascooting = true;	//block regular scoot
				sBoxIn.animate({'marginLeft': Math.max(sBox.width()-sBoxIn.width(), Math.min(0, (parseInt(sBox.width() / 2) - jQuery(this).outerWidth({ margin: true }) * (sBoxImgs.index(this)+0.5)))) + 'px'}, 500, 'swing', function(e){endAScoot()});
			}
			};
		
		sBoxImgs.hover(function(e){
			jQuery(this).not(sBoxImgs.eq(sSelected)).css(opts.imgfocuscss);
			
		}, function(e){
			jQuery(this).not(sBoxImgs.eq(sSelected)).css(opts.imgcss);
			
		})
		
		//Select initial item
		//sBoxImgs.eq(opts.initial).click();
	}
	
	//Set default options
	jQuery.fn.scoot.defaults = {
		initial: 0,			// initial item selected
		images: [],			// array of strings for image urls
		ids: [],		// array of strings for image ids
		speed: 300,		// this gets multiplied by the number of chips
		fadespeed: 250,		// for the ends
		callback: null,		// callback on click
		imgcss: {padding: '2px', margin:'3px 4px', cursor:'pointer', borderWidth: '0', borderStyle: 'solid'},
		imgfocuscss: {borderColor: '#af7f5b', margin:'0 1px', borderWidth: '3px'},
		imgselectcss: {borderColor: '#643E37', margin:'0 1px', borderWidth: '3px'},
		innerwrapcss: {margin: '2px 1px'},
		innercss: {position: 'absolute', height: '94px', marginLeft: '0px', whiteSpace: 'nowrap', backgroundColor: 'transparent'},
		css: {position: 'relative', width: '621px', height: '94px', overflow: 'hidden', backgroundColor: '#fff', border: '1px #ccc solid'},
		overcss: {backgroundColor:'#efede1'},
		leftcss: {position: 'absolute', width: '44px', height: '94px', zIndex: '1', backgroundImage: 'url(/i/slideshows/whiteFadeL.png)'},
		leftcssover: {backgroundImage: 'url(/i/slideshows/grayFadeL.png)'},
		rightcss: {position: 'absolute', width: '44px', height: '94px', zIndex: '1', backgroundImage: 'url(/i/slideshows/whiteFadeR.png)'},
		rightcssover: {backgroundImage: 'url(/i/slideshows/grayFadeR.png)'}
	}	//Note Pngs are auto-fixed for <IE7

	//end of the autoscoot
	function endAScoot() {
		ShowEndsIfNeeded();
		HideEndsIfNeeded();
		ascooting = false;
	}

	function setScootPos(e, obj) {
		scootX = e.pageX - obj.offset().left;
		scootY = e.pageY - obj.offset().top;
	}

	function stopScoot() {
		sBoxIn.queue('fx', []).stop();
	}

	function scootHideR(ml) {
		if (sBoxInR.queue('fx').length == 0) {
			if (parseInt(sBoxInR.css('margin-left')) == sBox.width() - sBoxInR.width()) {
				if (ml == undefined || ml == -(sBoxIn.width() - sBox.width())) {
					sBoxInR.animate({'marginLeft': sBox.width() + 'px'}, opts.fadespeed);
				}
			}
		}
	}

	function scootShowR(ml) {
		if (sBoxInR.queue('fx').length == 0) {
			if (parseInt(sBoxInR.css('margin-left')) == sBox.width()) {
				if (ml == undefined || ml > -(sBoxIn.width() - sBox.width())) {
					sBoxInR.animate({'marginLeft': (sBox.width() - sBoxInR.width()) + 'px'}, opts.fadespeed);
				}
			}
		}
	}

	function scootHideL(ml) {
		if (sBoxInL.queue('fx').length == 0) {
			if (parseInt(sBoxInL.css('margin-left')) == 0) {
				if (ml == undefined || ml == 0) {
					sBoxInL.animate({'marginLeft': '-' + sBoxInL.width() + 'px'}, opts.fadespeed);
				}
			}
		}
	}

	function scootShowL(ml) {
		if (sBoxInL.queue('fx').length == 0) {
			if (parseInt(sBoxInL.css('margin-left')) == -sBoxInL.width()) {
				if (ml == undefined || ml < 0) {
					sBoxInL.animate({'marginLeft': '0px'}, opts.fadespeed);
				}
			}
		}
	}

	//This happens on mouse move
	function doScoot() {
		if (scooting && !ascooting) {
			var isInScootArea = false;
			var ml = parseInt(sBoxIn.css('margin-left'))
			if (scootX > sBox.width()*3/4) {	//Is in right 1/4
				isInScootArea = true;
				if (-ml < sBoxIn.width() - sBox.width()) {	//if can scroll right
					if (sBoxIn.queue('fx').length == 0) {
						sBoxIn.animate({'marginLeft': '-' + (sBoxIn.width() - sBox.width()) + 'px'}, ((sBoxIn.width()+ml-sBox.width()) / (sBoxIn.width()-sBox.width()) * scootSpeed) + 100, 'swing', function(e){scootHideR()});
					}
					scootShowL();	//show left end
				}
			}
			if (scootX < sBox.width()/4) {	//Is in left 1/4
				isInScootArea = true;
				if (ml < 0) {	//if can scroll left
					if (sBoxIn.queue('fx').length == 0) {
						sBoxIn.animate({'marginLeft': '0px'}, (-ml) / (sBoxIn.width()-sBox.width()) * scootSpeed + 100, 'swing', function(e){scootHideL()});
					}		
					scootShowR();	//show right end
				}
			}
			
			if (!isInScootArea) stopScoot();
			HideEndsIfNeeded();
		}
	}

	function ShowEndsIfNeeded() {
		var ml = parseInt(sBoxIn.css('margin-left'))
		scootShowL(ml);
		scootShowR(ml);
	}

	function HideEndsIfNeeded() {
		//sometimes this can happen when the scootin animate doesn't move anything, but the fade pops out
		var ml = parseInt(sBoxIn.css('margin-left'))
		scootHideL(ml);
		scootHideR(ml);
	}
	
	function FixAllPngs() {
		if (jQuery.browser.msie) {
			// fix css background pngs
			sBox.find("*").each(function(){
				var bgIMG = jQuery(this).css('background-image');
				if(bgIMG.indexOf(".png")!=-1){
					var iebg = bgIMG.split('url("')[1].split('")')[0];
					jQuery(this).css('background-image', 'none');
					jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
				}
			});
		}
	}

})();