String.prototype.replaceAll=function(s1, s2) {   
   return this.replace(new RegExp(s1,"g"), s2);  
}

String.prototype.replaceAll=function(s1, s2) {  
    var str = this;  
    var pos = str.indexOf(s1);  
    while (pos > -1){  
     str = str.replace(s1, s2);  
     pos = str.indexOf(s1);  
    }
    return (str);
}

var outOfStock = '<div>OUT OF STOCK<div id="below-atc">Usually ships the next business day</div></div>';
var inStock = '<div><input type="image" src="/lib/classicsportshoes/ey-add-to-cart.jpg"><div id="below-atc">Usually ships the next business day</div></div>';

/**
 * Page switch JS
 */

$(document).ready(function(){
	
	$('#change-page').unbind();
	
	$('#change-page').bind('change', function(event){
		
		var id = $(this).find('option:selected').attr('id');
		
		var code = getVar($('#' + id).attr('class'), 'code');
		
		var optionHTML = $('#options-wrapper-' + id).html();
		
		$('#change-options').html(optionHTML);
		
		var description = $('#description-wrapper-' + id).html();
		
		$('#description-text').html(description);
		
		var orderable = $('#orderable-wrapper-' + id).html();
		
		if (orderable == "Yes") {
			$('#add-to-cart-wrapper').html(inStock);
		} else {
			$('#add-to-cart-wrapper').html(outOfStock);
		}
		
		var pricing = $('#price-wrapper-' + id).html();
		
		$('#item-prices').html(pricing);
		
		var name = $('#name-wrapper-' + id).html();
		
		$('#item-name').html(name);
		
		$('.code-wrapper').hide();
		
		$('#code-wrapper-' + id).show();
		
		$('#no-size-wrapper a').attr('href', 'http://www.e-serviceconcepts.com/logWish.php?code=' + code);
		
		$('.gallery-wrapper').hide();
		$('#gallery-view-wrapper-' + id).show();
		
		$('#change-form').attr('action', 'http://order.store.yahoo.net/classicsportshoes/cgi-bin/wg-order?classicsportshoes+' + id);
					
		$('#change-hidden-input').attr('value', id);
		
		$('.galleryview .nav-prev').remove();
		$('.galleryview .nav-next').remove();
		$('.galleryview #pointer').remove();
		
		$('.galleryview').die();
		$('.galleryview').unbind();
		
		$('#gallery-view-wrapper-' + id + ' .galleryview:first').galleryView({
			panel_width: 800,
			panel_height: 500,
            gallery_width: 500,
            gallery_height: 800,
			frame_width: 30,
			frame_height: 30,
			overlay_color: '#222',
			overlay_text_color: 'white',
			caption_text_color: '#222',
			background_color: 'transparent',
			border: 'none',
			nav_theme: 'light',
			easing: 'easeInOutQuad',
            transition_interval: 0,
			pause_on_hover: true
		});
		
		
		
		$('.galleryview .strip_wrapper .strip_wrapper').attr('style', '');
		
		$('.panel img').removeAttr('height');
		$('.panel img').removeAttr('width');
		
	});
	
});


/**
 * getVar
 * introduces the ability to pass variables to javascript via the HTML
 * class attribute by searching through string of given classnames to
 * return your desired variable
 * @param classes
 *    a string of class names (preferably using the element.className
 *    prototype attribute)
 * @param variable
 *    the target variable you would like to return
 * @return the value of the desired variable, false if variable is not present
 *
 * @example
 *    the format:
 *    - the variable you would like to pass should be formatted the following way:
 *      - class="var_example*value"
 * @example
 *    the markup:
 *    <a id="page_1_link" class="links var_page*1" href="/add-module/1/1">page 1</a>
 *    the js:
 *    element = $('page_1_link');
 *    the function call:
 *    getVar(element.className, 'page');
 *    - the function would return 1 (the value of the page variable)
 */
function getVar(classes, variable) {
  var arrClasses = '';
  var varClass = false;
  
  arrClasses = classes.split(" ");
  
  if(arrClasses == '') {
    return false;
  }
  
  $(arrClasses).each(function (index, value) {
    if (value.indexOf('var_' + variable) != -1) {
      varClass = arrClasses[(index)];
      return false;
    }   
  });
  
  //Check to make sure varClass is defined
  if(!varClass) {
    return false;
  }
  
  //split the value by the variable name and dash to return the value, if no value is present return false
  //although you shouldn't be cluttering up the markup it's not necessary
  return !varClass.split(variable + '*')[1] ? false : varClass.split(variable + '*')[1];
  
}

$(document).ready(function(){
	
	$('.featured-tab').unbind();
	
	$('.featured-tab').bind('click', function(){
		
		$('.featured-tab').removeClass('active');
		$(this).addClass('active');
		
		$('.featured-tab-contents').hide();
		
		if ($(this).attr('id') == 'featured-tab-1') {
			
			$('#featured-tab-contents-1').show();
			$('#featured-tabs').css({
				'background-position' : '0 0'
			});
			
		} else if ($(this).attr('id') == 'featured-tab-2') {
			
			$('#featured-tab-contents-2').show();
			$('#featured-tabs').css({
				'background-position' : '0 -40px'
			});
			
		} else if ($(this).attr('id') == 'featured-tab-3') {
			
			$('#featured-tab-contents-3').show();
			$('#featured-tabs').css({
				'background-position' : '0 -83px'
			});
			
		} else if ($(this).attr('id') == 'featured-tab-4') {
			
			$('#featured-tab-contents-4').show();			
			$('#featured-tabs').css({
				'background-position' : '0 -122px'
			});
		}
		
	});
	
});