/**
 * Class for the Accessory Home page.
 */
var AccessoryHome = Class.create();
AccessoryHome.prototype = {
	// Constructor.
	initialize: function() {
		// For some strange reason in IE the blocker DIV is not transparent, this only
		// happens on the home page, not on the overview page, even though CSS, HTML
		// and JS is exactly the same...
		Util.enableBlocker(false);
	},
	
	// On-load setup.
	onLoad: function() {
		Event.observe($("groupCode"), "change", this.lookupProducts.bind(this));
		Event.observe($("productCode"), "change", this.storeProductCode.bind(this));
		this.lookupProducts();
		
		this.showingLatest = true;
		this.latestTitle = $("latestTitle");
		this.latestToggleLink = $("latestToggleLink");
		this.latestToggleLink.onclick = this.toggleLatest.bind(this);
		this.latestAccessoriesDiv = $("latestAccessories");
		this.latestWishListDiv = $("latestWishList");
		
		// Set this hidden input to true, so the AccessoryContext knows to redirect
		// to an overview page with no group/product parameters, but with a proper state string.
		// If JavaScript is disabled, this will not run, and no redirect is done.
		$("redirect").value = "true";

		// Update "Browse accessories" and "Latest accessories" links to have the
		// "redirect=true" parameter as well.
		this.addRedirectParameter(["acc_browse", "latestAccessories", "latestWishList"]);
	},
	
	// Add "redirect=true" parameter to all links inside the given divs.
	// This done so that the user gets a nice URL on the next screen, and also avoids that
	// the JSP retrieves data, followed by the page script that retrieves the same data.
	// The redirect parameter causes the overview.jsp to redirect to a bare URL with just
	// the proper state (after the #), so that the JSP does not retrieve anything.
	addRedirectParameter: function(divsWithLinks) {
		for( var i = 0; i < divsWithLinks.length; ++i ) {
			var links = $(divsWithLinks[i]).getElementsByTagName("A");
			for( var j = 0; j < links.length; ++j ) {
				var link = links[j];
				if (link.href.indexOf("redirect=") == -1) {
					link.href += "&redirect=true";
				}
			}
		}
	},
	
	// Lookup the contents of the product dropdown, given the value of the group dropdown.
	lookupProducts: function() {
		var group = $("groupCode");
		if (group.selectedIndex >= 0) {
			var groupCode = decodeURIComponent(group[group.selectedIndex].value.replace(/\+/g, " "));
			if (groupCode.length == 0) {
				group.selectedIndex = 0;
				var product = $("productCode");
				product.options.length = 2;
				product.selectedIndex = 1;
			} else {
				common.log("Selected group value '" + groupCode + "'...");
				AccessoryService.getValidSegmentsByGroup(groupCode, 
					Config.countryCode, Config.languageCode, this.handleLookupProducts.bind(this));
			}
		}
	},
	
	// Handle the results of the DWR call above.
	handleLookupProducts: function(products) {
		var selectProduct = $("productCode");
		selectProduct.options.length = 2;
		selectProduct.selectedIndex = 0;
		
		var lastProduct = $("lastProductCode");
		var lastCode = null;
		if (lastProduct) {
			lastCode = lastProduct.value;
			if (lastCode == null || lastCode.length == 0) {
				lastCode = null;
			}
		}
		
		for( var i = 0; i < products.size(); ++i ) {
			var product = products[i];
			var option = common.createOption(product.segmentCode, product.displayName, product.level);
			if (product.segmentCode == lastCode) {
				option.selected = true;
			}
			selectProduct.options[selectProduct.options.length] = option;
		}

		Effects.highlight(selectProduct);
	},
	
	// Store selected product, so we can show it when the user returns with 'Back' to the home page.
	storeProductCode: function() {
		var lastProduct = $("lastProductCode");
		if (lastProduct) {
			var product = $("productCode");
			lastProduct.value = product.options[product.selectedIndex].value;
		}
	},
	
	// Invoked when the Wish list / Latest button is clicked.
	toggleLatest: function() {
		Effects.highlight("acc_latest");
		this.showingLatest = !this.showingLatest;
		if (this.showingLatest) {
			this.latestTitle.innerHTML = Messages["home.latestAccessories"];
			this.latestToggleLink.innerHTML = Messages["common.wishList"];
			Element.hide(this.latestWishListDiv);
			Element.show(this.latestAccessoriesDiv);
			
		} else {
			this.latestTitle.innerHTML = Messages["common.wishList"];
			this.latestToggleLink.innerHTML = Messages["home.latestAccessories"];
			Element.hide(this.latestAccessoriesDiv);
			Element.show(this.latestWishListDiv);
		}
		return false;
	}
}

// Create page class and initialize page when done loading.
var page = new AccessoryHome();
Event.observe(window, "load", page.onLoad.bind(page));