(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

$(function(){
    /**
    * ON LOAD ACTIONS
    */
    showProducts();
    
    /**
    * INTERACTIONS
    */
    $("#sel_experieceLocation").change(function(){
        showProducts();    
    });
    $("#sel_experienceType").change(function(){
        showProducts();    
    });
    
    /**
    * FUNCTIONS
    */
    function showProducts() {
        jQuery.preLoadImages("/img/loading.gif");
        
        $("#mostpoplist").html("");
        $("#mostpopitem").html("<img src='../img/loading.gif' />");
        
        var prodArea = $("#sel_experieceLocation").val();
        var prodCat = $("#sel_experienceType").val();
        var start = 0;
        var limit = 5;
        var action = 'ACTION_CHECKOUT';
        var options = "start=" + start + "&limit=" + limit + "&ac=" + action + "&pa=" + prodArea + "&pc=" + prodCat;  
        var products = getMostPopProducts(options);
    }
    
    function getMostPopProducts(options) {
        if (options!="") {
            options = "&" + options;
        }
        
        $.getJSON("/scripts/ajax_functions.php?t=getProducts" + options, function(json) {
            for (var i=0;i<json.results.length;i++) {
                prodRow = json.results[i];
                if (i==0) {
                    createMostPopProdItemDOM(prodRow);    
                } else {
                    var mostPopListItem = createMostPopProdListItemDOM(prodRow);
                    $("#mostpoplist").append(mostPopListItem);
                }
            };
        });
    }
    
    function createMostPopProdListItemDOM(itemRow) {
        jQuery.preLoadImages("/img/products/thumbs/" + itemRow.ID + ".jpg");
        
        var topDiv = document.createElement("div");
        topDiv.setAttribute("class", "mostpoplistitem");
        prodImg = document.createElement("img");
        prodImg.setAttribute("src", "img/products/thumbs/" + itemRow.ID + ".jpg");
        topDiv.appendChild(prodImg);
        prodNameH = document.createElement("h2");
        prodNameH.setAttribute("class", "strong upsize12");
        prodNameTxt = document.createTextNode(itemRow.Name);
        prodNameH.appendChild(prodNameTxt);
        topDiv.appendChild(prodNameH);
        prodPrice = document.createElement("p");
        prodPriceTxt = document.createTextNode("Price: R " + formatNumber(itemRow.Price) + " incl. VAT");
        prodPrice.appendChild(prodPriceTxt);
        topDiv.appendChild(prodPrice);
        prodInfoDiv = document.createElement("div");
        prodInfoDiv.setAttribute("class", "mpi_info");
        prodInfoLink = document.createElement("a");
        prodInfoLink.setAttribute("href", "prod_display.php?pid=" + itemRow.ID);
        prodInfoLink.setAttribute("style", "float:left;");
        prodInfoLinkTxt = document.createTextNode("more info");
        prodInfoLink.appendChild(prodInfoLinkTxt);
        prodInfoDiv.appendChild(prodInfoLink);
        prodInfoCartLink = document.createElement("div");
        prodInfoCartLink.setAttribute("class", "addtocart");
        prodInfoCartLink.setAttribute("onclick", "addToCart(" + itemRow.ID + ")");
        prodInfoDiv.appendChild(prodInfoCartLink);
        topDiv.appendChild(prodInfoDiv);
        
        return topDiv;
    }
    
    function createMostPopProdItemDOM(itemRow) {
        jQuery.preLoadImages("/img/products/" + itemRow.ID + ".jpg");
        jQuery.preLoadImages("/img/products/prod_overlay.png");
        
        $("#mostpopitem").html("");
        
        var topDiv = document.getElementById("mostpopitem");
                                                                  
        prodImgDiv = document.createElement("div");
        prodImgDiv.setAttribute("class", "mainimg");
        prodImgDiv.setAttribute("style", "background:url(img/products/" + itemRow.ID + ".jpg) top left;");
        prodImg = document.createElement("img");
        prodImg.setAttribute("src", "img/products/prod_overlay.png");
        prodImgDiv.appendChild(prodImg);
        topDiv.appendChild(prodImgDiv);
        prodInfoDiv = document.createElement("div");
        prodInfoDiv.setAttribute("class", "mp_rightitems");
        prodInfoCartLink = document.createElement("div");
        prodInfoCartLink.setAttribute("class", "addtocart");
        prodInfoCartLink.setAttribute("onclick", "addToCart(" + itemRow.ID + ")");
        prodInfoDiv.appendChild(prodInfoCartLink);
        prodInfoLink = document.createElement("a");
        prodInfoLink.setAttribute("href", "prod_display.php?pid=" + itemRow.ID);
        prodInfoLink.setAttribute("style", "float:left;");
        prodInfoLinkTxt = document.createTextNode("more info");
        prodInfoLink.appendChild(prodInfoLinkTxt);
        prodInfoDiv.appendChild(prodInfoLink);
        topDiv.appendChild(prodInfoDiv);
        prodNameH = document.createElement("h2");
        prodNameH.setAttribute("class", "strong upsize12");
        prodNameTxt = document.createTextNode(itemRow.Name);
        prodNameH.appendChild(prodNameTxt);
        topDiv.appendChild(prodNameH);
        prodPrice = document.createElement("p");
        prodPriceTxt = document.createTextNode("Price: R " + formatNumber(itemRow.Price) + " incl. VAT");
        prodPrice.appendChild(prodPriceTxt);
        topDiv.appendChild(prodPrice);
    }                 
});