$.fn.onevariantselector = function() {


	var oxAjax = {

        /**
         * Loading temporary screen when ajax call proseeds
         */
        loadingScreen:  {

            /**
             * Starts load
             *
             * @target - DOM element witch must be hide with the loading screen
             * @iconPositionElement - element of a target on witch loaging icon is shown
             */
            start : function (target, iconPositionElement) {

                var loadingScreens = Array();
                $(target).each(function() {
                    var overlayKeeper = document.createElement("div");
                    overlayKeeper.innerHTML = '<div class="loadingfade"></div><div class="loadingicon"></div><div class="loadingiconbg"></div>';
                    $('div', overlayKeeper).css({
                            'position' : 'absolute',
                            'left'     : $(this).offset().left-10,
                            'top'      : $(this).offset().top-10,
                            'width'    : $(this).width()+20,
                            'height'   : $(this).height()+20
                        });
                    if (iconPositionElement && iconPositionElement.length) {
                        var x = Math.round(
                            iconPositionElement.offset().left // my left
                            - 10 - $(this).offset().left      // relativeness
                            + iconPositionElement.width()/2   // plus half of width to center
                        );
                        var offsetTop = iconPositionElement.offset().top;
                        var y = Math.round(
                            offsetTop                         //my top
                            - 10 - $(this).offset().top       // relativeness
                            + (                               // this requires, that last element in collection, would be the bottom one
                                                              // as it computes last element offset from the first one plus its height
                                iconPositionElement.last().offset().top - offsetTop + iconPositionElement.last().height()
                            )/2
                        );

                        $('div.loadingiconbg, div.loadingicon', overlayKeeper).css({
                            'background-position' : x + "px "+y+"px"
                        });
                    }
                    $('div.loadingfade', overlayKeeper)
                        .css({'opacity' : 0})
                        .animate({
                            opacity: 0.55
                        }, 200
                        );
                    $("body").append(overlayKeeper);
                    loadingScreens.push(overlayKeeper);
                });

                return loadingScreens;
            },


            /**
             * Stops viewing loading screens
             *
             * @loadingScreens - one or more showing screens
             */
            stop : function ( loadingScreens ) {
              $.each(loadingScreens, function(i, el) {
                  $('div', el).not('.loadingfade').remove();
                  $('div.loadingfade', el)
                      .stop(true, true)
                      .animate({
                          opacity: 0
                      }, 100, function(){
                          $(el).remove();
                      });
              });
            }
        },

        /**
         * Updating errors on page
         *
         * @errors - array of errors
         */
        updatePageErrors : function(errors) {
            if (errors.length) {
                var errlist = $("#content > .status.error");
                if (errlist.length == 0) {
                    $("#content").prepend("<div class='status error corners'>");
                    errlist = $("#content > .status.error");
                }
                if (errlist) {
                    errlist.children().remove();
                    var i;
                    for (i=0; i<errors.length; i++) {
                        var p = document.createElement('p');
                        $(p).append(document.createTextNode(errors[i]));
                        errlist.append(p);
                    }
                }
            } else {
                $("#content > .status.error").remove();
            }
        },

        /**
         * Ajax call
         *
         * @activator - link or form element that activates ajax call
         * @params - call params: targetEl, iconPosEl, onSuccess, onError, additionalData
         */
        ajax : function(activator, params) {
            var self = this;
            var inputs = {};
            var action = "";
            var type   = "";
            if (activator[0].tagName == 'FORM') {
                $("input", activator).each(function() {
                    inputs[this.name] = this.value;
                });
                action = activator.attr("action");
                type   = activator.attr("method");
            } else if (activator[0].tagName == 'A') {
                action = activator.attr("href");
            }

            if (params['additionalData']) {
                $.each(params['additionalData'], function(i, f) {inputs[i] = f;});
            }

            var sLoadingScreen = null;
            if (params['targetEl']) {
                sLoadingScreen = self.loadingScreen.start(params['targetEl'], params['iconPosEl']);
            }

            if (!type) {
                type = "get";
            }

            jQuery.ajax({
                data    : inputs,
                url     : action,
                type    : type,
                timeout : 30000,

                error   : function(jqXHR, textStatus, errorThrown) {
                    if (sLoadingScreen) {
                        self.loadingScreen.stop(sLoadingScreen);
                    }
                    if (params['onError']) {
                        params['onError'](jqXHR, textStatus, errorThrown);
                    }
                },

                success : function(r) {

                    if (sLoadingScreen) {
                        self.loadingScreen.stop(sLoadingScreen);
                    }
                    if (r['debuginfo'] != undefined && r['debuginfo']) {
                        $("body").append(r['debuginfo']);
                    }
                    if   (r['errors'] != undefined
                       && r['errors']['default'] != undefined) {
                        self.updatePageErrors(r['errors']['default']);
                    } else {
                        self.updatePageErrors([]);
                    }
                    if (params['onSuccess']) {
                        params['onSuccess'](r, inputs);
                    }
                }
            });
        },

        /**
         * Evals returned html and executes javascript after reload
         *
         * @container - witch javascript must be restarted
         */
        evalScripts : function(container){
            try {
                $("script", container).each(function(){
                    try {
                        eval(this.innerHTML);
                    } catch (e) {
                       //  console.error(e);
                    }
                    $(this).remove();
                });
            } catch (e) {
               //  console.error(e);
            }
        }
    };





	var sendIt = function(obj) {

		$( "form.js-oxProductForm input[name=anid]" ).attr( "value", $( "form.js-oxProductForm input[name=parentid]" ).attr( "value" ) );

		if (($( "input[name=aid]", this ).val() == $( "input[name=parentid]", this ).val() )) {
			var aSelectionInputs = $("input[name^=varselid]");

			if (aSelectionInputs.length) {
				var hash = '';
				aSelectionInputs.not("*[value='']").each(function(i){
					hash = hash+i+':'+$(this).val()+"|";
				});

			}
		}


		var form = obj.closest("form");
		$('input[name=fnc]', form).val("");


		$("#imgSelector, #mainImgContainer, #avatar").fadeOut(300);

		oxAjax.ajax( $("form.js-oxProductForm"),
			{
				'targetEl'  : $("#productinfo"),
				'iconPosEl' : $("#variants .dropDown"),
				'additionalData' : {'renderPartial' : 'productInfo'},
				'onSuccess' : function(r) {
					$("#productinfo")[0].innerHTML = r['content'];
					oxAjax.evalScripts($("#productinfo")[0]);
					$().oneinitdetailpage();
					$("#imgSelector, #mainImgContainer, #avatar").fadeIn(300);
				}
			}
		);

	};
	

	$(".variantselector option").bind("click", function() {

		if( !$(this).hasClass("disabled") ) {
			var obj = $( this );
			if(obj.val() == '#') return false;
			$("#varsel_" + obj.parent().attr("id").replace(/variant_/,"")).attr("value", obj.attr("value"));
			sendIt(obj);
		}
		return false;

	});


	$(".variantbox .colorlink").bind("click", function() {

		if( !$(this).hasClass("disabled") ) {
			var obj = $( this );

			$("#varsel_" + obj.parent().attr("id").replace(/variant_/,"")).attr("value", obj.attr("data-oxid"));

			sendIt(obj);
		}
		return false;

	});


	$(".variantReset .reset").bind("click", function() {


		var aVarSelections = $( "form.js-oxProductForm input[name^=varselid]" );
        for (var i = 0; i < aVarSelections.length; i++) {
            $( aVarSelections[i] ).attr( "value", "" );
        }
        $( "form.js-oxProductForm input[name=anid]" ).attr( "value", $( "form.js-oxProductForm input[name=parentid]" ).attr( "value" ) );

		var obj = $( this );
        var form = obj.closest("form");
        $('input[name=fnc]', form).val("");
        form.submit();
        return false;

	});


};