/*
	Product List View
 	Handles UI and events in the products section of app
 */
SS.Views.ProductList = Backbone.View.extend({
	
	events: {
		"click .addCartButton": "addToCart",
		"click .pageLink": "loadPage",
		"mouseover .input_select_wrapper_bg select": "hoverDropdown",
		"mouseout .input_select_wrapper_bg select": "unhoverDropdown",
		"mousedown .input_select_wrapper_bg select": "clickDropdown",
		"mouseup .input_select_wrapper_bg select": "unclickDropdown"
	},
	
		
	initialize: function() {
		//_.bindAll(this, "initSelectBoxes");
		
		// Attach options to this
		this.cartView = this.options.cartView;
		
		// Initialize Cache
		SS.Cache.pageCache = {
			currentPage: 1
		};
	},
	
	
	// Handles adding an item to the cart
	addToCart: function(e) {
		var 
			that = this,
			eventEl = e.currentTarget;
		
		e.preventDefault();
		
		$.ajax({
			type: "POST",
			url: "/~site/siteapps/cartpreview.action?" + $(eventEl).attr("name"),
			data: $("#productForm").serialize(),
			success: that.cartView.add
		});
		
	},
	
	
	// Loads a page number
	loadPage: function(e) {
		var
			that = this,
			eventEl = e.currentTarget,
			pageCache, scope,
			params, targetedPage;
		
		e.preventDefault();	
			
		if (eventEl.href.length === 0) {
			return;
		}
		
		// Check correct Cache
		params = SS.Utils.getUrlParams(eventEl.href);
		scope = SS.Cache.scope;
		if ( scope === "global" ) {
			pageCache = SS.Cache.pageCache;
		} else {
			// Define page cache for key if it doesn't exist
			if ( SS.Cache.key.length === 0 ) {
				if ( SS.Cache[scope].pageCache === undefined) {
					SS.Cache[scope].pageCache = {
						currentPage: 1
					};
				}
				
				pageCache = SS.Cache[scope].pageCache;
			}
			else {
				if ( SS.Cache[scope][SS.Cache.key] === undefined) {
					SS.Cache[scope][SS.Cache.key] = {
						pageCache: { currentPage: 1 }
					};
				} else if ( SS.Cache[scope][SS.Cache.key].pageCache === undefined) {
					SS.Cache[scope][SS.Cache.key].pageCache = { currentPage: 1 };
				}
				
				pageCache = SS.Cache[scope][SS.Cache.key].pageCache;
			}
			
		}
		
		// Determine targeted page. If the previous or next links are clicked, the first two conditions
		// are met and the target page is calculated appropriately. If "next" is clicked after the last page
		// the 3rd condition is met. If the last page is clicked when the user is already on the last page
		// the 3rd condition is met again. If the previous link is clicked when the user is in the first page
		// or the 1st page clicked when the user is already in the first page, the last condition is met.
		if (params.prevPage && params.prevPage === "true") {
			targetedPage = pageCache.currentPage - 1;
		} else if (params.nextPage && params.nextPage === "true") {
			targetedPage = pageCache.currentPage + 1;
		} else if(params.nextLinkVisible == "0"){
			targetedPage = parseInt(params.cPage);
		} else {
			targetedPage = params.cPage ? parseInt(params.cPage) : 1;
		}
		
		// Insert if cache found
		if (pageCache[targetedPage] !== undefined) {
			// Don't perform DOM operation if we're still on same page
			if (targetedPage === pageCache.currentPage)
				return;
			
			//$("#products").replaceWith(pageCache[targetedPage]);
			//pageCache.currentPage = targetedPage;
		
			//return;
		}
		
		// Ajax loader
		SS.Utils.showAjaxLoader();
		
		// Call for new page
		$.ajax({
			type: "GET",
			url: SS.Utils.buildHostUrl( document.location.href, eventEl.href),
			success: function(data) {
				var
					dom = $("<div>" + data + "</div>"),
					page = dom.find("#products");
				
				// Insert into cache
				if (pageCache[pageCache.currentPage] === undefined) {
					pageCache[pageCache.currentPage] = $("#products");
				}
				if (pageCache[targetedPage] === undefined) {
					pageCache[targetedPage] = page;
				}
				
				// Replace product DOM element with new element
				pageCache.currentPage = targetedPage;
				$("#products").replaceWith(page);
				
				SS.Utils.initSelectBoxes();
				SS.Utils.hideAjaxLoader();
				
				// Scroll to top of wrapper div every time we change pages
			    SS.Utils.scrollToTop();
			}
		});
	},
	
	
	// function hoverDropdown
	// various javascript functions exist to emulate hover and click effects of a real dropdown box
	// some browsers have trouble detecting the css because of absolutely positioned child elements
	hoverDropdown: function(e) {
		if (e) {
			$(e.currentTarget).closest(".input_select_wrapper_bg").addClass("input_select_wrapper_bg_hover");
		}
	},
	
	
	unhoverDropdown: function(e) {
		if (e) {
			$(e.currentTarget).closest(".input_select_wrapper_bg").removeClass("input_select_wrapper_bg_hover");
		}
	},
	
	
	clickDropdown: function(e) {
		if (e) {
			$(e.currentTarget).closest(".input_select_wrapper_bg").addClass("input_select_wrapper_bg_active");
		}
	},
	
	
	unclickDropdown: function(e) {
		if (e) {
			$(e.currentTarget).closest(".input_select_wrapper_bg").removeClass("input_select_wrapper_bg_active");
		}
	}
	
});