function NewCustomerInfoCampaignPage() {
    this.step_ids = new Array;           // Array of all step ids in sort order (id,id,id,id)
    this.steps = new Array;              // A hash of steps indexed by their position in this.step_ids (id => obj)
    this.steps_reverseindex = new Array; // A hash of step ids indexed by their id (id => index)
    
    this.section_headline=" ";

    //dev
    /* this.article_service=424; //service information
    this.article_pledge=425; //tilsagn
    this.article_myloan=426; 
    this.article_contact=427; //Kontakt
     */

    //live

    this.article_service=453; //service information
    this.article_pledge=454; //tilsagn
    this.article_contact=452; //Kontakt
  
    
}

NewCustomerInfoCampaignPage.prototype.sendPledge = function(form) {
    // Check for valid email address
    if ( form.email.value == "" || !( (form.email.value.indexOf(".") > 2) && (form.email.value.indexOf("@") > 0) ) ) {
        removeElementClass("pledge_bad_email_error","block_hidden");
        addElementClass("pledge_bad_email_error","block_visible");
        return;
    }

    // Populate questions
    jsonRequest({
        'name'       :form.name.value,
        'address'    :form.address.value,
        'phonenumber':form.phonenumber.value,
        'email'      :form.email.value,
        'former_bank':form.former_bank.value
    },
    bind(
        function(result) {
            if ( result.status == 'OK' ) {
                tstat("Fritstående kunder", "Fritstående kunder - send mail","Velkommen,Har du skiftet bank,Ring mig op"
                    ,{
                        'events':"event24"
                    });
                roiCallMePledge();
                replaceChildNodes('digital_pledge_form_container',DIV({
                    'id':'digital_pledge_thank_you_note'
                },"Tak for dit tilsagn! Vi har sendt dig en email med et bekræftigelses link."));
            }
            else {
                replaceChildNodes('digital_pledge_form_container',DIV({
                    'id':'digital_pledge_thank_you_note'
                },"Der er opstået en fejl, prøv venligst igen senere."));
            }
        }
        ),
    'info/give_pledge'
    );
    gstatPledgeChangeBank();

    return false;
};

NewCustomerInfoCampaignPage.prototype.digitalPledgeWidget = function() {
    var form = FORM({
        'id':"digital_pledge_form",
        'method':"get"
    },
    LABEL({
        'for':"name"
    }, "Navn"),
    INPUT({
        'type'  :"text",
        'name'  :"name"
    }),
    LABEL({
        'for':"address"
    },"Adresse"),
    TEXTAREA({
        'name':"address",
        'style':"font-family:verdana;font-size:10px"
    }),
    DIV({
        id:"pledge_bad_email_error",
        'class':'notice block_hidden'
    },
    "Den emailadresse du har indtastet er ugyldig. Udfyld med korrekt mailadresse."
    ),
    LABEL({
        'for':"email"
    },"Mail"),
    INPUT({
        'id'    :"digital_pledge_form_email",
        'type'  :"text",
        'name'  :"email"
    }),
    LABEL({
        'for':"phonenumber"
    },"Tlf."),
    INPUT({
        'type'  :"text",
        'name'  :"phonenumber"
    }),
    LABEL({
        'for':"former_bank"
    },"Nuværende pengeinstitut"),
    INPUT({
        'type'  :"text",
        'name'  :"former_bank"
    })
    );

    var button = A({
        'id':'digital_pledge_form_button',
        src:'#',
        style:'float: right; margin-top: 5px;'
    },
    IMG({
        src:'resources/images/send.gif'
    })
    );
    connect(button, "onclick",  bind(this.sendPledge, this, form));

    var content = DIV({
        'id':'digital_pledge',
        'class':'panel',
        'style':'background-image: none;'
    },
    DIV({
        'height':'36px'
    },
    IMG({
        'src':'resources/images/pledge_header_icon.png',
        'style':'float: right;'
    }),
    H3({
        'style':'padding-top: 20px; font-weight: bold;'
    },"Digitalt tilsagn")
    ),
    DIV({
        'id':'digital_pledge_form_container'
    },
    form,
    button
    )
    );

    return content;
};

NewCustomerInfoCampaignPage.prototype.questionsAndAnswersWidget = function(id,question,answer) {
    // Create link and connect it to the expand method
    var link = DIV({
        'style':'height:50px;background:url(resources/images/questionexpanderarrow.gif) no-repeat bottom right;'
    },
    A( {
        'id':"qa_question_"+id,
        'href' : "#"
    },
    IMG({
        'src':'resources/images/questionmark.gif',
        'style':'float: left; display: inline;'
    }),
    SPAN({
        'id':'qa_question_content_'+id,
        'style':'color: black;'
    },
    question
    //,IMG({'src':'resources/images/questionexpanderarrow.gif', 'style':'float: right; position: absolute; right: 0; bottom: 0;'})
    )
    )
    );
    connect(link, "onclick", bind(this.expandQuestion, this, id));

    var answerdiv=DIV({
        'id':'qa_collapsible_'+id,
        'style':'border: 2px solid #e3e3e3; padding: 3px 8px;',
        'class':'block_hidden'
    },"");
    answerdiv.innerHTML=answer;
    
    var content = DIV({
        'style':'margin-bottom: 2px;'
    },
    DIV({
        'style':'border: 2px solid #e3e3e3; background-color: #e3e3e3;'
    },
    link
    ), answerdiv
        
    );
    return content;
};

NewCustomerInfoCampaignPage.prototype.questionsAndAnswersStepWidget = function() {
    // Fetch questions and answers
    var content = DIV({
        'id':'qa_question_container'
    },"");

    // Populate questions
    jsonRequest({},
        bind(
            function(result) {
                for ( var i = 0 ; i < result.questions.length ; i++ ) {
                    var question = result.questions[i];
                    content.appendChild(new_customer_info_campaign.questionsAndAnswersWidget(question['id'],question['question'],question['answer']));
                }
            }
            ),
        'info/questions'
        );

    return content;
};


NewCustomerInfoCampaignPage.prototype.digitalSignatureWidget = function() {
    var button = DIV({
        'id':'digital_signature',
        style:'height: 22px;'
    },
    A({
        'id':'digital_signature_button',
        src:'#',
        style:'float: right; margin-top: 5px;'
    },
    IMG({
        src:'resources/images/login.gif',
        style:""
    })
    )
    );

    // connect(button,"onclick", "http://this.other.site/");
    return button;
};


NewCustomerInfoCampaignPage.prototype.show = function(what_to_show) {
    // Create all the sections we need for this page
    this.createColorboxWithPage("step1","#78b1e8","Har du skiftet bank?", this.article_service);
    this.createColorboxWithSidebarAndPage("step2","#91abb8","Ring mig op", this.article_pledge, DIV({
        'style':'float:right'
    },this.digitalPledgeWidget()));
    this.createColorboxWithContent("step3","#c7a87a","Find en ny rådgiver",lookup.getEmbeddableWidget());
    lookup.origination = "Fritstående kunder";
    //this.createColorboxWithPageAndSidebar("step4","#ef9c4c","Mit totalkredit lån", this.article_myloan,this.digitalSignatureWidget());
    this.createColorboxWithContent("step5","#e49248","Spørgsmål og svar", this.questionsAndAnswersStepWidget());
    this.createColorboxWithPage("step6","#ff9a16","Kontakt", this.article_contact);
    
    //fix height on step2 since text is shorter than expected:
    try {
        setTimeout('$("cb_content_step2").style.height="247px";',3000);
    }catch(E){
        log(E);
    }
	
    
    // Add header
    replaceChildNodes(
        "mainpage",
        H1({
            'id':"mainheader",
            'class':"ne_fullheader"
        }, this.section_headline)
        );
    this.appendStepsToNode('mainpage');

    connect($("mainwrapper"),"colorBoxExpanded", function(e,id) {
        lookup.resetEmbeddableWidget();
    });

    if ( what_to_show == 'pledge' ) {
        this.expandColorbox(this.step_ids[1]);
    }
    else {
        this.expandColorbox(this.step_ids[0]);
    }
};

NewCustomerInfoCampaignPage.prototype.appendStepsToNode = function(id) {
    for ( var i = 0 ; i < this.step_ids.length ; i++ ) {
        appendChildNodes(id, this.steps[ this.step_ids[i] ]);

        /* Next link */

        // Compute next step id index
        var next_index = i+1;
        var prev_index = i;
        var next_step_id = this.step_ids[next_index];
        var prev_step_id = this.step_ids[prev_index];

        // Append next link after page data
        if ( next_index < this.step_ids.length ) {
            var next = A({
                'id':'cb_nextlink_'+this.steps['id'],
                'class':'cb_nextlink'
            },IMG({
                src:'resources/images/videre.gif'
            }));
            connect(next, "onclick", bind(function(id_next,id_prev){
                this.expandColorbox(id_next);
                this.collapseColorbox(id_prev);
            }, this, this.step_ids[next_index],this.step_ids[prev_index]));

            // Add step to content element
            replaceChildNodes("cb_content_next_"+this.step_ids[i],
                next
                );
        }
    }
};


NewCustomerInfoCampaignPage.prototype.createColorbox = function(id, color, title) {
    // Store id for sort order
    this.step_ids.push(id);

    // Store index for step object
    this.steps_reverseindex[id] = this.step_ids.length;

    // Create link and connect it to the expand method
    var link =
    A( {
        'id':"cb_headerlink_"+id,
        'href' : "#",
        'style':"color:white"
    },
    IMG({
        'src':"resources/images/arrow_down_white_icon.gif",
        'id':"cb_img_"+id
        }),
    SPAN({},title)
        );
    connect(link, "onclick", bind(this.expandColorbox, this, id));

    // Create the actual content
    var content =
    DIV({
        'id':"cb_"+id,
        'class':"step",
        'style':"border-color: "+color
        },
    H2({
        'id':"cb_h2_"+id,
        'style':"background-color: "+color
        },
    link
    ),
    // This is the div that will hold the user defined content
    DIV({
        'id':'cb_collapsible_'+id,
        'class':"block_hidden",
        'style':'padding-bottom: 6px;'
    },
    DIV({
        'id':'cb_content_'+id,
        'class':"cb_content"
    },""),
    DIV({
        'id':'cb_content_next_'+id
        },"")
    )
    );

    // Store the content for easy access
    this.steps[id] = content;

    return content;
};

NewCustomerInfoCampaignPage.prototype.createColorboxWithPage = function(id, color, title, page_id) {
    var content = this.createColorbox(id, color, title);

    var data_element  = findChildElements(content, ["#cb_content_"+id]);
    json("page", {
        'pageId':page_id
    },
    bind(
        function(result){
            // Add page data
            data_element[0].innerHTML  = result.contents;
        }
        , this)
    );

    return content;
};

NewCustomerInfoCampaignPage.prototype.createColorboxWithSidebarAndPage = function(id, color, title, page_id, sidebar) {
    var content = this.createColorbox(id, color, title);

    var data_element = findChildElements(content, ["#cb_content_"+id]);
    json("page", {
        'pageId':page_id
    },
    bind(
        function(result){
            // Add page data and sidebar to content div
            var span = SPAN({},"");
            span.innerHTML = result.contents;
            data_element[0].appendChild(SPAN({},sidebar,span));
        }
        , this)
    );

    return content;
};

NewCustomerInfoCampaignPage.prototype.createColorboxWithPageAndSidebar = function(id, color, title, page_id, sidebar) {
    var content = this.createColorbox(id, color, title);

    var data_element = findChildElements(content, ["#cb_content_"+id]);
    json("page", {
        'pageId':page_id
    },
    bind(
        function(result){
            // Add page data and sidebar to content div
            data_element[0].innerHTML = result.contents;
            data_element[0].appendChild(sidebar);
        }
        , this)
    );

    return content;
};

NewCustomerInfoCampaignPage.prototype.createColorboxWithContent = function(id, color, title, content) {
    var color_box = this.createColorbox(id, color, title);

    var data_element = findChildElements(color_box, ["#cb_content_"+id]);
    data_element[0].innerHTML = "";
    data_element[0].appendChild(content);

    return color_box;
};

NewCustomerInfoCampaignPage.prototype.collapseColorbox = function(id) {
    var collapsible_id = "cb_collapsible_" +id;
    if (!$(collapsible_id)) return false;

    removeElementClass(collapsible_id, "block_visible");
    addElementClass(collapsible_id, "block_hidden");

    $("cb_img_"+id).src = "resources/images/arrow_down_white_icon.gif";
    var link = $("cb_headerlink_"+id);
    disconnectAll(link);
    connect(link, "onclick", bind(this.expandColorbox, this, id));
    return false;
};

NewCustomerInfoCampaignPage.prototype.expandColorbox = function(id) {
    var collapsible_id = "cb_collapsible_" +id;
    if (!$(collapsible_id)) return false;

    removeElementClass(collapsible_id, "block_hidden");
    addElementClass(collapsible_id, "block_visible");

    $("cb_img_"+id).src = "resources/images/arrow_up_white_icon.gif";
    var link = $("cb_headerlink_"+id);
    disconnectAll(link);
    connect(link, "onclick", bind(this.collapseColorbox, this, id));

    signal("mainwrapper",'colorBoxExpanded', id);
		
		if(id == "step1"){
			roiFKChangBank();
		}else if(id == "step2"){
			roiFKCallMe();
		}else if(id == "step3"){
			roiFKFindAdvisor();
		}else if(id == "step5"){
			roiFKFAQ();
		}else if(id == "step6"){
			roiFKContact();
		}
		
    return false;
};

NewCustomerInfoCampaignPage.prototype.collapseQuestion = function(id,evt) {
    var collapsible_id = "qa_collapsible_" +id;
    evt.stop();
    //log("collapsing: "+collapsible_id);
    if (!$(collapsible_id)) return false;
    removeElementClass(collapsible_id, "block_visible");
    addElementClass(collapsible_id, "block_hidden");

    var link = $("qa_question_"+id);
    disconnectAll(link);
    connect(link, "onclick", bind(this.expandQuestion, this, id));

    var arrow_link = $("qa_question_arrowlink"+id);
    disconnectAll(arrow_link);
    connect(arrow_link, "onclick", bind(this.expandQuestion, this, id));

    return false;
};

NewCustomerInfoCampaignPage.prototype.expandQuestion = function(id) {
    var collapsible_id = "qa_collapsible_" +id;
    //log("expanding: "+collapsible_id);
    if (!$(collapsible_id)) return false;

    removeElementClass(collapsible_id, "block_hidden");
    addElementClass(collapsible_id, "block_visible");

    var link = $("qa_question_"+id);
    disconnectAll(link);
    connect(link, "onclick", bind(this.collapseQuestion, this, id));

    var arrow_link = $("qa_question_arrowlink"+id);
    disconnectAll(arrow_link);
    connect(arrow_link, "onclick", bind(this.collapseQuestion, this, id));

    return false;
};

NewCustomerInfoCampaignPage.prototype.closeSteps=function(){
    for ( var i = 0 ; i < this.step_ids.length ; i++ ) {
        this.collapseColorbox( this.step_ids[i]);
    }
};
NewCustomerInfoCampaignPage.prototype.openPledge=function(){
    //needed for deeplinks
    this.closeSteps();
    this.expandColorbox("step2");
};
NewCustomerInfoCampaignPage.prototype.openMap=function(){
    //needed for deeplinks
    this.closeSteps();
    this.expandColorbox("step3");
};

addLoadEvent(function () {
    new_customer_info_campaign = new NewCustomerInfoCampaignPage();
});