var VZW = VZW || {};

VZW.Modal = {

	modal				: null,
	overlay				: null,
	maxOverlayOpacity	: 0.75,
	overlayVisible		: false,
	debug				: false,
	inited				: false,
	
	initialize : function(o)
	{
		if (this.inited)
			return;
			
		this.initLinks();		// automatically add click event to links with rel of 'modal'. will use the link href for modal id
		this.initClose();
		this.initOverlay();
		this.initEvents();

		this.inited = true;
	},

	initLinks : function()
	{
		var self = this;

		$$('a[rel^=modal]').each(function(link) 
		{
			self.initLink(link);
		});
	},

	initLink : function(link)
	{
		var self = this;
		
		link.addEvent('click', function(e) {
			e.preventDefault();

			var options = this.rel.split(','),
				param	= {iframe: false, ajax: false};

			if (options.length > 1) {
				if (options[1].toLowerCase() === 'iframe') {
					param.iframe 	= true;
					param.height	= parseInt(options[2], 10);
					param.width		= parseInt(options[3], 10);
				} else {
					param.height	= parseInt(options[1], 10);
					param.width		= parseInt(options[2], 10);
				}
			}

			self.show(e, this.href, param);
		});
	},

	initClose : function()
	{
		$$('.modal a.close').addEvent('click', this.close.bind(this));
	},

	getID : function(href)
	{
		var index = href.lastIndexOf('#');

		if (index !== -1)
			return href.substr(index + 1);
		else
			return href;
	},

	initOverlay : function()
	{
		if (!$('overlay')) {
			var overlay = new Element('div', {'class': 'overlay', 'id': 'overlay'});
			$(document.body).grab(overlay);

			overlay.setStyles({display: 'none', opacity: 0});
			this.overlay = overlay;
		}
	},

	initEvents : function()
	{
		$(window).addEvent('resize', this.resizeOverlay.bind(this));
	},

	getIframe : function(href, param)
	{
		var self	= this,
			elem 	= $('modalIframeWrapper'),
			iframe	= $('modalIframe');
		
		if (!elem)
			elem = new Element('div', {id: 'modalIframeWrapper', html: '<h1><span class="title">&nbsp;</span><a href="javascript:void(0)" class="close">Close</a></h1>', 'class': 'modal'});

		if (!iframe) {
			iframe = new Element('iframe', {id: 'modalIframe', src: href, frameBorder: '0'});
			iframe.setStyles({width: param.width, height: param.height, visibility: 'hidden'});
			
			$(document.body).grab(elem.grab(iframe));
			$('modalIframeWrapper').getElement('h1 span.title').set('html', param.title || '&nbsp;');

			this.initClose();

			iframe.addEvent('load', function() { self.resizeIframe(); });
		} else {
			iframe.src = href;
			iframe.setStyles({width: param.width, height: param.height, visibility: 'hidden'});
			iframe.addEvent('load', function() { self.resizeIframe(); });
		}

		param.height = null;	// determine the height automatically since we're adding a header

		return elem;
	},

	resizeIframe : function()
	{
		var iframe 	= $('modalIframe'), 
			body, 
			doc, 
			height,
			width,
			self 	= this;

		try 									// IE8 throws a security restriciton error if iframe is on a different domain
		{
			if (iframe.contentDocument) {		// W3C
				doc		= iframe.contentDocument.documentElement;
				body	= iframe.contentDocument.body;
				height	= Math.max(body.scrollHeight, doc.scrollHeight);
				width	= Math.max(body.scrollWidth, doc.scrollWidth);
				if (this.debug) console.log('W3C: height = ' + height + ', width = ' + width);
			} else {							// IE
				body	= iframe.contentWindow.document.body;
				height	= body.scrollHeight + 2 * body.offsetTop;
				width	= body.scrollWidth + 2 * body.offsetLeft;
				if (this.debug) console.log('IE: ' + (iframe.contentWindow.document.body.scrollHeight + 2 * iframe.contentWindow.document.body.offsetTop));
			}
		}
		catch(e) { }
		
		if (height) {
			iframe.setStyles({height: height + 5, width: width + 5});
			this.center($('modalIframeWrapper'), {animate: true, callback: function() {self.showIframe();} });
		} else {
			self.showIframe();
		}
	},

	showIframe : function()
	{
		var iframe = $('modalIframe');
		iframe.setStyles({opacity: 0, visibility: 'visible'}).tween('opacity', 1);
	},

	getModal : function(href)
	{
		var id	= this.getID(href);

		if (id)
			return $(id);
	},

	show : function(e, href, param)
	{
		if (e && e.preventDefault)
			e.preventDefault();

		var elem;

		if (param.iframe)
			elem = this.getIframe(href, param);
		else
			elem = this.getModal(href);

		if (!elem)
			return;

		this.hideModal(this.modal);

		$(document).fireEvent('beginShowModal', {modal: elem});

		elem.setStyle('opacity', 0);
		this.center(elem, param || {});
		this.showOverlay();
		this.showModal(elem);

		this.modal	= elem;
	},

	close : function(e)
	{
		if (e)
			e.preventDefault();

		this.hideOverlay();
		this.hideModal(this.modal);

		this.modal = null;
	},

	center : function(elem, param)
	{
		param		= param || {};
		var scroll	= $(document.body).getScroll();
		var win		= $(window).getSize();

		// get elem dimensions - element.measure() in mootools is a little funky so do it ourselves
		elem.addClass('measure');

		var width 	= param.width || elem.offsetWidth;
		var height 	= param.height || elem.offsetHeight;
		//console.log(width)

		elem.removeClass('measure');

		var top			= '50%';
		var left		= '50%';
		var marginLeft	= -width / 2 + scroll.x;
		var marginTop	= -height / 2 + scroll.y;

		if (height > win.y) {
			top			= scroll.y;
			marginTop	= 20;
		}

		if (width > win.x) {
			left		= scroll.x;
			marginLeft	= 20;
		}

		if (param.animate) {
			var morphs = {marginLeft: marginLeft, marginTop: marginTop, width: width};
			var styles = {position: 'absolute', visibility: 'visible', display: 'block', left: left, top: top, opacity: 1};
			var callback = param.callback || function(){};
			if (param.height)
				morphs.height = param.height;
			else
				styles.height = 'auto';

			elem.setStyles(styles);
			new Fx.Morph(elem, {duration: 'short', onComplete: callback}).start(morphs);
		} else {
			elem.setStyles({left: left, marginLeft: marginLeft, top: top, marginTop: marginTop, position: 'absolute', visibility: 'visible', display: 'block', width: width, height: param.height || 'auto'});
			if (param.callback)
				param.callback();
		}
	},

	showModal : function(elem)
	{
		new Fx.Tween(elem, {property: 'opacity', duration: 'short', onComplete: function() 
			{ 
				$(document).fireEvent('endShowModal',  {target: elem}); 
			} 
			}).start(elem.getStyle('opacity'), 1);
	},

	hideModal : function(elem)
	{
		if (!elem)
			return;

		$(document).fireEvent('beginHideModal',  {target: elem});

		this.modal = null;

		new Fx.Tween(elem, {property: 'opacity', duration: 'short', onComplete: function() 
			{ 
				elem.style.display = 'none';
				if ($('modalIframeWrapper')) $('modalIframeWrapper').destroy();		// remove iframe otherwise flash will still be playing
				$(document).fireEvent('endHideModal',  {target: elem}); 
			} 
			}).start(elem.getStyle('opacity'), 0);
	},

	toggleOverlay : function(show)
	{
		if ($defined(show)) {
			if (show)
				this.showOverlay();
			else
				this.hideOverlay();
		} else {
			if (this.overlay.style.display === 'none')
				this.showOverlay();
			else
				this.hideOverlay();
		}
	},

	showOverlay : function()
	{
		var overlay = this.overlay,
			self	= this;

		if (!overlay) {
			this.initialize();
			overlay = this.overlay;
		}

		if (overlay.getStyle('opacity') === this.maxOverlayOpacity)
			return;

		$(document).fireEvent('beginShowOverlay');

		self.overlayVisible = true;
		this.resizeOverlay();

		overlay.style.display = 'block';

		new Fx.Tween(overlay, {property: 'opacity', duration: 'short', onComplete: function() 
			{
				$(document).fireEvent('endShowOverlay'); 
			} 
			}).start(overlay.getStyle('opacity'), this.maxOverlayOpacity);
	},

	hideOverlay : function()
	{
		var overlay = this.overlay,
			self	= this;

		$(document).fireEvent('beginHideOverlay');

		new Fx.Tween(overlay, {property: 'opacity', duration: 'short', onComplete: function() 
			{ 
				overlay.style.display = 'none';
				self.overlayVisible = false;
				$(document).fireEvent('endHideOverlay'); 
			} 
			}).start(overlay.getStyle('opacity'), 0);
	},

	resizeOverlay : function()
	{
		if (this.overlayVisible) {
			if (!this.doc)
				this.doc = document.documentElement ? document.documentElement : document.body;

			var doc 	= this.doc,
				overlay	= this.overlay,
				height	= Math.max(doc.scrollHeight, doc.clientHeight),
				width	= Math.max(doc.scrollWidth, doc.clientWidth);

			overlay.setStyles({width: '100%', height: '100%'});						// set to 100% to remove any scrollbars caused by the size of the overlay
			overlay.setStyles({width: width, height: height});
		}
	}
};

VZW.Select = {

	a_selector 		: 'a.selectLink',
	menu_selector	: 'ul.select menu',
	
	initialize : function(o)
	{
		this.initSelects();
	},

	initSelects : function()
	{
		$$(this.a_selector).addEvent('click', function(e) {
			e.preventDefault();

			if (this.hasClass('disabled'))
				return;

			var menu = this.getNext('menu');
			if (menu.getStyle('display') === 'none')
				menu.setStyles({display: 'block', left: this.offsetLeft});
			else
				menu.setStyle('display', 'none');
		}).addEvent('focus', function(e) {
			$$(this.menu_selector).setStyle('display', 'none');
			this.fireEvent('click', e);
		});

		$$(this.menu_selector).addEvent('mouseleave', function(e) {
			this.setStyle('display', 'none');
		});
	}
};

VZW.Event = {
	
	delegate : function(elem, selector, event, fn)
	{
		var last;

		elem.addEvent(event, function(e) {
			var triggers 	= $$(selector);
			var parents		= $(e.target).getParents();
			parents.unshift(e.target);

			if (parents.contains(last)) {
				fn.bind(last, e)();
				return;
			}

			for (var i = 0, l = parents.length; i < l; ++i ) {
				if (triggers.contains(parents[i])) {
					last = parents[i];
					fn.bind(parents[i], e)();
				} else if (parents[i] == elem) {
					return;
				}
			}
		});
	}
};

VZW.PhoneSelect = {
	
	brands 		: {},												// brands.brand = [{model, img, p, m, option}]
	models		: {},												// sorted array of models for each brand: models.brand = [model, model]
	devices		: null,												// all <li> elements with devices
	ulID		: 'phoneList',										// id for the UL that holds the phones
	imgPath		: 'https://scache.vzw.com/images_b2c/phones/med/',	// path to phone image
	supportURL	: 'http://support.vzw.com/clc/devices/index.html',	// path to device support page
	populated	: false,											// set to true once all the phones are created
	all			: 'All',											// value for removing a filter, may present a localization issue
	brandFilter	: false,											// are the devices filtered by brand
	modelFilter	: false,											// are the devices filtered by model
	textFilter	: false,											// are the devices filtered by user entered text
	phoneList	: null,												// list of phones in the same order as they're passed to addPhones
	hovered		: null,												// save which li have the hover state - performance hack for IE
	onComplete	: null,												// function to execute instead of forwarding to device support page

	initialize : function(o)
	{
		this.addPhones(o);
		this.initEvents();

		$('phoneSearch').value = '';

		return this;
	},

	initEvents : function()
	{
		var self = this;

		// show animated loading icon since it can take a while to populate
		document.addEvent('beginShowModal', function() { 
			if (!self.populated)
				$(self.ulID).addClass('loading'); 
		});

		// fix pngs for IE6, have to wait until images are visible otherwise width & height are 0
		$(document).addEvent('endShowModal', function() {
			self.populate();
			$(self.ulID).scrollTo(0, 0);
			self.fixPNG();
		});

		// hover event over devices
		VZW.Event.delegate($('phoneList'), '#phoneList li', 'mouseover', function(e) { self.hoverDevice(e, this); });
		$('selectPhoneModal').addEvent('mouseover', function(e) { self.unhoverDevice(); });

		// click event for selecting device
		VZW.Event.delegate($('phoneList'), '#phoneList li', 'click', function(e) { self.selectDevice(e, this); });

		// change brand filter
		VZW.Event.delegate($('brandMenu'), '#brandMenu a', 'click', function(e) { self.filterBrand(e, this); });

		// change model filter
		VZW.Event.delegate($('modelMenu'), '#modelMenu a', 'click', function(e) { self.filterModel(e, this); });

		// change text filter
		$('phoneSearch').addEvents({'keyup': function(e) { self.filterText(this); }, 'change': function(e) { self.filterText(this); }});

		// clear filters
		$('clearPhoneFilter').addEvent('click', function(e) { self.clearFilters(e); });

		// go to device support page
		$('gotoSupport').addEvent('click', function(e) { self.finish(e); });

		// cancel
		$$('#selectPhoneModal .close').addEvent('click', function(e) { self.onComplete = null; });
	},

	show : function(param)
	{
		$(this.ulID).scrollTo(0, 0);
		VZW.Modal.show(null, 'selectPhoneModal', param);
	},

	close : function()
	{
		this.clearFilters();
		this.onComplete = null;
		VZW.Modal.close();
	},

	populate : function()
	{
		if (!this.populated)
			this.render();
		
		this.populated 	= true;
		this.devices 	= $$('#' + this.ulID + ' li');
	},

	hoverDevice : function(e, link)
	{
		e.stop();
		this.unhoverDevice();
		this.hovered = link;
		link.addClass('hover');
	},

	unhoverDevice : function()
	{
		if (this.hovered) {
			this.hovered.removeClass('hover');
			//this.hovered = null;
		}
	},

	selectDevice : function(e, link)
	{
		var active = $$('#phoneList li.active')[0];


		if (link !== active) {
			this.unselectDevice();
			link.addClass('active');
			$('gotoSupport').removeClass('disabled');
		} else {
			active.removeClass('hover');
			this.finish(e);
		}
	},

	unselectDevice : function()
	{
		this.devices.removeClass('active');
		$('gotoSupport').addClass('disabled');
	},

	isDeviceSelected : function()
	{
		return 	$$('#phoneList li.active').length;
	},

	finish : function(e)
	{
		e.preventDefault();

		if ($('gotoSupport').hasClass('disabled'))
			return;

		var li 	= $$('#phoneList li.active')[0],
			url = this.supportURL,
			m, p;

		/*if (!li) {
			// user didn't select a device, but if only 1 device is visible use that
			var temp = this.devices.filter(function(item) { return !item.hasClass('hidden'); });
			if (temp.length == 1)
				li = temp;
		}*/

		if (li) {
			if (this.onComplete) {
				this.onComplete({device: li.retrieve('device'), li: li});
				this.close();
				this.onComplete = null;
			} else {
				m = li.get('m') || '';
				p = li.get('p') || '';
				url += '?p=' + p + '&m=' + m;
				location.href = url;
			}
		}
	},

	filterBrand : function(e, link)
	{
		e.preventDefault();

		var brand	= link.href.substr(link.href.lastIndexOf('#') + 1);

		$$('#brandMenu a').removeClass('selected');
		link.addClass('selected');

		var text	= link.get('text');
		$('brandSelection').innerHTML = this.shortenName(text, 'toolbar');
		$('brandMenu').fireEvent('mouseleave');

		if (text !== this.all) {
			this.setFilter(text, 'brandFilter');
		} else {
			this.removeFilter('brandFilter');
		}

		this.populateFilter('model', this.models[brand]);
		this.removeFilter('modelFilter');
		this.filter();
	},

	filterModel : function(e, link)
	{
		e.preventDefault();

		$$('#modelMenu a').removeClass('selected');
		link.addClass('selected');

		var text	= link.get('text');
		$('modelSelection').innerHTML = this.shortenName(text, 'toolbar');
		$('modelMenu').fireEvent('mouseleave');

		if (text != this.all) {
			this.setFilter(text, 'modelFilter');
		} else {
			this.removeFilter('modelFilter');
		}

		this.filter();
	},

	filterText : function(field)
	{
		var text = field.value;

		if (text !== '') {
			this.setFilter(text, 'textFilter');
		} else {
			this.removeFilter('textFilter');
		}

		this.filter();
	},

	setFilter : function(search, filter)
	{
		var ps	= $$('#' + this.ulID + ' p'),
			text,
			p;

		this[filter] = true;

		this.devices.removeClass(filter);

		for (var i = ps.length; --i >= 0; ) {
			p = ps[i];
			text = p.title.toLowerCase();
			if (text.search(search.toLowerCase().replace(/([\(\)\&\*\.\\])/g, "\\$1")) != -1) 
				p.parentNode.addClass(filter);
		}
	},

	removeFilter : function(filter)
	{
		this.devices.removeClass(filter);
		this[filter] = false;
	},

	clearFilters : function(e)
	{
		if (e)
			e.preventDefault();

		$('phoneSearch').value = '';
		this.filterText($('phoneSearch'));

		$('brandMenu').fireEvent('click', {target: $('brandMenu').getFirst().getElement('a'), preventDefault: function(){}});
	
		this.unselectDevice();
	},

	filter : function()
	{
		var lis = this.devices;

		lis.removeClass('hidden');

		if (this.isFiltered()) {
			lis.each(function(li) {
				if (li.className === '') {
					li.className = 'hidden';
				} else {
					//if (this.brandFilter && !li.hasClass('brandFilter')) li.addClass('hidden');
					//if (this.modelFilter && !li.hasClass('modelFilter')) li.addClass('hidden');
					//if (this.textFilter && !li.hasClass('textFilter')) li.addClass('hidden');
					if ( (this.brandFilter && !li.hasClass('brandFilter')) || (this.modelFilter && !li.hasClass('modelFilter')) || (this.textFilter && !li.hasClass('textFilter')) ) {
						li.addClass('hidden');
						li.removeClass('active');
					}
				}
			}, this);
		}

		if (!this.isDeviceSelected())
			this.unselectDevice();
	},

	isFiltered : function()
	{
		return this.brandFilter || this.modelFilter || this.textFilter;
	},

	hash : function(name)
	{
		return name.replace(/[^a-zA-Z]/g, '');
	},

	fixPNG : function()
	{
		if (!Browser.ie6)
			return;

		$$('#' + this.ulID + ' img').each(function(img) {
			var imgName = img.src.toUpperCase();
			if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
			{
				var imgID = (img.id) ? "id='" + img.id + "' " : "";
				var imgClass = (img.className) ? "class='" + img.className + "' " : "";
				var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
				var imgStyle = "display:inline-block" + img.style.cssText ;
				if (img.align == "left") imgStyle = "float:left;" + imgStyle;
				if (img.align == "right") imgStyle = "float:right;" + imgStyle;
				if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
				var strNewHTML = "<span " + imgID + imgClass + imgTitle
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" ;
				img.outerHTML = strNewHTML;
			}
		});
	},

	addPhones : function(phones)
	{
		var device, phoneList = []; 

		if (phones) {
			for (var phone in phones) {
				if (phones.hasOwnProperty(phone)) {
					device = phones[phone];

					phoneList.push({brand: device[0], device: this.addPhone(device)});
				}
			}

			this.updateFilters();
			this.phoneList = phoneList;
		}
	},

	addPhone : function(device)
	{
		var brand	= device[0],
			brands 	= this.brands,
			info	= {model: device[1], img: device[2], p: device[3], m: device[4], option: device[5], name: device[6]};

		if (brands[brand]) {
			brands[brand].push(info);
		} else {
			brands[brand] = [info];
		}

		return info;
	},

	render : function(brandFilter, modelFilter)
	{
		var devices	= this.phoneList,
			path	= this.imgPath,
			device,
			brand,
			phone,
			desc,
			lis		= [];

		for (var i = 0, l = devices.length; i < l; ++i) {
			device	= devices[i];
			brand	= device.brand;

			if (brandFilter && brand.toLowerCase() != brandFilter.toLowerCase())
				continue;

			phone = device.device;
			if (modelFilter && phone.model.toLowerCase() != modelFilter.toLowerCase())
				continue;
			
			if (phone.name) {
				desc = phone.name;
			} else {
				desc = brand + ' ' + phone.model + ' ' + phone.option;
			}
			lis.push(new Element('li', {m: phone.m, p: phone.p, html: '<img src="' + path + phone.img + '" width="79" height="120" alt="' + desc + '" title="' + desc + '" /><p title="' + desc + '">' + this.shortenName(desc) + '</p>'}).store('device', devices[i]));
		}

		$(this.ulID).empty().removeClass('loading').adopt(lis);
	},

	hasModel : function(models, model)
	{
		for (var i = models.length; --i >= 0; ) {
			if (models[i].model.toLowerCase() == model.toLowerCase())
				return true;
		}

		return false;
	},

	updateFilters : function()
	{
		var brands		= this.brands,
			brandList	= [],
			modelList 	= {},
			models		= [];

		var caseInsensitiveSort = function(a, b) {
			if (a.toLowerCase() < b.toLowerCase()) return -1;
			if (a.toLowerCase() > b.toLowerCase()) return 1;
			return 0;
		};

		modelList.All = [];

		for (var brand in brands) {
			if (brands.hasOwnProperty(brand)) {
				brandList.push(brand);
				models = [];
				for (var i = 0, l = brands[brand].length; i < l; ++i) {
					models.push(brands[brand][i].model);
				}
				models.sort(caseInsensitiveSort);
				modelList[this.hash(brand)] = models;
			}
		}

		brandList.sort(caseInsensitiveSort);

		this.models = modelList;

		this.populateFilter('brand', brandList);
	},

	populateFilter : function(type, list)
	{
		var menu 	= $(type + 'Menu'),
			item,
			lis		= [],
			models	= [];

		lis[0] = new Element('li', {html: '<a href="#All" class="selected"><span>All</span></a>'});

		for (var i = 0, l = list.length; i < l; ++i) {
			item = list[i];
			if (!this.hasModel(models, item)) {
				lis.push(new Element('li', {html: '<a href="#' + this.hash(item) + '"><span>' + item + '</span></a>'}));
				models.push({model: item});
			}
		}

		menu.empty().adopt(lis);
		$(type + 'Selection').innerHTML = 'All';

		// disable model menu when showing all brands
		var menuTrigger = $('modelMenu').getPrevious();
		if ($$('#modelMenu li').length > 1)
			menuTrigger.removeClass('disabled');
		else
			if (!menuTrigger.hasClass('disabled'))
				menuTrigger.addClass('disabled');
	},

	shortenName : function(name, max)
	{
		name = name.replace("<br />", "");
		var entities = name.match(/&[a-zA-Z0-9]+;/g), 
			num = 0;

		max		= max == 'toolbar' ? 12 : 43;
		
		if (entities) {
			for (var i = entities.length; --i >= 0; ) {
				num += entities[0].length;
			}
			
			max 	= max + num - entities.length;
		}

		if (name.length > max)
			return name.substr(0, max) + '&hellip;';
		else
			return name;
	}
};


VZW.Carousel = {
	
	next : null,
	prev : null,
	index : 4,
	width : 0,
	total : 0,
	num : 3,
	minImg : 4, // images shown at a time (4)
	maxChar : 25,
	
	initialize : function() 
	{
		if ($("carousel")) {
			
			this.next = $$("div#carousel .next")[0];
			this.prev = $$("div#carousel .prev")[0];
		
			this.activation();
		}
		
	},
	
	activation : function() 
	{
		var thumbs = $$("ul.thumbs li");
		this.total = thumbs.length;
		
		var self = this;
		
		if (this.total > this.minImg) {
			this.width = thumbs[0].offsetWidth + 2 * thumbs[0].offsetLeft;
			this.next.setStyle('visibility', 'visible');
			this.prev.setStyle('visibility', 'visible');
			this.next.addEvent('click', function(e) {self.goNext(e);});
			this.prev.addEvent('click', function(e) {self.goPrev(e);});
		}
	},
	
	goNext : function(e) 
	{
		e.preventDefault();
		
		if (!this.next.hasClass("disabled")) {
			this.index += Math.min(this.num, this.total - this.index);
			
			$$("ul.thumbs").tween('margin-left', -this.width * (this.index - this.minImg));
			
			if (this.index === this.total) {
				this.next.addClass('disabled');
			}
			
			this.prev.removeClass('disabled');
		}		
		
	},
	
	goPrev : function(e) 
	{
		e.preventDefault();
		
		var minImg = this.minImg;
		
		if (!this.prev.hasClass("disabled")) {
			this.index -= Math.min(this.num, this.index - minImg);
			$$("ul.thumbs").tween('margin-left', -this.width * (this.index - minImg));
			
			if (this.index === minImg) {
				this.prev.addClass('disabled');
			}
			
			this.next.removeClass('disabled');
		}	
		
	}
};