// Copyright (C) 2008 Stephane Lavergne <http://www.imars.com/>
//
// This program is free software: you can redistribute it and/or modify it
// under the terms of the GNU General Public License as published by the Free
// Software Foundation, either version 3 of the License, or (at your option)
// any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
// more details.
//
// You should have received a copy of the GNU General Public License along
// with this program. If not, see <http://www.gnu.org/licenses/>.

/*

For example:

imars.require("imars.anim.thumbs");  // If you use imars-require.js

imars.anim.thumbs.create('myElementId', [
		3,
		5,
		[ '/img/go-left.png', '/img/go-right.png', 20, 20 ],
		[ '/img/magnify.png', 20, 20 ],
		[
			[ 'http://thumbnail/url', thumb_width, thumb_height, 'http://anchor/url' ],
			[ 'http://thumbnail/url', thumb_width, thumb_height, 'http://anchor/url' ]
			...
		]
	]
);

The above would populate your element id="myElementId" with the first 3 images
of the supplied list (with a bottom-right watermark on each, along with left
and right arrows) then allow you to invoke goLeft('myElementId') and
goRight('myElementId') to scroll through more thumbnails. Each new thumbnail
to the right is loaded on demand, and kept in the browser's cache thereafter.
Thumbnails would have 5px of space between each other.

Note that you must not add a comma at the end of the last image array, or else
some versions of Internet Explorer will think there's one too many images.

Note that you can skip the buttons or the watermark by specifying false
instead of an array.

Or even better, I would use onLoad to make sure this runs after the page has
finished loading:

imars.onLoad(imars.anim.thumbs.create, [
		'myElementId',
		[
			3,
			5,
			false,
			false,
			[
				[ 'http://thumbnail/url', thumb_width, thumb_height, 'http://anchor/url' ],
				[ 'http://thumbnail/url', thumb_width, thumb_height, 'http://anchor/url' ]
				...
			]
		]
	]
);

More specifically, the structure looks like this:

something id=myElementId
	table tr td  (if you specified buttonURL)
		div class=thumbs
			div id=myElementId_inside
				a class=zoomable
					img class=zoomer  (if you specified watermarkURL)

*/

imars.require("imars.anim");

imars.anim.thumbs = {

	scrolls: [],

	create: function (id, def) {
		var e = (document.getElementById && document.createElement) ? document.getElementById(id) : null;
		if (e && e.innerHTML) {
			imars.anim.thumbs.scrolls[id] = def;
			imars.anim.thumbs.scrolls[id][5] = 0;  // Initial position is left-most
			imars.anim.thumbs.scrolls[id][6] = 0;  // We've never been farther right
			var out = '';
			if (def[2]) {
				out += '<table border="0" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle"><a href="#" onclick="return imars.anim.thumbs.goLeft(\''+id+'\');"><img src="'+def[2][0]+'" width="'+def[2][2]+'" height="'+def[2][3]+'" border="0" /></td><td>' + "\n";
			};
			out += '<div class="thumbs" style="position: relative; overflow: hidden; width: '+( (def[1] * (def[0] - 1)) + (def[4][0][1] * def[0]) )+'px;"><div id="'+id+'_inside" style="position: relative; top: 0; left: 0; white-space: nowrap;">';
			var init = min(def[4].length, def[0]);
			for (var i=0; i < init; i++) {
				out += '<a class="zoomable" href="'+def[4][i][3]+'" target="_blank"><img src="'+def[4][i][0]+'" width="'+def[4][i][1]+'" height="'+def[4][i][2]+'" style="border: none; margin-right: '+def[1]+'px; z-index: 1;" />';
				if (def[3]) {
					out += '<img src="'+def[3][0]+'" width="'+def[3][1]+'" height="'+def[3][2]+'" class="zoomer" style="border: none; z-index: 2; margin-right: '+def[1]+'px; margin-left: -'+(def[3][1]+def[1])+'px;" />';
				};
				out += '</a>';
			};
			out += "</div></div>\n";
			if (def[2]) {
				out += '</td><td align="center" valign="middle"><a href="#" onclick="return imars.anim.thumbs.goRight(\''+id+'\');"><img src="'+def[2][1]+'" width="'+def[2][2]+'" height="'+def[2][3]+'" border="0" /></a></td></tr></table>';
			};
			e.innerHTML = out;
		};
	},

	goLeft: function (id) {
		if (imars.anim.thumbs.scrolls[id]) {
			if (imars.anim.thumbs.scrolls[id][5] > 0) {
				imars.anim.thumbs.scrolls[id][5]--;
				imars.anim.scroll(id+'_inside', imars.anim.thumbs.scrolls[id][4][imars.anim.thumbs.scrolls[id][5]][1] + imars.anim.thumbs.scrolls[id][1], 0, 0.3);
			};
		};
		return false;
	},

	goRight: function (id) {
		if (imars.anim.thumbs.scrolls[id]) {
			if (imars.anim.thumbs.scrolls[id][5] < (imars.anim.thumbs.scrolls[id][4].length - imars.anim.thumbs.scrolls[id][0])) {
				var cur = imars.anim.thumbs.scrolls[id][5] + imars.anim.thumbs.scrolls[id][0];
				imars.anim.thumbs.scrolls[id][5]++;
				if (imars.anim.thumbs.scrolls[id][5] > imars.anim.thumbs.scrolls[id][6]) {
					var e = document.getElementById(id+'_inside');
					imars.anim.thumbs.scrolls[id][6] = imars.anim.thumbs.scrolls[id][5];
					var ni = document.createElement('img');
					ni.src = imars.anim.thumbs.scrolls[id][4][cur][0];
					ni.width = imars.anim.thumbs.scrolls[id][4][cur][1];
					ni.height = imars.anim.thumbs.scrolls[id][4][cur][2];
					ni.style.border = 'none';
					ni.style.marginRight = imars.anim.thumbs.scrolls[id][1] + 'px';
					ni.style.zIndex = '1';
					var na = document.createElement('a');
					na.className = 'zoomable';
					na.href = imars.anim.thumbs.scrolls[id][4][cur][3];
					na.target = '_blank';
					na.appendChild(ni);
					var wmk = imars.anim.thumbs.scrolls[id][3];
					if (wmk) {
						var nw = document.createElement('img');
						nw.src = wmk[0];
						nw.width = wmk[1];
						nw.height = wmk[2];
						nw.className = 'zoomer';
						nw.style.border = 'none';
						nw.style.zIndex = '2';
						nw.style.marginLeft = '-' + (wmk[1] + imars.anim.thumbs.scrolls[id][1]) + 'px';
						nw.style.marginRight = imars.anim.thumbs.scrolls[id][1] + 'px';
						na.appendChild(nw);
					};
					e.appendChild(na);
				};
				imars.anim.scroll(id+'_inside', 0 - (imars.anim.thumbs.scrolls[id][4][cur][1] + imars.anim.thumbs.scrolls[id][1]), 0, 0.3);
			};
		};
		return false;
	}

};