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 });

			}
		}
	
	}
}



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 ];
}