function modelsPopup(element,formLevel) {
        $pageDimensions=pageDimensions();
        $("body").append("<div id='modelsOverlay'></div><div id='modelsPopup' style='display: none;'><h2>Učlanite se</h2><div class='inner'></div></div>");
        $("#modelsOverlay").css({ height:$pageDimensions[0], width:$pageDimensions[1], opacity: "0.8" });    
        $(window).resize(function(){
            $pageDimensions=pageDimensions();
            $("#modelsOverlay").css({ height:$pageDimensions[0], width:$pageDimensions[1], opacity: "0.8" });
        });		
        $("#modelsOverlay").click(function(){ 
            $("#modelsPopup").remove();
            $(this).remove();
        });      
        $.get(urlRoot+"index.php?page=investaPopUp&type=registation", function(data){
            $("#modelsPopup .inner").append(data);
            $("#modelsPopup input[type=checkbox]").checkbox();
           
            $("#termsLabel u").click(function(){ termsPopup(); });
                      
            var addInfo = $("#switchBox").html();
            $("#switchBox").remove();
            var startContent = $("#switchBox2").html();
            $("#switchBox2").remove();
            var proContent = $("#switchBox3").html();
            $("#switchBox3").remove();
            var cardType = $("#cardBox").html();
            $("#cardBox").remove();
            
            switch (formLevel){
              case "content1":
                $("#modelsPopup #basicUser").attr("checked","checked");
                $("#modelsText1").show();
                break;
              case "content2":
                $("#modelsPopup #startUser").attr("checked","checked");
                $("#modelsText2").show();
                break;
              case "content3":
                $("#modelsPopup #proUser").attr("checked","checked");
                $("#modelsText3").show();
                break;
              default:
                $("#modelsText1").show();
                $("#modelsPopup #basicUser").attr("checked","checked");
                break;
            }
            
            if ($("#modelsPopup input.radio:checked").attr("id")=="basicUser") { switchToBasic(); }
            if ($("#modelsPopup input.radio:checked").attr("id")=="startUser") { switchToStart(addInfo,startContent,cardType); }
            if ($("#modelsPopup input.radio:checked").attr("id")=="proUser") { switchToPro(addInfo,proContent,cardType); }
            
            $('html, body').animate({scrollTop:0}, 'fast');            
            var left = ($(window).width() - $("#modelsPopup").width())/2;            
            $("#modelsPopup").css("top","25px").css("left",left).css("margin-bottom","50px").fadeIn("slow");
            
            $("#modelsPopup .wrapper input.radio").click(function(){
                switch ($(this).attr("id")){
                  case "basicUser":
                      switchToBasic();
                      if( $("#frmUserDetail").attr("rel")=="start" ){
                      
                      } else {
                          $("#modelsPopup .infoText").hide();
                          $("#modelsText1").show();
                      }
                      break;
                  case "startUser":
                      switchToStart(addInfo,startContent,cardType);
                      if( $("#frmUserDetail").attr("rel")=="start" ){
                      
                      } else {
                          $("#modelsPopup .infoText").hide();
                          $("#modelsText2").show();
                      }
                      break;
                  default:
                      switchToPro(addInfo,proContent,cardType);
                      if( $("#frmUserDetail").attr("rel")=="start" ){
                      
                      } else {
                          $("#modelsPopup .infoText").hide();
                          $("#modelsText3").show();
                      }
                      break;
                }            
                $pageDimensions=pageDimensions();
                $("#modelsOverlay").css({ height:$pageDimensions[0], width:$pageDimensions[1], opacity: "0.8" });
            });
            $("#modelsPopup .button").click(function() {            
                $("#modelsPopup .button").css("opacity","0.5");
                $("#modelsPopup .errorImg").remove();
                $("#modelsPopup .error").remove();
                $("#modelsPopup .error2").remove();                
                if($("#modelsPopup #users_name").val()==""){ $("#users_name").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite ime</span>"); }
                if($("#modelsPopup #users_forname").val()==""){ $("#users_forname").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error'class='errorImg'  /><span class='error'>Unesite prezime</span>"); }         
                if($("#modelsPopup #users_phone").val()==""){ $("#users_phone").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite telefon</span>"); }
                if($("#modelsPopup #users_address").val()==""){ $("#users_address").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite adresu</span>"); }
                if($("#modelsPopup #users_city").val()==""){ $("#users_city").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite grad</span>"); }
                if($("#modelsPopup #users_po").val()==""){ $("#users_po").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite poštanski broj</span>"); }
                if($("#modelsPopup #users_email").val()==""){ $("#users_email").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite email!</span>"); }
                    else {             
                        if(!emailValidation($("#users_email").attr('name'))){ $("#users_email").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unijeli ste krivi email!</span>"); }
                    }
                if($("#modelsPopup #users_pass").val()!=$("#users_passCheck").val()){ $("#users_passCheck").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unijeli ste krivu lozinku!</span>"); }
                    else { if ($("#users_pass").val().length<6) { $("#users_passCheck").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Molimo unesite lozinku od 6 ili više znakova!</span>"); }
                }
                if  ( !$("#modelsPopup #terms").is(":checked") ) { $("#termsLabel").after("<span class='error2'>kvačicom morate prihvatiti uvjete korištenja!</span>"); }
                
                
                if($("#modelsPopup #users_userName").val()==""){ 
                    $("#users_userName").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Unesite korisničko ime!</span>");
                } else {
                    $.post(urlRoot+"index.php?page=validatePopUp", { userName: $("#users_userName").val() } ,function(data){
                        if(data==1){ 
                            $("#users_userName").after("<img src='"+urlRoot+"images/ICONerror.gif' alt='error' class='errorImg' /><span class='error'>Korisničko ime je zauzeto! Pokušajte drugo ime.</span>");
                        } else {
                            if (($("#modelsPopup .error").length + $("#modelsPopup .error2").length)==0) {        
                                var formData = new Array();
                                for(i=0;i<$("#modelsPopup input.txt").length;i++){
                                    formData[i]=encodeURI($("#modelsPopup input.txt:eq("+i+")").attr("id")+"="+$("#modelsPopup input.txt:eq("+i+")").val());
                                }
                                formData=formData.join("&");
                                var formRadioData = new Array();
                                for(i=0;i<$("#modelsPopup .wrapper input:radio:checked").length;i++){
                                    formRadioData[i]=$("#modelsPopup .wrapper input:radio:checked:eq("+i+")").attr("name")+"="+$("#modelsPopup .wrapper input:radio:checked:eq("+i+")").attr("id");
                                }
                                formRadioData=formRadioData.join("&");
                                var formCcardData = new Array();
                                for(i=0;i<$("#modelsPopup #cardBox input:radio:checked").length;i++){
                                     var ccardType = $("#modelsPopup #cardBox input:radio:checked:eq("+i+")").attr("id");
                                     formCcardData[i]=$("#modelsPopup #cardBox input:radio:checked:eq("+i+")").attr("name")+"="+ccardType.substr(4,ccardType.length-4);
                                }
                                formCcardData=formCcardData.join("&");
                                $.post(urlRoot+"index.php?page=userRegistration&"+formData+"&"+formRadioData+"&"+formCcardData, function(data){ 
                                    $("#modelsPopup .inner").html(data);
                                    $("#modelsPopup .inner").append('<img id="modelsContinue" src="'+urlRoot+'images/button/ok.gif" alt="Nastavi" />');
                                    $("#modelsContinue").click(function(){
                                        $("#modelsPopup").remove();
                                        $("#modelsOverlay").remove();
                                    });
                                    return false;
                                });
                            }
                        }                     
                    });                
                }
                $("#modelsPopup .button").css("opacity","1");
                $pageDimensions=pageDimensions();
                $("#modelsOverlay").css({ height:$pageDimensions[0], width:$pageDimensions[1], opacity: "0.8" });
            });
        });
}

function emailValidation(emailField) { return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($("#"+emailField).attr('value')))?true:false }
function switchToBasic(){
    $("#switchBox").remove();
    $("#switchBox2").remove();
    $("#switchBox3").remove();
    $("#cardBox").remove();
    $("#switchBoxHolder .error").remove();
    $("#switchBoxHolder .errorImg").remove();
}
function switchToStart(addInfo,startContent,cardType){
    if ($("#users_email").parent().next().is("#switchBox")) {
        
    } else {
        $("#users_email").parent().after("<div id='switchBox'>"+addInfo+"</div>");
    }
    $("#switchBox2").remove();
    $("#switchBox3").remove();
    $("#cardBox").remove();
    $("#switchBoxHolder .error").remove();
    $("#switchBoxHolder .errorImg").remove();
    $("#frmUserDetail .termsWrapper").before("<div id='cardBox'>"+cardType+"</div>");
    $("#proUser").next("label").after("<div id='switchBox3'>"+startContent+"</div>");
}
function switchToPro(addInfo,proContent,cardType){
    if ($("#users_email").parent().next().is("#switchBox")) {
        
    } else {
        $("#users_email").parent().after("<div id='switchBox'>"+addInfo+"</div>");
    }
    $("#switchBox2").remove();
    $("#switchBox3").remove();
    $("#cardBox").remove();
    $("#switchBoxHolder .error").remove();
    $("#switchBoxHolder .errorImg").remove();
    $("#frmUserDetail .termsWrapper").before("<div id='cardBox'>"+cardType+"</div>");
    $("#proUser").next("label").after("<div id='switchBox2'>"+proContent+"</div>");
}

