/*****************************************************
-->Three-Row, Arbitrary Width Slidable Icon Viewer<--

Authored by Big John - http://positioniseverything.net/

The currently used icons are 90px by 90px, and the viewer 
frame is set to 360px wide by 300px high in the CSS. 
"Cell" dimensions are the sum of 'imgwidth' + 'cellspace_horiz'
and 'imgheight' + 'cellspace_vert' ('cellwidth' and 'cellheight'). 

The viewer dimensions should be some multiple of 
cellwidth and of cellheight so that the icons will fit nicely
in the viewer. #pan-frame dimensions are set in the 
CSS, not in the scripting!

****************************************************/

 $(document).ready(function() {

//////////////////  Definable values...

var imgwidth = 90;// Must match actual icon image width.
var cellspace_horiz = 30;// Sets horizontal spacing between the icons.

var imgheight = 90;// Must match actual icon image height.
var cellspace_vert = 10;// Sets vertical spacing between the icons.

var delay = 250;  // Sets one-click delay in milliseconds, allows double-click time to override if necessary.
var shortslide = 1000; // Sets one-click duration for icon shift in milliseconds.
var longslide = 1500; // Sets double-click duration for icon shift in milliseconds.

var rowcount = 2;// Sets number of rows to appear in the viewer.
var startoffset_left = 0;// Offsets the grid the given number of cells from left edge, on load.
var longslideunits = 3;// Sets the slide length (in cell units) for a double click (single-click goes one unit).

///////////////// end definable values.



/***************** Math adjustments and var declarations ********************/

var timeout;
var sliderleft;
var newsliderleft;

var framewidth = $("#pan-frame").innerWidth();
var cellwidth = imgwidth + cellspace_horiz;
var cellheight = imgwidth + cellspace_vert;
var spacelength_horiz = cellspace_horiz/2;
var spacelength_vert = cellspace_vert/2;
var multicellwidth = cellwidth * longslideunits;
var slider_preleft = -(startoffset_left * cellwidth);
var iconcount = $("#pan-slider a").length;
var gridlength = Math.ceil(iconcount/rowcount);
var gridwidth = gridlength * cellwidth;
var maxleft = -(gridwidth - framewidth);

// Gets current value of "left" for #pan-slider...
function findOffsets() { 
		sliderleft = parseInt($("#pan-slider").css("left"));
		}

// Applies width and starting icon offset to #pan-slider...
$("#pan-slider").css({
	'left' : slider_preleft+'px',
	'width' : gridwidth+'px'
	});

// Applies spacing margins to icons...
$("#pan-slider a").css({
	'padding-top' : spacelength_vert+'px',
	'padding-right' : spacelength_horiz+'px',
	'padding-bottom' : spacelength_vert+'px',
	'padding-left' : spacelength_horiz+'px'
	});

// Stops click timer when called...
function stopTimer() {
	if (timeout) {
            clearTimeout(timeout);
            timeout = null;
			}
}


/******************** Primary event handlers and associated functions ******************/

$("#pan-left")
.click(function(){
	stopTimer();
	timeout = true;
	limitSideLeft();// Prevents overshoot on left end and restores hidden right arrow...
	// animate on single click after a timer runs [delay]...
	timeout = setTimeout(function(){
		$("#pan-slider")
			.animate({left: '+='+newsliderleft+'px'}, shortslide, function(){
				$("#pan-slider").stop(true); if (sliderleft >= -(cellwidth)) {$("#pan-left").hide();}
				});}, delay);
						})
.dblclick(function(){
	stopTimer();
	limitSideLeft();// Prevents overshoot on left end and restores hidden right arrow...
	// animate on double click...
	$("#pan-slider")
		.animate({left: '+='+newsliderleft+'px'}, longslide, function(){
			$("#pan-slider").stop(true); if (sliderleft >= -(multicellwidth)) {$("#pan-left").hide();}});
});


$("#pan-right")
.click(function(){
	stopTimer();
	timeout = true;
	limitSideRight();// Prevents overshoot on right end and restores hidden left arrow...
	// animate on single click after a timer runs [delay], then callback the stop() and hide() methods for cleanup...
	timeout = setTimeout(function(){
		$("#pan-slider")
			.animate({left: '-='+newsliderleft+'px'}, shortslide, function(){
				$("#pan-slider").stop(true); if (sliderleft - cellwidth <= maxleft) {$("#pan-right").hide();}
				});}, delay);
						})
.dblclick(function(){
	stopTimer();
	limitSideRight();// Prevents overshoot on right end and restores hidden left arrow...
	// animate on double click, then callback the stop() and hide() methods for cleanup...
	$("#pan-slider")
		.animate({left: '-='+newsliderleft+'px'}, longslide, function(){
			$("#pan-slider").stop(true); if (sliderleft - multicellwidth <= maxleft) {$("#pan-right").hide();}});
});


// Prevents overshoot on left end and restores hidden right arrow...
function limitSideLeft() {
findOffsets();
if(timeout) {
		if (sliderleft <= -cellwidth) {
		newsliderleft = cellwidth;
		} else {
		newsliderleft = 0;
		}
} else {
	var testlength = sliderleft + multicellwidth;
		if (testlength <= 0) {
		newsliderleft = multicellwidth;
		} else {
		newsliderleft = multicellwidth - testlength;
}}
		$("#pan-right").show();// Restores right button...
}


// Prevents overshoot on right end and restores hidden left arrow...
function limitSideRight() {
findOffsets();
if(timeout) {
	var testlength = maxleft - sliderleft;
		if (testlength <= -cellwidth) {
		newsliderleft = cellwidth;
		} else {
		newsliderleft = 0;
		}
		} else {
	var testlength = maxleft - sliderleft;
		if (testlength <= -multicellwidth) {
		newsliderleft = multicellwidth;
		} else {
		newsliderleft = -(testlength);
}}
		$("#pan-left").show();// Restores left button...
}


/************** Miscellaneous scripting ***************/

// Controls button behavior...
$("#pan-right,#pan-left")	
	.mouseover(function(){$(this).css({'opacity' : '.7', 'filter' : 'alpha(opacity=70)'});})
	.mouseout(function(){$(this).css({'opacity' : '.2', 'filter' : 'alpha(opacity=20)'});});

$("#pan-slider a:last-child").css('margin-right','-3px');// IE6 bugfix.

$("#pan-slider a").click(function() {$(this).blur()});// Kills focus box around clicked icon links.


 });//end