<div class="popup close">

<div class="left">



        <div class="sectionn1 follow"  id="box1">

        <div class="popup-heading">Follow the steps and start gossiping!</div>

        <div class="follow2">*Tip: you can do all three on the same Post! </div>

        <div class="type">


      </div>

        <div class="get">

        <button type="button" onClick="openpopup(2)">Get Started!</button>

        </div>

        <div class="popupclose">

            <a class="new_post_close" >

                <img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>

            </a>

        </div>

        </div>





        <div class="sectionn1" id="box2"  align="center">

            <div class="popup-heading">Step1: Type away!</div>



       <div class="user-post-main">

       <div class="add-pics">

        <div class="user-post"> <br clear="all" />



            <form id="post" id="form" name="form" action="" method="post">

            <div class="user-post-middle">

                <div class="post-area">

            <input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>

            <span class='status'></span>

            </div>



            <div class="post-area">

            <textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>

            <span class='status'></span>

            </div>

            <div class="post-area">

            <input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>

            <span class='status'></span>

            </div>

            <br clear="all" />



            </div>

            </form>



            <div class="red">

                            <div>

                            <div id="dropzone" class="drop">

                                <form action="upload/" class="dropzone" id="my-dropzone">
                                <input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
                                <input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">

                                </form>

                            </div>

                            <div id="dropzone1" class="dropzone zone">  </div>

                            </div><br clear="all" />



                            <!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->

                        </div>

                        </div>

            <div class="green">

                            <div>

                            <div id="dropzone" class="drop">

                                 <form action="upload/" class="dropzone" id="my-dropzone2">

                                 </form>

                            </div>

                            <div id="dropzone2" class="dropzone zone"></div>

                            </div><br clear="all" />

                             <div class="some">

                                <div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>

                            </div>



                        </div>

                        </div>







         </div>

         <div class="popupclose">

            <a class="new_post_close" >

                <img src="images/into-logo.png" />  <div class="close-c">Cancel</div>

            </a>

        </div>

 </div>



         </div>



        </div>



        <!----------------------popup3---------------------------->

        <div class="sectionn1" id="box3" align="center">



           <div class="popup-heading"> Step2: Let's Add Some Pics!</div>

           <span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />

           <div class="user-post-main">

                <div class="user-post1">

                    <div class="user-post">


                        <div class="popupclose">

            <a class="new_post_close" >

                <img src="images/into-logo.png" />  <div class="close-c">Cancel</div>

            </a>

        </div>

                    </div>

                      <div class="right-icn">

                         <div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>

                         <div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>

                         <div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>

                      </div>

        </div>



        </div>

        <!-------------------------------popup-4--------------------->

      <style>
        .dz-default.dz-message {
            background-size:100px !important;
        }
      </style>

        <div class="sectionn1" id="box4" align="center">



           <div class="popup-heading">Step3: Let's Add Some Videos!</div>

           No Videos? No Problem Simply click on POST!<br clear="all" /><br />

           <div class="user-post-main">

                <div class="user-post1">

                    <div class="user-post">


                        <div class="popupclose">

            <a class="new_post_close" >

                        <img src="images/into-logo.png" />  <div class="close-c">Cancel</div>

            </a>

        </div>

                    </div>

                      <div class="right-icn">

                         <div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>

                         <div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>

                         <div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>

                      </div>

        </div>



        </div>



  </div>

  <!--------------------------popup-->

<div class="popup close">
    <div class="sectionn1 follow" id="box1">
        <div class="user-post">
            <!-- UPLOAD PICS -->


            <div class="popupclose">
                <a class="new_post_close">
                <div class="close-c">
                </div></a>
            </div>


            <div class="drop" id="dropzone">
                <form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
                    <input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
                </form>


                <p>Add Photo(s)</p>
            </div>


            <div class="dropzone zone" id="dropzone1">
            </div>
            <!-- UPLOAD VIDEOs -->


            <div class="drop" id="dropzone">
                <form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
                </form>


                <p>Add Video</p>
            </div>


            <div class="dropzone zone" id="dropzone2">
            </div>
        </div>
        <!-- POST AREA -->


        <form action="" id="post" method="post" name="form">
            <textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
        </form>


        <div class="bottom-buttons">
            <div class="button">
                <button id="create_new_post" name="create_new_post" type="button">
                <p>Post</p></button>
            </div>
        </div>
    </div>
</div>

$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
    postpopup(0);
    openpopup(1);
    }
});

$(document).on('click','.openpostpopup',function(data){
 postpopup(5,this);
});


function openpopup(p){

if(p){

    $('.glass, .popupglass').fadeIn();
    $('.popup').removeClass('close');
    $('.sectionn1').removeClass('active');
    $('#box'+p).addClass('active');
    $('body').addClass('short_page');

    if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
    if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}

else {

    $('.glass , .popupglass').fadeOut();
    $('.popup').addClass('close');
    $('body').removeClass('short_page');
    $('.sectionn1').removeClass('active');
    $('#post .post-area .input,#post .post-area .textarea').each(function(){  $(this).val('');  });
    $('span.status').removeClass('success').removeClass('error');
    $('.dz-preview').remove();
    $('[name=post_id]').remove();

}
}
function createPostId(popup){

    id   = $('input[name=post_id]').val();
    if(typeof cnprpost == 'undefined' && !id){
        cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
                        $('#my-dropzone,  #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
                        openpopup(popup);
                        delete cnprpost;
                   });
    }else openpopup(popup);
}

$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
        var conf=confirm("Your Post is Not PublishednClick Cancel to Continue ornClick OK to CancelnYour Uploads will remove if you Click Ok");
        if(conf){
            openpopup(0);
            $.post("ajax.php",{action:"deletepost",post_id:id},function(data){
            });
        }
}else openpopup(0);
});



$('#create_new_post').on('click',function(){
    post_id=$('[name=post_id]').val();
    postTitle   = $('#post input[name=postname]').val();
    postContent = $('#post textarea[name=posttext]').val();
    postUrl     = $('#post input[name=posturl]').val();
    dis=this;
    $(dis).html('Posting...');
    if(typeof pprpost == 'undefined' && post_id )
        pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
                    if(data==1) { openpopup(0); }
                    else        { $(dis).html('Try Again...');  }
                    delete pprpost
                });
});


window.onbeforeunload = function() {
    id=$('[name=post_id]').val();
    if(!$('.popup').hasClass('close') && id){
        return "Your Post is Not PublishednClick Cancel to Continue ornClick OK to CancelnYour Uploads will remove if you Click Ok";
        $.post("ajax.php",{action:"deletepost",post_id:id},function(data){  });
    }
}