function getLoading(context, bars, center, innerRadius, size, color) {
    var animating = true;
    var currentOffset = 0;

    function makeRGBA() {
        return "rgba(" + [].slice.call(arguments, 0).join(",") + ")";
    }
    function drawBlock(ctx, barNo) {
        ctx.fillStyle = makeRGBA(color.red, color.green, color.blue, (bars + 1 - barNo) / (bars + 1));
        ctx.fillRect(-size.width / 2, 0, size.width, size.height);
    }
    function calculateAngle(barNo) {
        return 2 * barNo * Math.PI / bars;
    }
    function calculatePosition(barNo) {
        angle = calculateAngle(barNo);
        return {
            y: (innerRadius * Math.cos(-angle)),
            x: (innerRadius * Math.sin(-angle)),
            angle: angle
        };
    }
    function draw(ctx, offset) {
        clearFrame(ctx);
        ctx.save();

        ctx.translate(center.x, center.y);
        for (var i = 0; i < bars; i++) {
            var curbar = (offset + i) % bars,
				pos = calculatePosition(curbar);
            ctx.save();
            ctx.translate(pos.x, pos.y);
            ctx.rotate(pos.angle);
            drawBlock(context, i);
            ctx.restore();
        }
        ctx.restore();
    }
    function clearFrame(ctx) {
        try {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
        }
        catch (e) {
            console.log(ctx.canvas.width);
        }
    }
    function nextAnimation() {
        if (!animating) {
            return;
        };
        currentOffset = (currentOffset + 1) % bars;
        draw(context, currentOffset);
        setTimeout(nextAnimation, 50);
    }
    nextAnimation(0);
    return {
        stop: function() {
            animating = false;
            clearFrame(context);
        },
        start: function() {
            animating = true;
            nextAnimation(0);
        },
        toggle: function() {
            if (animating == true) {
                this.stop();
            }
            else {
                this.start();
            }
        }
    };
}
       
    function GetXmlHttpObject(handler) { var objXmlHttp = null; if (window.XMLHttpRequest) { objXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; } else if (window.ActiveXObject) { objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); objXmlHttp.onreadystatechange = handler; } return objXmlHttp; }
    function X(url, handler) {
        var self = this; this.Handler = function() { if (self.xmlHttp_temp.readyState == 4 || self.xmlHttp_temp.readyState == 'complete') handler(self.xmlHttp_temp); }
        this.xmlHttp_temp = GetXmlHttpObject(this.Handler); this.xmlHttp_temp.open('GET', url, true); this.xmlHttp_temp.send(null);
    }
    
    HTMLElement.prototype.click = function() {
        var evt = this.ownerDocument.createEvent('MouseEvents');
        evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
        this.dispatchEvent(evt);
    }


    function AjaxObject(link) //create object so we can do  multiple ajax
    {
        var self = this;

        this.Handler = function(xml) {
            WaitOk();
            ul = document.createElement("ul");
            ul.setAttribute("id", self.id);
            ul.setAttribute("title", self.Name);
            ul.setAttribute("parentName", self.parentName);
            ul.innerHTML = xml.responseText ;
            document.body.appendChild(ul);
            self.link.click();
        }

        ZoomImage = function(src) {
            //alert(src);
            ul = document.createElement("ul");
            ul.setAttribute("id", self.id);
            ul.setAttribute("title", self.Name);
            ul.setAttribute("parentName", self.parentName);
            ul.innerHTML = "<div align='center'><img src='" + src + "' /></div><br>" + _footer;
            document.body.appendChild(ul);
            self.link.click();
        }
      
      
        WaitOk = function () {
            var progContainer = document.getElementById(self.progressID);
            // remove progress indicator
            if (progContainer.firstChild) {
                controller.stop();
                progContainer.removeChild(progContainer.firstChild);
            }
            self.link.removeChild(self.prog);
        }  
        
        AjaxWait= function () {
		    var progContainer = document.getElementById(self.progressID);
		    // remove progress indicator
		    
		    if (progContainer.firstChild) {
			    controller.stop();
			    progContainer.removeChild(progContainer.firstChild);
		    }

		    // insert progress indicator
		    var progContainer = document.getElementById(self.progressID);
		    var can = document.createElement("canvas");
		    can.setAttribute("height", 30); //15
		    can.setAttribute("width",  30);
		    can.setAttribute("style", "margin:0 0 0 0; background:#transparent;");
		    progContainer.appendChild(can);


            //0
		    controller = getLoading(can.getContext("2d"), 12, { x: 12, y: 12 }, 6, { width: 2, height: 5 }, { red: 50, green: 79, blue: 133 });
	    }

        this.id = link.hash.substr(1);
        if(link.hash=="#")
		    return;
        this.progressID= this.id+"progressCont";
        this.link = link;
        

        
        
        this.parentName = link.parentNode.parentNode.getAttribute("title");
        if (!this.parentName)
            this.parentName = "Home";

        //detect "zoom image"
        if (this.id.substr(0, 1) == "Z") {
            this.Name = "Image Zoom";
            ZoomImage(link.getAttribute("imageSource"));
            return;
        }

        this.Name = link.innerHTML;//.substr(link.innerHTML.indexOf('>')+1);
        
        
        
         if(this.id.substr(0,1)=="P")
        {
            this.Name=link.parentNode.title; 
            var productName=link.getAttribute("productName");
            if(productName)
            {
                this.Name=productName;
                this.parentName=link.parentNode.title;
            }
        }
       
        var href = document.location.href;
        var url = href.substr(0, href.indexOf('#'))+"?Command=" + this.id + "&Name=" + this.Name;
        
        this.prog = document.createElement("div");
		this.prog.setAttribute("id", this.progressID);
		this.prog.setAttribute("style","float:right;height:0px;width:0px;");
		this.link.appendChild(this.prog);
		
		AjaxWait();
        
        var ajax = new X(url, this.Handler);

    }
    var strErr = "";
    var errCount = 0;
    
    
    function Validate(obj)
    {
        var id=obj.id.substr(5);

        validateForm(obj);
        
        if (strErr != "") {
            thisobj = document.getElementById("ul" + id);
            
            thisobj.style.display = "";
            thisobj.innerHTML = strErr;
            
            thisobj = document.getElementById("alert" + id);
            thisobj.style.display = "";
            
            strErr = "";
            errCount = 0;
            _alert = thisobj;
            return false;
        }
        document.getElementById("ul" + id).innerHTML = "";
        document.getElementById("alert" + id).style.display = "none";
        
        return true;
    }

    function validateForm(form) {
        var allSelects = document.getElementsByTagName("select");

        for (var i = 0; i < allSelects.length; i++) {
            if (allSelects[i].options[allSelects[i].selectedIndex].value == '' && allSelects[i].getAttribute("reqd") == "* ") {
                addValidationError(allSelects[i].options[0].text);
            }
        }

        var allInputs = document.getElementsByTagName("input");
        var togglesInError = ",";
        
        for (var i = 0; i < allInputs.length; i++) {
            switch (allInputs[i].type.toLowerCase()) {
                case "text":
                    if (allInputs[i].name && allInputs[i].name.indexOf("TEXTBOX__") == 0 && allInputs[i].value == "" && allInputs[i].getAttribute("reqd") == "* ") {
                        addValidationError("Enter value for " + document.getElementById("LABEL_" + allInputs[i].id).innerHTML);
                    }
                    break;
                case "radio":
                case "checkbox":
                    if (allInputs[i].name && allInputs[i].getAttribute("reqd") == "* " && !togglesInError.match("," + stripIdFromToggle(allInputs[i]) + ",")) {
                        var allRadios = document.getElementsByName(allInputs[i].name);
                        var isChecked = false;
                        for (var r = 0; r < allRadios.length; r++) {
                            isChecked = (allRadios[r].checked || isChecked);
                        }
                        if (!isChecked) {
                            addValidationError("Enter value for " + document.getElementById("LABEL_" + stripIdFromToggle(allInputs[i])).innerHTML);
                            togglesInError += stripIdFromToggle(allInputs[i]) + ",";
                        }
                    }
                    break;
            }
        }
    }
    
    function stripIdFromToggle(toggleControl) {
        return toggleControl.name.replace(/SELECT___.+___/, "")
    }

    function addValidationError(errorText) {
        strErr += "<li>" + errorText + "</li>";
        errCount++;
    }





//smart match code from storefront



    previous_selected_optionid = ""

    function change_option(arg_selectbox, arg_optionid) {
        var src_part, href;
        src_part = global_Config_StoreFolderName;
        src_part += unescape(global_src_part_Config_ProductPhotosFolder);
        src_part += '/';
        src_part += 'options';
        src_part += '/';
        src_part += global_Current_ProductCode + '-';

        var form = document.forms['MainForm'];

        //	var alternate_product_photo = document.getElementById('alternate_product_photo_' + arg_photo_number);
        //	var previous_alternate_product_photo = document.getElementById('alternate_product_photo_' + previous_selected_photo);
        var product_photo_zoom_url = document.getElementById('product_photo_zoom_url');
        var product_photo_zoom_url2 = document.getElementById('product_photo_zoom_url2');
        var product_photo = document.getElementById('product_photo');

        //HIDE all previously open spans (if they exist)
        if (document.getElementById("optionimg_" + previous_selected_optionid)) {
            removeClassName(document.getElementById("optionimg_" + previous_selected_optionid), 'selected');
        }

        //SHOW the selected SPAN tag + GROUP BY span tag (if they exist)
        if (document.getElementById('optionimg_' + arg_optionid)) {
            change_product_photo(2); // reset selected alternate view back to first view
            addClassName(document.getElementById("optionimg_" + arg_optionid), 'selected');
            product_photo.src = src_part + arg_optionid + '-T.jpg';
            href = "javascript:OpenNewWindow(global_SEOImage + '?ShowDesc=N&PhotoURL=' + global_Config_StoreFolderName + global_Config_ProductPhotosFolder + '/options/' + '" + escape(global_Current_ProductCode) + "-" + arg_optionid + ".jpg', 640, 480); void(0);";
            if (product_photo_zoom_url) {
                product_photo_zoom_url.href = href;
            }
            if (product_photo_zoom_url2) {
                product_photo_zoom_url2.href = href;
            }
        }

        var rebuildOptions = (typeof (TCN_reload) == 'function') ? true : false;
        //Loop through the dropdown to find and make this OptionID selected
        //Check for select boxes
        if (form.elements[arg_selectbox] && form.elements[arg_selectbox].options && form.elements[arg_selectbox].options.length > 0) {
            for (loop = 0; loop < form.elements[arg_selectbox].options.length; loop++) {
                if (form.elements[arg_selectbox].options[loop].value == arg_optionid) {
                    form.elements[arg_selectbox].selectedIndex = loop;
                    if (rebuildOptions) {
                        TCN_reload(form.elements[arg_selectbox]);
                    }
                }
            }
        }
        //Then check for radio buttons and checkboxes
        else if (form.elements[arg_selectbox] && form.elements[arg_selectbox].length > 1) {
            for (loop = 0; loop < form.elements[arg_selectbox].length; loop++) {
                if (form.elements[arg_selectbox][loop].value == arg_optionid) {
                    form.elements[arg_selectbox][loop].checked = true;
                    if (rebuildOptions) {
                        TCN_reload(form.elements[arg_selectbox]);
                    }
                }
            }
        }

        //SAVE the previous span to global variable for next call of this function
        previous_selected_optionid = arg_optionid

    }
    previous_selected_photo = "";
    function change_product_photo(arg_photo_number) {
        var src_part, ext, href;
        var popup = global_Config_EnablePhotosPopup;
        src_part = global_Config_StoreFolderName;
        src_part += unescape(global_src_part_Config_ProductPhotosFolder);
        src_part += '/';
        src_part += global_Current_ProductCode + '-';

        var alternate_product_photo = document.getElementById('alternate_product_photo_' + arg_photo_number);
        var previous_alternate_product_photo = document.getElementById('alternate_product_photo_' + previous_selected_photo);
        var product_photo_zoom_url = document.getElementById('product_photo_zoom_url');
        var product_photo_zoom_url2 = document.getElementById('product_photo_zoom_url2');
        var product_photo = document.getElementById('product_photo');

        //HIDE all previously open spans (if they exist)
        if (previous_alternate_product_photo) {
            removeClassName(previous_alternate_product_photo, 'selected');
        }

        //SHOW the selected SPAN tag + GROUP BY span tag (if they exist)
        if (alternate_product_photo) {
            addClassName(alternate_product_photo, 'selected');
            ext = alternate_product_photo.src;
            ext = ext.substr(ext.lastIndexOf('.') + 1);
            product_photo.src = src_part + arg_photo_number + 'T.' + ext;

            if (popup) {
                href = "javascript:OpenNewWindow('" + global_SEOImage + "?ShowDesc=N&PhotoNumber=" + arg_photo_number + "&ProductCode=" + escape(global_Current_ProductCode) + "', 640, 480); void(0);";
            }
            else {
                href = global_SEOImage_PhotoGallery + "?ProductCode=" + escape(global_Current_ProductCode) + "&PhotoNumber=" + arg_photo_number;
            }

            if (product_photo_zoom_url) {
                product_photo_zoom_url.href = href;
            }
            if (product_photo_zoom_url2) {
                product_photo_zoom_url2.href = href;
            }
        }

        //SAVE the previous span to global variable for next call of this function
        previous_selected_photo = arg_photo_number

    }