/* ProductComparison
/*----------------------------------------------------------------------------------------*/
var ProductComparison = Class.create(CenteredPop, {
	initialize: function($super, trigger, pop, options) {
		this.trigger  = $(trigger);
		this.pop      = pop;
		this.firstrun = true;
		this.href     = '/pex/control/compare';
		this.selected = [];
		this.refresh();
		
		this.options = Object.extend({
			container: document.getElementsByTagName('body')[0]
		}, options);
		
		if (!$(pop)) {
			this.pop = $(document.createElement('div'));
			this.pop.setAttribute('id', pop);
			this.pop.setStyle({
				position: 'absolute',
				width:    '940px'
			});
			$(this.options.container).insert(this.pop, { position: 'bottom'} );
		}
		
		document.observe('search:updated',  this.refresh.bind(this));
		document.observe('search:teardown', this.teardown.bind(this));
		
		$super(this.trigger, this.pop);
	},
	refresh: function(event) {
		this.checkboxes = $$("input.opts");
		this.checkboxes.each(function(checkbox) {
			if (typeof(checkbox.isActived) == 'undefined') {
				checkbox.isActived = true;
				checkbox.observe('change', this.onchange.bindAsEventListener(this));
			}
			if (this.firstrun && checkbox.checked) {
				this.selected.push(checkbox.value);
				this.trigger.addClassName('active');
			}
			if (this.selected.indexOf(checkbox.value) != -1) {
				checkbox.checked = true;
			}
		}.bind(this));
		this.firstrun = false;
	},
	teardown: function() {
		this.checkboxes = $$("input.opts");
		this.checkboxes.each(function(checkbox) {
			checkbox.stopObserving(); });
	},
	onchange: function(event) {
		var el = event.element();
		if (el.checked) {
			this.selected.push(el.value)
		} else {
			this.selected.splice(this.selected.indexOf(el.value), 1);
		}
		
		if (this.selected.length >= 2) {
			this.trigger.addClassName('active');
		} else {
			this.trigger.removeClassName('active');
		}
	},
	open: function($super, event) {
		if (this.selected.length <= 1) {
			alert('Please choose at least 2 products to compare.');
		} else if (this.selected.length > 5) {
			alert('Please choose no more than 5 products to compare.')
		} else {
			new Ajax.Updater(this.pop, this.href, {
				method:     'get',
				parameters: 'products=' + this.selected.join(','),
				onComplete: function(transport, json) {
					setTimeout(function() {
						var d = this.pop.down('div').getDimensions();
						if (d.height != 0 && d.width != 0) {
							this.pop.setStyle({
								display: 'none',
								height: d.height + 'px',
								width:  d.width  + 'px'
							});
						}
						$super();
					}.bind(this), 100);
				}.bind(this)
			})
		}
		event.stop();
	}
})

/* InfiniteScroll
/*----------------------------------------------------------------------------------------*/
var InfiniteScroll = Class.create({
	initialize: function(container, paging, loading, settings) {
		this.container = $(container);
		this.paging    = $(paging);
		//this.paging2    = $(paging2);
		this.loading   = $(loading);
		this.settings  = settings;
		this.setup();
	},
	setup: function() {
		this.paging.hide();
		
		if (document.location.pathname.match(/~VIEW_INDEX/)) {
			return;
		}
		
		if (this.settings.listSize <= this.settings.viewSize) {
			return;
		}
		
		this.bound_scroll = this.onScroll.bind(this);
		this.bound_reset  = this.refresh.bind(this);
		
		this.reset();
		
		if (this.scroll['top'] > 0) {
			this.loadResults();
			this.refresh();
		}
		
		document.observe('search:reset', this.reset.bindAsEventListener(this));
	},
	reset: function(event) {
		this.position = 0;
		this.working  = false;
		this.startObserving();
		this.refresh();
		
		if (typeof(event) != 'undefined') {
			if (event.memo.baseUrl) {
				this.settings.baseUrl = event.memo.baseUrl; 
			}
			if (event.memo.browseMode) {
				this.settings.browseMode = event.memo.browseMode;
			}
			if (event.memo.listSize) {
				this.settings.listSize = event.memo.listSize;
			}
		}
		this.settings.baseUrl = this.settings.baseUrl.replace(/\/~VIEW_INDEX=0/, '');
	},
	refresh: function() {
		this.scroll = document.viewport.getScrollOffsets();
		this.viewport = this.container.getDimensions();
	},
	startObserving: function() {
		Event.observe(window, 'scroll', this.bound_scroll);
		Event.observe(window, 'resize', this.bound_reset);
	},
	stopObserving: function() {
		Event.stopObserving(window, 'scroll', this.bound_scroll);
		Event.stopObserving(window, 'resize', this.bound_reset);
	},
	loadResults: function() {
		if (this.working) { return; }
		
		this.working   = true;
		this.position += this.settings.viewSize;
		this.loading.show();
		
		setTimeout(function() {
			var url = this.settings.baseUrl + "/~VIEW_INDEX=" + this.position + '/~BROWSE_MODE=' + this.settings.browseMode;

			// force IE not to cache Ajax result - PXP201:Hai
			if (/\?/.test(url))
				url += "&randomSeed=" + new Date().getMilliseconds();
			else
				url += "?randomSeed=" + new Date().getMilliseconds();

			new Ajax.Updater(this.container, url, {
				method:    'get',
				insertion: 'bottom',
				evalScripts : true,    // allow eval of <script> in Ajax result - PXP201:Hai
				onComplete: function() {
					this.loading.hide();
					this.working = false;
					document.fire('search:updated');
				}.bind(this)
			});
		}.bind(this), 100);
	},
	onScroll: function() {
		var previousScroll = this.scroll['top'];
		this.scroll = document.viewport.getScrollOffsets();
		if (this.scroll['top'] > previousScroll) {
			if ((this.scroll['top'] / this.viewport['height']) > 0.60) {
				if ((this.position + this.settings.viewSize) < this.settings.listSize) {
					this.loadResults();
					this.refresh();
				} else {
					this.stopObserving();
				}
			}
		}
	}
});

/* SearchSession
/*----------------------------------------------------------------------------------------*/
var SearchSession = Class.create({
	initialize: function() {
		this.listing   = $('browse_listing');
		this.container = $('browse_results');
		this.list_btn  = $('btn_list');
		this.list_btn2  = $('btn_list2');//PXP392
		this.grid_btn  = $('btn_grid');
		this.grid_btn2  = $('btn_grid2');//PXP392
		this.paging    = $('paging');	
		this.paging2    = $('paging2'); //PXP392			
		this.sort      = $('sort_options')
		this.sort2      = $('sort_options2') //PXP392
		this.quicklook = [];
		this.buttons   = [];
		this.settings  = pagination; // via pagination.ftl
		this.setup();
	},
	setup: function() {
		this.list_btn.observe('click', this.setBrowseMode.bindAsEventListener(this, 'list'));
		this.grid_btn.observe('click', this.setBrowseMode.bindAsEventListener(this, 'grid'));
		
		if (this.list_btn2) {
		this.list_btn2.observe('click', this.setBrowseMode.bindAsEventListener(this, 'list')); //PXP392
		}
		
		if (this.grid_btn2) {
		this.grid_btn2.observe('click', this.setBrowseMode.bindAsEventListener(this, 'grid')); //PXP392
		}
		
		var spinner = new Image();
		spinner.src = '/html/img/ui/ajax_medium_orange.gif';
		
		var loadingBtn = new Image();
		loadingBtn.src = '/html/img/btn/btn_add_cart_browse_anim.gif';
		
		this.paging.insert({ before : '<div id="loading" style="display:none;"><span>Loading&hellip;</span></div>'});
		this.loading = $('loading');
		
		new InfiniteScroll(this.container, this.paging, this.loading, this.settings)
		this.dropdown = new DropDown(this.sort, {
			onchange: this.setSortOrder.bindAsEventListener(this)
		});
		
		//PXP392: T&T 2.22 Cat Nav: 06/21/2011: Shuchi
		//PXP392:BOF
		/*this.dropdown = new DropDown(this.sort2, {
			onchange: this.setSortOrder.bindAsEventListener(this)
		});*/
		//PXP392:EOF
		document.observe('search:updated',  this.refresh.bind(this));
		document.observe('search:teardown', this.teardown.bind(this));
		document.observe('search:query',    this.loadQuery.bind(this))
		this.refresh();
	},
	refresh: function() {
		this.container.select('.photo').each(function(photo, i) {
			if (typeof(photo.isActived) == 'undefined') {
				photo.isActived = true;
				var ql = new QuickLook(photo, photo.down('a.img'));
				this.quicklook.push(ql);
			}
		}.bind(this));
		
		this.container.select('.btn_add_cart_browse').each(function(button, i) {
			if (typeof(button.isActivated) == 'undefined') {
				button.isActivated = true;
				var cart = new AjaxCart(button);
				this.buttons.push(cart);
			}
		}.bind(this));
	},
	teardown: function() {
		var total = this.quicklook.length;
		for (var i = 0; i < total; i++) {
			if (this.quicklook[i]) {
				this.quicklook[i].teardown();
				this.quicklook[i] = null;
			}
		}
		
		var total = this.buttons.length;
		for (var i = 0; i < total; i++) {
			if (this.buttons[i]) {
				this.buttons[i].teardown();
				this.buttons[i] = null;
			}
		}
	},
	setSortOrder: function(url) {
	//Remove when T&T 2.22 winner is launched : BOF
		var sortOrder = url.match(/\/~sortOrder=[^\/$]+/);
		if (sortOrder) {
			sortOrder = sortOrder[0];
		} else {
			sortOrder = '';
		}
		var sortAscending = url.match(/\/~sortAscending=[^\/$]+/);
		if (sortAscending) {
			sortAscending = sortAscending[0];
		} else {
			sortAscending = '';
		}
		paginationLinks = $$('#paging a');
		for (var i = 0; i < paginationLinks.length; i++) {
			paginationLinks[i].href = paginationLinks[i].href.replace(/\/~sortOrder=[^\/$]+/, sortOrder).replace(/\/~sortAscending=[^\/$]+/, sortAscending);
			if (sortOrder != '' && !paginationLinks[i].href.match(/~sortOrder/)) {
				paginationLinks[i].href += sortOrder;
			}
			if (sortAscending != '' && !paginationLinks[i].href.match(/~sortAscending/)) {
				paginationLinks[i].href += sortAscending;
		    }
		}  
		paginationLinks = $$('#paging2 a');
		for (var i = 0; i < paginationLinks.length; i++) {
			paginationLinks[i].href = paginationLinks[i].href.replace(/\/~sortOrder=[^\/$]+/, sortOrder).replace(/\/~sortAscending=[^\/$]+/, sortAscending);
			if (sortOrder != '' && !paginationLinks[i].href.match(/~sortOrder/)) {
				paginationLinks[i].href += sortOrder;
			}
			if (sortAscending != '' && !paginationLinks[i].href.match(/~sortAscending/)) {
				paginationLinks[i].href += sortAscending;
		    }
		}   //Remove when T&T 2.22 winner is launched : EOF
		//url = url.replace(/\/~VIEW_INDEX=[^\/$]+/, '/~VIEW_INDEX=0');
		//if (!url.match(/~VIEW_INDEX/)) {
		//	url += '/~VIEW_INDEX=0';
		//} 
		//window.location=url;
		this.loadResults(url);
		document.fire('search:reset', { baseUrl : url });
	},
	setBrowseMode: function(event, mode) {
		switch(mode) {
			case 'list' :
				this.list_btn.addClassName('active');
				this.grid_btn.removeClassName('active');
				this.listing.removeClassName('grid');
				break;
			case 'grid' :
				this.list_btn.removeClassName('active');
				this.grid_btn.addClassName('active');
				this.listing.addClassName('grid');
				break;
				//PXP392:BOF
				case 'list2' :
				this.list_btn2.addClassName('active');
				this.grid_btn2.removeClassName('active');
				this.listing.removeClassName('grid2');
				break;
			case 'grid2' :
				this.list_btn2.removeClassName('active');
				this.grid_btn2.addClassName('active');
				this.listing.addClassName('grid2');
				break;
				//PXP392:EOF
		}
		
		document.fire('search:reset', { browseMode : mode });
		Cookie.set('BROWSE_MODE', mode, 90);
		
		var sel = null;
		if ($('slides')) {
			sel = $$('#slides li.active a').first();
		}
		
		if (sel != null) {
			this.loadResults(sel.getAttribute('href'));
		} else {
			this.loadResults(this.dropdown.selectedValue);
		}
		
		event.stop();
	},
	loadResults: function(url, categoryId) {
		document.fire('search:teardown');
		
		this.container.hide();
		this.loading.addClassName('jumbo');
		this.loading.show();

		// force IE not to cache Ajax result - PXP201:Hai
		if (/\?/.test(url))
			url += "&randomSeed=" + new Date().getMilliseconds();
		else
			url += "?randomSeed=" + new Date().getMilliseconds();

		if (categoryId) {  //Hai: for fitting finder only
			//when a fitting subcat is clicked, must update sort dropdown w/ new catId
			for (var i = 0; i < this.dropdown.options.length; i++) {
				this.dropdown.options[i]._val = this.dropdown.options[i]._val.replace(/\/~category_id=\d+/, '/~category_id='+categoryId).replace(/\/~refine=[\d\+]+/, '');
			}
			this.dropdown.select(this.dropdown.options[1]);  //preselect 'Default'
		}

		setTimeout(function() {
			new Ajax.Updater(this.container, url, {
				method: 'get',
				evalScripts : true,    // allow eval of <script> in Ajax result - PXP201:Hai
				onComplete: this.updatePage.bind(this)
			});
		}.bind(this), 100);
	},
		
	updatePage: function(response, json) {
		this.loading.hide();
		this.loading.removeClassName('jumbo');
		this.container.show();
		
		document.fire('search:updated');
		
		if (json == null) {
			document.fire('search:reset');
		} else {
		    
			if ($('listSize') && json.listSize) {
				if (json.listSize == 1) {
					$('listSize').update('1 product shown');
				}  else {
					$('listSize').update(json.listSize + ' products shown');
				}
			}
			
			/*PXP55:Start Fitting-finder:3/30/2010:By kinjal*/
		    if ($('category_name') && json.categoryName) {
				$('category_name').update(json.categoryName);
				$('category_name_popup').update(json.categoryName);
			}
			
			
			if ($('category_desc') && json.longDescription) {
				$('category_desc').update(json.longDescription);
				$('category_desc_first').update(json.longDescription.substring(0,50));											
			}	
		   /*PXP55:End Fitting-finder:3/30/2010:By kinjal*/					
			document.fire('search:reset', { baseUrl : json.baseUrl, listSize: json.listSize });
			document.fire('fitting:updateSort', { baseUrl : json.baseUrl, dropdown : this.dropdown });
		}
	},
	loadQuery: function(event) {
		if (event && event.memo.url) {
			this.loadResults(event.memo.url, event.memo.categoryId);
		}
	}
});

/* FittingsFinder
/*----------------------------------------------------------------------------------------*/
var FittingsFinder = Class.create({
	initialize: function() {
		this.slider  = $('slides');
		this.results = $('browse_results');
		this.buttons = $$('#slides ul.items li');
		
		this.setup();
	},
	setup: function() {
		this.buttons.each(function(button) {
			button.observe('click', this.loadResults.bindAsEventListener(this)); }.bind(this));
			
		document.observe('fitting:updateSort', this.updateSort.bindAsEventListener(this));
	},
	loadResults: function(event) {
		var el = event.findElement('li');
		var a  = el.down('a');
		
		this.buttons.invoke('removeClassName', 'active');
		el.addClassName('active');
		
		document.fire('search:query', { url: a.href + "?repaginate=Y", categoryId : a.id });
		event.stop();
	},
	updateSort: function(event) {
		// TODO: hard coded? - mja
		var sortOptions = new Array('/~sortOrder=SortProductField:top_seller_metric/~sortAscending=N', '/~sortOrder=Category||seq', '/~sortOrder=Brand' ,'/~sortOrder=SortProductField:product_name/~sortAscending=Y', '/~sortOrder=SortProductField:product_name/~sortAscending=N', '/~sortOrder=SortProductPrice:price/~sortAscending=Y', '/~sortOrder=SortProductPrice:price/~sortAscending=N'); 
		
		// Update the sort-by dropdown
		var baseUrl = event.memo.baseUrl;
		if (baseUrl) {
			var newOptions = new Array();
			sortOptions.each(function(op){
				newOptions.push(baseUrl + op); }.bind(this));
			event.memo.dropdown.reset(newOptions);
		}
	}
});

/*----------------------------------------------------------------------------------------*/

document.observe('dom:loaded', function(){
	if ($('browse_results')) {
		new SearchSession();
	}
	
	if ($('shop_brand_main')) {		// PXP160: Shop by Brand page
		var brandTabs = new Tabs($('tabs'), $$('.togglers li'), $$('.tab_content'), 0);
		var tabIndex = parseInt(location.hash.replace(/^#/,''));
		if (!isNaN(tabIndex)) {
			brandTabs.select(tabIndex);
		}
	}
	
	if ($('brands')) {
		new ShowAll($('brands'), {
			viewableItems:  5,
			rowSelector:    'li',
			toggleSel:      '.toggle',
			heightSelector: '.overflow ul',
			scrollOnOpen:	false,
			scrollOnClose:	false
		});
	}
	
	if($('btn_compare')) {
		new ProductComparison('btn_compare', 'pop_compare', { container : 'content' });
	}
	
	if($('tabs_help')) {
		new HelpMeChoose('tabs_help');
	}
	
	if($('slides')) {
		new FittingsFinder();
		new ProductScroller( { incrementCount: 7, endPad: -62, speed: 0.9 } );
	}
	
	if ($('show_more')) {
		new ShowMore($('show_more'), "Read More", "Show Less");
	}
	
	if ($('faqs')) {
		$$('#faqs ul li').each(function(el) {
			new SimpleToggler(el.down('a'), el.down('div'));
		});
	}
	
	if ($('video_demo')) {
		new YouTubePlayer($('video_demo'), $('video'));
	}
});