// Requires Mootools 1.2 to be included before this JS file is included!

// Constants
var VOL_SHOPPING_CART_PAGE = "../../ShoppingCart.asp";

var Site = {
	
	start: function() {	
 		
		Site.createTabControl();
		Site.initAddToCartButton();
		Site.updateProductLinks();
		
	}, // end start: function() {...
	
	
	 // Updates product page links to point ot correct page
    updateProductLinks: function() {

        var aAnchors = $$("a");
		
		for (i=0; i < aAnchors.length; i++)
		{
			var eAnchor = aAnchors[i];
			 
			if(eAnchor.href.indexOf("ProductDetails.asp?ProductCode=") != -1) {
				
				var sUrl = String(eAnchor.href);
				
				var aSplitUrl = sUrl.split('?');
				var aSplitParams = aSplitUrl[1].split('&');
				var sProdId = aSplitParams[0].split('=')[1];
				 
				eAnchor.href = "/v/vspfiles/product_detail.asp?code=" + sProdId;
			}
		}

    } // End updateProductLinks: function() {
		
	,
	
	createTabControl: function() {
	    
	    var tabs = $$('#tabs .tabItem');
	   
        // For each tab
	    tabs.each(function(tab, i){
		 
		    // Assign an index number to the tab
			tab.setProperty("tab_id", i);
			
			// Assign the property "content_id" to the "title" attribute of this tab...
			// this should correspond to an element with an IDENTICAL id that hold the tab's content
			tab.setProperty("content_id", tab.getProperty("title"));
		 	
			//Construct the HTML structures that are used for styling into the tab content panel
			var eTopBar = new Element('div', {              
                'class': 'topBar',
                'html': '<div class="leftBar"></div><div class="rightBar"></div>' 
            });

            var eCenterBar = new Element('div', {'class': 'contentBar'});
            
            var eCenterInnerBar = new Element('div', {'class': 'innerBar'});
            
		    var eBotBar = new Element('div', {
                'class': 'botBar',
                'html': '<div class="leftBar"></div><div class="rightBar"></div>' 
            });
			
			// Find the content tab
			var eTabContent = $(tab.getProperty("title"));
			// Get its HTML
            var sTabContentHtml = eTabContent.getProperty("html");
            // Insert the HTML into the new center element
            eCenterInnerBar.setProperty("html", sTabContentHtml);            
            // Reset its HTML
            eTabContent.setProperty("html", "");                        
            // Inject the center content element into the center container
            eCenterInnerBar.inject(eCenterBar);
            
            // Insert these structures into the content container
            eTopBar.inject(eTabContent);
            eCenterBar.inject(eTabContent);
            eBotBar.inject(eTabContent);
			
			// Add the click event  
			tab.addEvent('click', function(e){
			    
			    // Get the tab's content ID
                var sContentId = tab.getProperty("content_id");
                
                // Get the element with this tab's content
                var elemDisplay = $(sContentId);
                
                // Display the appropriate tab and content element
                tab.addClass("active");
                elemDisplay.addClass("active");
              
                // Hide the other tabs when this one displays
                tabs.each(function(other, j){
                
                    // If the current item we are checking (other) does not equal the clicked item (tab)
	                if (other != tab){
				         // Get the other tab's content ID
                         var sContentId = other.getProperty("content_id");
                         
                         // Get the element with this other tab's content
                         var elemHide = $(sContentId);                         
                        
                         // Deselect the tab
                         other.removeClass("active");
                         
                         // Hide the content element
                         elemHide.removeClass("active");
	                }
                }); //  End tabs.each(function(other, j){
			 	
			}); // End tab.addEvent('click', function(e){
			
		}); // End tabs.each(function(tab, i){

	},  // end createTabControl: function() {...
	
	// Adds functionality to "Add to cart" button on product page
	initAddToCartButton: function() { 
	 
	    var eButAdd = $('butAddToCart'); // Find the button
	    if(eButAdd) {
	    
	        // Add the "click" event to the button	      
	        eButAdd.addEvent('click', function(e){
        	 
	            var sQuant = $('txtQuantity').getProperty("value");
	            var sCode = $('txtCode').getProperty("value");
        	    
	            var sUrl = VOL_SHOPPING_CART_PAGE + "?ProductCode=" + sCode + "&Qty." + sCode + "=" + sQuant;	    
    	        
	            document.location.href = sUrl;
    	        
	        }); // end eButAdd.addEvent('click', function(e){
	     }; // end if(eButAdd) {
	} // end initAddToCartButton: function() { 
	
}; // end var Site = {...


// Call the Site initialization function when the page loads
window.addEvent('domready', Site.start);