var category = {
	images: new Array(),
	openCloseJacketFeatures: function() {
		if ($('jacketcontainer').getStyle('display') == 'none') {
			new Effect.SlideDown('jacketcontainer', { duration: 0.5 , queue: { position: 'end', scope: 'categoryfeatures' } });
		} else {
			new Effect.SlideUp('jacketcontainer', { duration: 0.5 , queue: { position: 'end', scope: 'categoryfeatures' } });
		}
	},
	openClosePantFeatures: function() {
		if ($('pantcontainer').getStyle('display') == 'none') {
			new Effect.SlideDown('pantcontainer', { duration: 0.5 , queue: { position: 'end', scope: 'categoryfeatures' } });
		} else {
			new Effect.SlideUp('pantcontainer', { duration: 0.5 , queue: { position: 'end', scope: 'categoryfeatures' } });
		}
	},
	featureoverlay: false,
	showFeature: function(features, i) {
		
		category.currentFeatures = features;
		category.currentFeatureNumber = i;
		
		category.images = new Array();
		
		category.loadOverlay();
		
		var scrollamount = getScrollXY();		
		var sizes = category.getOverlaySize();
				
		category.featuretitle.update(features[i].title);
		category.featuredescription.update(features[i].description);
		if (features[i].image == '') {
			$(category.featureimage).hide();
		} else {
			category.featureimage.src = features[i].image;
			$(category.featureimage).show();
		}	
		category.featureoverlaycontent.setStyle({ top: (((sizes[1]-category.featureoverlaycontent.getHeight())/2)+scrollamount[1])+'px', left: ((sizes[0]-category.featureoverlaycontent.getWidth())/2)+'px' });

		category.featureoverlay.show();
		new Effect.Morph(
										 category.featureoverlay, 
										 { 
										 		style: 'opacity: 0.7', 
												duration: 0.3, 
												afterFinish: function() { 
													category.featureoverlaycontent.show(); 
												} 
											});
		
		category.preloadImages();
		
	},
	preloadImages: function() {
	
		var image_found = false;
		var i = category.currentFeatureNumber;
		i++;
		if (i == category.currentFeatures.length)
			i = 1;
			
		var running = 1;
		while (image_found != true) {
			if (category.currentFeatures[i].image != '' && typeof(category.currentFeatures[i].image_loaded) == "undefined") {
				image_found = true;
			} else {
				i++;
				if (i == category.currentFeatures.length)
					i = 1;
			}
			running++;
			if (running == category.currentFeatures.length) {
				return;
			}
		
		}

		category.currentFeatures[i].image_loaded = false;
		category.images[i] = new Image();
		category.images[i].onload = function() {
			category.currentFeatures[i].image_loaded = true;
		}
		category.images[i].src = category.currentFeatures[i].image;
		$(category.images[i]).addClassName('image');
		
		image_found = false;
		i = category.currentFeatureNumber;
		i = i-1;
		if (i == 0)
			i = (category.currentFeatures.length-1);
		running = 1;
		while (image_found != true) {
			if (category.currentFeatures[i].image != '' && typeof(category.currentFeatures[i].image_loaded) == "undefined") {
				image_found = true;
			} else {
				i++;
				if (i == category.currentFeatures.length)
					i = 1;
			}
			running++;
			if (running == category.currentFeatures.length) {
				return;
			}
		
		}
		
		category.currentFeatures[i].image_loaded = false;
		category.images[i] = new Image();
		category.images[i].onload = function() {
			category.currentFeatures[i].image_loaded = true;
		}
		category.images[i].src = category.currentFeatures[i].image;
		$(category.images[i]).addClassName('image');
	
	},
	loadOverlay: function() {
		if (category.featureoverlay != false) return;
		
		////
		// Load the overlay
		var sizes = category.getOverlaySize();
		category.featureoverlay = new Element('div').addClassName('categoryfeatureoverlay').setStyle({ height: sizes.scrollheight+'px', opacity: 0 });
		
		////
		// Load the content area
		category.featuretitle = new Element('div').addClassName('title');
		category.featuredescription = new Element('div').addClassName('description');
		category.featureimage = new Element('img').addClassName('image');
		
		category.featureoverlaycontent = new Element('div').addClassName('categoryfeatureoverlaycontent').hide().insert({ bottom: new Element('div').addClassName('background') });
		category.featureinner = new Element('div').addClassName('inner');
		
		if (category.currentFeatures.length > 1) {
			category.featureinner.insert({ top: new Element('a').addClassName('nextfeature').update('<img src="_images/layout/btn-lightview_arrow_right.png" />').observe('click', category.goToNextFeature) });
			category.featureinner.insert({ top: new Element('a').addClassName('previousfeature').update('<img src="_images/layout/btn-lightview_arrow_left.png" />').observe('click', category.goToPreviousFeature) });
		}
		category.featureinner.insert({ top: new Element('a').addClassName('close').update('<img src="_images/layout/btn-lightbox_close.gif" />').observe('click', category.closeFeature) });
		
		category.featureoverlaycontent.insert({ bottom: category.featureinner });
		
		category.featureinner.insert({ bottom: category.featuretitle }).insert({ bottom: category.featuredescription }).insert({ bottom: category.featureimage });
		
		var bodyobj = $$('body')[0];
		
		bodyobj.insert({ top: category.featureoverlaycontent });		
		bodyobj.insert({ top: category.featureoverlay });
		category.featureoverlay.observe('click', category.closeFeature.bindAsEventListener(this));

	},
	goToNextFeature: function() {
				
		var next = category.currentFeatureNumber+1;
		if (next == category.currentFeatures.length) {
			next = 1;
		}		
		var image_found = false;
		while (image_found != true) {
			if (category.currentFeatures[next].image != '') {
				image_found = true;
			} else {
				next++;
				if (next == category.currentFeatures.length)
					next = 1;
			}		
		}

		
		
		//var next = (((category.currentFeatureNumber+1) <= category.currentFeatures.length)?category.currentFeatureNumber+1:1);
		var features = category.currentFeatures;
				
		category.featuretitle.update(features[next].title);
		category.featuredescription.update(features[next].description);
		if (features[next].image != '') {
			if (typeof (features[next].image_loaded) != "undefined") {
				/*if (features[next].image_loaded == true) {
					category.featureimage.remove();
					category.featureimage = category.images[next];//.cloneNode(true);
					category.featureinner.insert({ bottom: category.featureimage });
				} else {*/
					category.featureimage.src = features[next].image;
					$(category.featureimage).show();
				//}
			} else {
				category.featureimage.src = features[next].image;
				$(category.featureimage).show();
			}
		} else {
			if (typeof (category.featureimage) != "undefined")
				$(category.featureimage).hide();
		}
		category.currentFeatureNumber = next;
		
		category.preloadImages();
		
	},
	goToPreviousFeature: function() {
		
		var next = category.currentFeatureNumber-1;
		if (next == 0) {
			next = (category.currentFeatures.length-1);
		}
		
		var image_found = false;
		while (image_found != true) {
			if (category.currentFeatures[next].image != '') {
				image_found = true;
			} else {
				next = next-1;
				if (next == 0)
					next = category.currentFeatures.length-1;
			}		
		}

		
		var features = category.currentFeatures;
		
		category.featuretitle.update(features[next].title);
		category.featuredescription.update(features[next].description);
		if (features[next].image != '') {
			/*if (typeof (features[next].image_loaded) != "undefined") {
				category.featureimage.remove();
				category.featureimage = category.images[next];//.cloneNode(true);
				category.featureinner.insert({ bottom: category.featureimage });
			} else {*/
				$(category.featureimage).show();
				category.featureimage.src = features[next].image;
			//}
		} else {
			if (typeof (category.featureimage) != "undefined")
				$(category.featureimage).hide();
		}
		category.currentFeatureNumber = next;
		
		category.preloadImages();
		
	},
	getOverlaySize: function() {
		
		////
		// Get window size
		var windowSizes = Position.getWindowSize();
		
		////
		// Check if the page has scrollers
		var scrollWidth = window.scrollWidth || document.documentElement.scrollWidth || document.scrollWidth || 0;
		var scrollHeight = window.scrollHeight || document.documentElement.scrollHeight || document.scrollHeight || 0; 
		
		////
		// Safari Fix
		if (scrollHeight < windowSizes[1]) scrollHeight += windowSizes[1];

		//windowSizes[1] -= scrollHeight;
		
		var array = [];
		
		array.width = array[0] = windowSizes[0];
		array.height = array[1] = windowSizes[1];
		array.scrollwidth = array[2] = scrollWidth;
		array.scrollheight = array[3] = scrollHeight;
		return array;
		
	},
	closeFeature: function(e) {
		new Effect.Morph(
										 category.featureoverlay, 
										 { 
										 		style: 'opacity: 0', 
												duration: 0.3,
												beforeStart: function() {
													category.featureoverlaycontent.hide();
												},
												afterFinish: function() {
													category.cleanUpFeature();
												}
											});
	},
	cleanUpFeature: function() {
		category.featureoverlay.hide();
	},
	makeFeatureList: function(features, type) {
		
		var li = new Element('li');
		var a = new Element('a', { href: '#' });
		var p = new Element('p');
		var tmp_li;
		var tmp_a;
		var tmp_p;
		
		for(i=1;i<features.length;i++) {
		
			tmp_li = li.cloneNode(false);
			tmp_a = a.cloneNode(false);
			tmp_p = p.cloneNode(false);
		
			if (features[i].image != '') {
								
				tmp_a.writeAttribute('onclick', 'category.showFeature('+type+'_features, '+i+'); return false;').update(features[i].description);
				tmp_li.update(tmp_a);
				$(type+'featureslist').insert({ bottom: tmp_li });
				
			} else {
				tmp_p.update(features[i].description);
				tmp_li.update(tmp_p);
				$(type+'featureslist').insert({ bottom: tmp_li });

			}
		}
	
	},
	changeProductImage: function(product, image, color, handle) {
		
		$$('#'+product+' > .swatches > a').invoke('removeClassName', 'current');
		var main = $($$('#'+product+' > a.main')[0]);
		if (main.href.indexOf('?') > -1) {
			var href = main.href.split('?');
			main.href = href[0] + '?color='+color;			
		} else {
			main.href = main.href + '?color='+color;
		}
		
		var img = $$('#'+product+' > a.main > img').each(function(img, i) {
			if (i==0) {
				$(img).writeAttribute('src', image.replace('thumbs/', 'thumbs3/'));
			} else {
				$(img).writeAttribute('src', image);
			}
		});
		$(handle).addClassName('current');
		
		return false;
	},
	toggleCategoryFeatureInformation: function(container, handle) {
		if($($$('#'+container+' > .informationcontainer')[0]).visible()) {
			$($$('#'+container+' > .informationcontainer')[0]).slideUp("fast").removeClassName('informationcontainershowing');
			$(handle).update('More Info <span class="sign">+</span>').removeClassName('infoshowing');
		} else {
			$(handle).update('Minimize Info <span class="sign">-</span>').addClassName('infoshowing');
			$($$('#'+container+' > .informationcontainer')[0]).addClassName('informationcontainershowing').slideDown("fast");
		}
	},
	setupCategoryFeaturePins: function(container, tip, data) {
		
		var pin_count = data.length;
		for(var i=0;i<pin_count;i++) {
			var top = data[i].top - 16;
			var left = data[i].left - 15;
			var pin_el = new Element('a', { href: 'javascript:;' }).addClassName('pin').setStyle({ left: left+'px', top: top+'px' });
			var pin_obj = new pin(data[i].image, pin_el);
			$(container).insert(pin_el);
			$(pin_el).observe('mouseover', category.showCategoryFeatureTip.bindAsEventListener(pin_obj, data[i].image, container, tip));
			$(pin_el).observe('mouseout', category.hideCategoryFeatureTip.bindAsEventListener(pin_obj, data[i].image, container, tip));
		}
		
	},
	showCategoryFeatureTip: function() {
		var a = $A(arguments);
		var e = a[0];
		var image = a[1];
		var container = a[2];
		var tip = a[3];
		
		//tip;
		tip.update(image).setStyle({ visibility:'hidden' }).show();
		
		$(container).select('a.pin').each(function(el) {
			$(el).setStyle({ zIndex: 1 });
		});
		
		var container_width = $(container).getWidth();
		var tip_width = $(tip).getWidth();
		
		var pin = this.pin_el;
		pin.setStyle({ zIndex: 9999 });
		pin.addClassName('pin_on');
		
		var left = (parseInt(pin.getStyle('left')) + (pin.getWidth()/2));
		if ((left + tip_width) > container_width) {
			left = (parseInt(pin.getStyle('left')) + (pin.getWidth()/2)) - tip_width;
			tip.setStyle({ top: (parseInt(pin.getStyle('top')) + (pin.getHeight()/2))+'px', left: left+'px' }).setStyle({ visibility:'visible' });
		} else {
			tip.setStyle({ top: (parseInt(pin.getStyle('top')) + (pin.getHeight()/2))+'px', left: left+'px' }).setStyle({ visibility:'visible' });
		}
		
		
		
		
	},
	hideCategoryFeatureTip: function() {
		var a = $A(arguments);
		var image = a[1];
		var container = a[2];
		var tip = a[3];
		var pin = this.pin_el;
		pin.removeClassName('pin_on');
		tip.hide();
		tip.update('');
	},
	simulatePinMouseover: function(container, num) {
		var pin = $($(container).select('.pin')[num]);
		pin.simulate('mouseover');
	},
	simulatePinMouseout: function(container, num) {
		var pin = $($(container).select('.pin')[num]);
		pin.simulate('mouseout');
	}

}

function pin(image, pin_el) {
	this.image = image;
	this.pin_el = pin_el;
}

Position.getWindowSize = function(w) {
	var array = [];

	w = w ? w : window;
	array.width = array[0] = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
	array.height = array[1] = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);

	return array;
}

// Taken from
// http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
function getScrollerWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
		document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}