$(document).ready(function() {

    // Here we will write a function when link click under class popup
    $('a.demo-button.popup, a.popup').click(function() {


        // Here we will describe a variable popupid which gets the
        // rel attribute from the clicked link							
        var popupid = $(this).attr('rel');


        // Now we need to popup the marked which belongs to the rel attribute
        // Suppose the rel attribute of click link is popuprel then here in below code
        // #popuprel will fadein
        $('#' + popupid).fadeIn();


        // append div with id fade into the bottom of body tag
        // and we allready styled it in our step 2 : CSS
        $('body').append('<div id="fade"></div>');
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();


        // Now here we need to have our popup box in center of 
        // webpage when its fadein. so we add 10px to height and width 
        var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
        var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


        // Then using .css function style our popup box for center allignment
        $('#' + popupid).css({
            'margin-top': -popuptopmargin,
            'margin-left': -popupleftmargin
        });
    });


    // Now define one more function which is used to fadeout the 
    // fade layer and popup window as soon as we click on fade layer
    $('#fade,a.close.subtext,a.button.cancel').click(function() {
        $('#signup').find("input").each(function() {
            this.value = '';
        });
        // Add markup ids of all custom popup box here
        $('#fade , #questions , #signup, #howitworks, #termsconditions').fadeOut()
        return false;
    });

});


function OpenTransactionPopUp(obj,URL) {
    var popupid = $(obj).attr('rel');

    // Now we need to popup the marked which belongs to the rel attribute
    // Suppose the rel attribute of click link is popuprel then here in below code
    // #popuprel will fadein
    $('#' + popupid).fadeIn();
    $('#' + popupid).find("iframe").attr('src', URL);
    $("iframe").height($('.popupbox').height());


    // append div with id fade into the bottom of body tag
    // and we allready styled it in our step 2 : CSS
    $('body').append('<div id="fade"></div>');
    $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();


    // Now here we need to have our popup box in center of 
    // webpage when its fadein. so we add 10px to height and width 
    var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
    var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


    // Then using .css function style our popup box for center allignment
    $('#' + popupid).css({
        'margin-top': -popuptopmargin,
        'margin-left': -popupleftmargin
    });


    // Now define one more function which is used to fadeout the 
    // fade layer and popup window as soon as we click on fade layer
    $('#fade,a.close.subtext').click(function() {        
        // Add markup ids of all custom popup box here
        $('#transaction').fadeOut()
        return false;
    });
}

function OpenTrackEscrow(obj) {
    var popupid = $(obj).attr('rel');

    // Now we need to popup the marked which belongs to the rel attribute
    // Suppose the rel attribute of click link is popuprel then here in below code
    // #popuprel will fadein
    $('#' + popupid).fadeIn();
    $('#' + popupid).find("iframe").attr('src', 'TrackEscrow.aspx');   
    $("iframe").height($('.popupbox').height());    

    // append div with id fade into the bottom of body tag
    // and we allready styled it in our step 2 : CSS
    $('body').append('<div id="fade"></div>');
    $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();


    // Now here we need to have our popup box in center of 
    // webpage when its fadein. so we add 10px to height and width 
    var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
    var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


    // Then using .css function style our popup box for center allignment
    $('#' + popupid).css({
        'margin-top': -popuptopmargin,
        'margin-left': -popupleftmargin
    });


    // Now define one more function which is used to fadeout the 
    // fade layer and popup window as soon as we click on fade layer
    $('#fade,a.close.subtext').click(function() {
        // Add markup ids of all custom popup box here        
        $('#trackescrow').fadeOut()
        return false;
    });
}

function OpenForgotPassword(obj) {
    var popupid = $(obj).attr('rel');

    // Now we need to popup the marked which belongs to the rel attribute
    // Suppose the rel attribute of click link is popuprel then here in below code
    // #popuprel will fadein
    $('#' + popupid).fadeIn();
    $('#' + popupid).find("iframe").attr('src', 'ForgotPassword.aspx');
    $("iframe").height($('.popupbox').height());

    // append div with id fade into the bottom of body tag
    // and we allready styled it in our step 2 : CSS
    $('body').append('<div id="fade"></div>');
    $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();


    // Now here we need to have our popup box in center of 
    // webpage when its fadein. so we add 10px to height and width 
    var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
    var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


    // Then using .css function style our popup box for center allignment
    $('#' + popupid).css({
        'margin-top': -popuptopmargin,
        'margin-left': -popupleftmargin
    });


    // Now define one more function which is used to fadeout the 
    // fade layer and popup window as soon as we click on fade layer
    $('#fade,a.close.subtext').click(function() {
        // Add markup ids of all custom popup box here        
        $('#forgotpassword').fadeOut()
        return false;
    });
}