/**
         *  temporary only for DEMO
         */
        function toggleQsNotify()
        {
            if (qsNotifyChange == 0)
            {
                qsNotifyChange = 1;

                alert('qsNotifyChange active');
            }
            else
            {
                qsNotifyChange = 0;

                alert('qsNotifyChange inactive');
            }
        }


        /**
         *  temporary only for DEMO
         */
        function toggleQsNextStep()
        {
            if (qsNextStep == 0)
            {
                qsNextStep = 1;

                alert('qsNextStep active');
            }
            else
            {
                qsNextStep = 0;

                alert('qsNextStep inactive');
            }
        }


        /**
         * toggles div-border for product and color selection
         *
         * @param sElement  the current element, you want to modify
         * @param sAction   action, hover or <define-here>
         */
        function toggleActiveSelection(sElement, sAction)
        {
            if (sAction == 'hover')
            {
                $(sElement).removeClassName('qsInactive');
                $(sElement).addClassName('qsActive');
            }
            else /* mouseout*/
            {
                $(sElement).removeClassName('qsActive');
                $(sElement).addClassName('qsInactive');
            }
        }


        function qsHideWrapper()
        {
            qsHideArrow();
            $('quickselect_wrapper').hide();
        }


        /**
         * toggles error message display
         *
         * @param errorMsg Error Message, automatically forced toString()
         * @param errorType the 'branch' of the error (i.e. color)
         */
        function showError(errorMsg, errorType)
        {
            qsErrorType = errorType.toString();

            var notice = $('quickselect_error');
            notice.update('<span class="errorMsg">' + errorMsg.toString() + '</span>');
            $('quickselect_wrapper').show();
            notice.show();
        }


        /**
         *  toggles error message removal, hides everything but thisType
         *
         *  @param  thisType Maintains this error type
         */
        function hideError(thisType)
        {
            if (qsErrorType != '')
            {
                if (qsErrorType != thisType)
                {
                    $('quickselect_error').update('');
                    $('quickselect_error').hide();
                }
            }
        }

       
        /**
         * Highlights an input field by the given id
         *
         * @param sFieldId   html id of an input field
         * @param sBranch    'branch' of message i.e. notice
         */
        function qsHighlight(sFieldId, sBranch)
        {
            var aNotice = { startcolor: '#ff00ff', endcolor: '#ffffff', restorecolor: '#ffffff' };
            var aSuccess = { startcolor: '#008975', endcolor: '#ffffff', restorecolor: '#ffffff' };
            var msgColor = '';
            
            if (sBranch == 'success')
            {
                msgColor = aSuccess;
            }
            else
            {
                msgColor = aNotice;
            }

            new Effect.Highlight(sFieldId, msgColor);
        }


        /**
         * displays a message (i.e. 1. Produkt w&auml;hlen)
         *
         * @param qsMessage message to display
         * @param qsMsgType message branch
         */
        function displayMessage(qsMessage, qsMsgType)
        {
            var notice = $('quickselect_error');
            var message = $('quickselect_message');

                if (qsMessageType != qsMsgType)
                {
                    qsMessageType = qsMsgType;
                    message.update('<span class="colorGreen">' + qsMessage.toString() + '</span>');
                    $('quickselect_message').show();
                }
        }


        /**
         *   resets radio buttons of type 'qsmeasure'
         *
         *   @param sFormId form id
         */
        function resetRadio(sFormId)
        {
            /* var form = $('quickselect_form') */
            var form = $(sFormId);

            if (form != null)
            {
                var radios = form.getInputs('radio', 'qsmeasure');

                radios.each( function(e) {
                               e.checked = 0
                            });
            }
        }


        /**
         * 'checks' an input radio field
         *
         * @param qsRadioId ID of radio button
         */
        function checkQsRadio(qsRadioId)
        {
            $(qsRadioId).checked = 1;
        }


        /**
         * evaluates if a product and a color had been selected,
         * if not there will launched certain measures
         * @see resetRadio()
         * @see showError()
         * @see getQsProducts()
         * @see getQsColor()
         * @return bool
         */
        function evalRequire()
        {
            var hiddenProduct = $('qshproduct');
            var hiddenColor = $('qshcolor');

            if (hiddenProduct.value == '')
            {
                resetRadio('quickselect_form');
                showError('Fehler: Bitte w&auml;hlen Sie zu erst ein Produkt aus!', 'product');
                getQsProducts();

                return false;
            }

            if (hiddenColor.value == '')
            {
                resetRadio('quickselect_form');
                showError('Fehler: Bitte w&auml;hlen Sie zu erst eine Farbe aus!', 'color');
                getQsColor($('qshproduct').value);

                return false;
            }

            return true;
        }


        function qsShowArrow(sBranch)
        {
             qsHideArrow();
             $('arrow-qs' + sBranch).show();
        }

        function qsHideArrow()
        {
             $('arrow-qsproduct').hide();
             $('arrow-qscolor').hide();
             $('arrow-qssize').hide();
        }


        /**
         *  fetches QuickSelect Products
         *  @see ajaxRequest()
         */
        function getQsProducts()
        {
            hideError('product');
            displayMessage('1. Produkt w&auml;hlen', 'product');
            
            qsHideArrow();
            qsShowArrow('product');

            var url = '/?cl=quickselect&fnc=listproduct';

            ajaxRequest(url);
        }


        /**
         *  fetches QuickSelect Colors
         *  @see ajaxRequest()
         */
        function getQsColor(sProduct)
        {
            hideError('color');
            displayMessage('2. Farbe w&auml;hlen', 'color');
            
            qsHideArrow();
            qsShowArrow('color');

            var url = '/?cl=quickselect&fnc=listcolor&ffcid=' + sProduct;

            ajaxRequest(url);
        }


        /**
         *  fetches QuickSelect Measure
         *  @see ajaxRequest()
         */
        function getQsMeasure()
        {
            var evalReq = evalRequire();

            if (evalReq)
            {
                var hiddenProduct = $('qshproduct');
                var hiddenColor = $('qshcolor');

                if ((hiddenProduct.value != '') && (hiddenColor.value != ''))
                {
                    hideError('measure');
                    displayMessage('3. Gr&ouml;&szlig;e w&auml;hlen       <small class="colorGreen">(Breite x H&ouml;he)</small>', 'measure');
                    
                    qsHideArrow();
                    qsShowArrow('size');


                    var sProduct = hiddenProduct.value;
                    var sColor = hiddenColor.value;
                    var url = '/?cl=quickselect&fnc=listmeasure&ffcid=' + sProduct + '&qshcolor=' + sColor;

                    ajaxRequest(url);
                }
            }
        }


        /**
         *  fetches Variant by form parameters
         *  @see ajaxRequest()
         */
        function getQsVariantBySelection()
        {
          showIndicator();
          var url = '/?cl=quickselect&fnc=getVariantBySelection' + '&' + $('quickselect_form').serialize();

          new Ajax.Request(url, {
            method: 'get',
            onSuccess: function(transport) {
              if(transport.responseText.isJSON())
              {
                var response = transport.responseText.evalJSON(true);
                if(response.redirect_url)
                {
                  //redirect
                  document.location = response.redirect_url;
                }
              }
              else
              {
                  showError(transport.responseText, 'basket');
              }
              $('indicatorImg').hide();
              }
          });
        }


        /**
         * updates the hidden field and toggles frontend display
         *
         * @param  sProduct  Product Category Id
         * @param  sDisplayName Display text for the selected product
         */
        function setQsProduct(sProduct, sDisplayName)
        {
            var hiddenProduct = $('qshproduct');
            var displayProduct = $('text-qsproduct');
            var hiddenColor = $('qshcolor');
            var displayColor = $('text-qscolor');
            var hiddenDimX = $('qshdimx');
            var hiddenDimY = $('qshdimy');
            var displayMeasure = $('text-qssize');
            var displayPrice = $('text-qsprice');



            hiddenColor.value = '';
            hiddenProduct.value = sProduct;
            displayProduct.value = sDisplayName;
            hiddenDimX.value = '';
            hiddenDimY.value = '';

            displayColor.value = 'Bitte eine Farbe waehlen!';
            displayMeasure.update('Weitere Gr&ouml;&szlig;en!');
            displayPrice.update('');
            $('qssubmit-button').addClassName('inactive');

            resetRadio('quickselect_form');

            if (qsNotifyChange == 1)
            {
                qsHighlight('text-qsproduct', 'success');
                qsHighlight('text-qscolor', 'notice');
                qsHighlight('text-qssize', 'notice');
                qsHighlight('text-qsprice', 'notice');
            }

            if (qsNextStep == 1)
            {
                getQsColor(sProduct);
            }
        }


        /**
         * updates the hidden field and toggles frontend display
         *
         * @param  sColor  Color String
         * @param  sDisplayName Display text for the selected color
         */
        function setQsColor(sColor, sDisplayName)
        {
            var hiddenColor = $('qshcolor');
            var displayColor = $('text-qscolor');

            hiddenColor.value = sColor;
            displayColor.value = sDisplayName;

            updateQsMeasure();

            if (qsNotifyChange == 1)
            {
                qsHighlight('text-qscolor', 'success');
            }

            if (qsNextStep == 1)
            {
                getQsMeasure();
            }
        }


        /**
         * updates the hidden field and toggles frontend display
         *
         * @param  sDimX Measure X-Axis
         * @param  sDimY Measure Y-Axis
         * @param  sDimPrice Price of the product
         * @param  sDisplayName Display text for the selected product
         * @param  sExtraBit -tags todo
         * @see evalReq()
         */
        function setQsMeasure(sDimX, sDimY, sDimPrice, sDisplayName, sExtraBit)
        {
            var evalReq = evalRequire();

            if (evalReq)
            {
                var hiddenDimX = $('qshdimx');
                var hiddenDimY = $('qshdimy');
                var displayMeasure = $('text-qssize');
                var displayPrice = $('text-qsprice');

                hiddenDimX.value = sDimX;
                hiddenDimY.value = sDimY;

                if ((typeof(sExtraBit) == 'undefined') || (sExtraBit == '0') )
                {
                    displayMeasure.update(sDisplayName);
                    displayPrice.update(sDimPrice);
                    resetRadio('quickselect_form');
                    checkQsRadio('qssize_radio');
                    
                    if (qsNotifyChange == 1)
                    {
                        qsHighlight('text-qssize', 'success');
                        qsHighlight('text-qsprice', 'success');
                    }

                }
                else
                {
                    $('qssize_radio').checked = 0;
                    displayMeasure.update('Weitere Gr&ouml;&szlig;en!');
                    displayPrice.update('');
                    resetRadio('quickselect_measure');
                }
                
                $('qssubmit-button').removeClassName('inactive');
            }
        }


        /**
         *  processes the ajax requests
         *
         *  @param qsUrl URL to ajax controller
         */
        function ajaxRequest(qsUrl)
        {
            showIndicator();

            new Ajax.Request(qsUrl, {
              method: 'get',
              onSuccess: function(transport) {
                var notice = $('quickselect_content');

                 notice.update(transport.responseText);
                 $('quickselect_wrapper').show();
                 $('indicatorImg').hide();
                }
            });
        }


        /**
         *  updates the measures for the main window
         */
        function updateQsMeasure()
        {
            var hiddenColor = $('qshcolor');
            var hiddenProduct = $('qshproduct');
            var sProduct = hiddenProduct.value;
            var sColor = hiddenColor.value;
            var url = '/?cl=quickselect&fnc=topmeasure&ffcid=' + sProduct + '&qshcolor=' + sColor;

            new Ajax.Request(url, {
              method: 'get',
              onSuccess: function(transport) {
                var notice = $('qssizeoverview');

                 notice.update(transport.responseText);
                }
            });
        }


        document.observe('dom:loaded', function() {
            
            updateQsMeasure();

        });