<div class="col-sm-12 gray">
    <div class="col-sm-12 white" style="margin-left: 5px">
        <div class="col-sm-8 col-sm-offset-2 ">
            <img class="img-responsive" src="<?php echo base_url() ?>image/demo/demoImage.PNG">
        </div>
    </div>

    <div class="col-sm-12 form-group"></div>
<!--update log Area start-->
    <footer class="navbar-fixed-bottom" style="width: 100%;background: none;display: block" id="UpdateLogPanelArea">

        <div id="Update_log" class="col-sm-3 white" 
             style="position: absolute;z-index: 99999;top: -650px;right: -10px;border-radius: 10px 0 0 10px;line-height: 25px;">

            <div class=" btn-success col-sm-12" style="margin-top: -10px;text-align: left;border-radius: 10px 0 0 0">
                <label class="text-left col-sm-12"> Update Log</label>
                <!--<i id="Close_Update_log" class="fa fa-angle-right col-sm-4 text-right" style="cursor: pointer;font-size: 32px;display: none;color: #fff;"></i>-->
                <!--<i id="POpen_Update_log" class="btn btn-danger  fa fa-angle-left " style="font-size: 31px;margin-left:-36px;margin-top: -1px;border-radius: 10px 0 0 10px"></i>-->
                
            </div>
            <div class="col-sm-12 padding-zero" style="height: 500px;overflow-y: scroll;">  
                <div class="col-sm-12 form-group text-left gray_ttc " style="margin-bottom: 2px">
                    <p>Uploaded Date : 16-04-2016</p>
                    <p>Uploaded By : Suddam Hossain Rana</p>
                    <p>Modified Date :  16-04-2016</p>
                    <p>Modified By : Suddam Hossain Rana</p>
                    <p>History : <a href="<?php echo base_url() ?>publication-view-details">View History</a></p>
                </div>


                <div class="col-sm-12 form-group text-left gray_ttc" style="margin-bottom: 2px">
                    <p>Uploaded Date : 16-04-2016</p>
                    <p>Uploaded By : Suddam Hossain Rana</p>
                    <p>Modified Date :  16-04-2016</p>
                    <p>Modified By : Suddam Hossain Rana</p>
                    <p>History : <a href="<?php echo base_url() ?>publication-view-details">View History</a></p>
                </div>


                <div class="col-sm-12 form-group text-left gray_ttc" style="margin-bottom: 2px">
                    <p>Uploaded Date : 16-04-2016</p>
                    <p>Uploaded By : Suddam Hossain Rana</p>
                    <p>Modified Date :  16-04-2016</p>
                    <p>Modified By : Suddam Hossain Rana</p>
                    <p>History : <a href="<?php echo base_url() ?>publication-view-details">View History</a></p>
                </div>


                <div class="col-sm-12 form-group text-left gray_ttc" style="margin-bottom: 2px">
                    <p>Uploaded Date : 16-04-2016</p>
                    <p>Uploaded By : Suddam Hossain Rana</p>
                    <p>Modified Date :  16-04-2016</p>
                    <p>Modified By : Suddam Hossain Rana</p>
                    <p>History : <a href="<?php echo base_url() ?>publication-view-details">View History</a></p>
                </div>

            </div>
        </div>
    </footer>




    <!--message Area Start-->


    <footer class="navbar-fixed-bottom" style="width: 100%;background: none">
        <div id="message_panel" class="btn btn-danger "style="position: absolute;z-index: 9999;bottom: 0;right: 0;border-radius: 10px 10px 0 0;padding-left: 50px;padding-right: 50px"> Message Panel</div>
    </footer>
    
    <footer class="navbar-fixed-bottom" style="width: 100%;background: none">
        <div id="Open_Update_log" class="btn btn-danger "style="position: absolute;z-index: 9999;bottom: 100px;right: 0;border-radius: 10px 0 0 10px;"> 
            <i  class="fa fa-2x fa-angle-left " style=""></i>
        </div>
        
        <div id="Close_Update_log" class="btn btn-success "style="display: none;position: absolute;z-index: 9999;bottom: 100px;right: 0;border-radius: 10px 0 0 10px;"> 
            <i  class="fa fa-2x fa-angle-right " style=""></i>
        </div>
    </footer>


    <footer class="navbar-fixed-bottom" style="width: 100%;background: none;display: none" id="messagePanelArea">

        <div class="col-sm-12" style="margin-left: 4px;background-color: #FCFCFC" id="PulicationMsgArea">
            <div class="col-sm-12 btn btn-success " style="border-radius: 10px 10px 0 0;" id="MessageTopPanel">
                <span class="text-left col-sm-6" id="MessagePanelTopLeft">Message Panel</span>
                <span class=" col-sm-6 text-right" id="MessagePanelTopRight">
                    <button id="ContactBtn" style="float: none;padding: 0;margin-top: 0;margin-right: 0" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#liveMessageLeftSide">
                            <span class="sr-only">Toggle navigation</span>
                            <span style="background-color: #fff" class="icon-bar"></span>
                            <span style="background-color: #fff" class="icon-bar"></span>
                            <span style="background-color: #fff" class="icon-bar"></span>
                    </button>
                
                    <!--<i class=" fa fa-angle-down fa-2x" id="HideMessageArea"></i>-->
                </span>
            </div>
            <div class="form-group col-sm-4 padding-zero" id="liveMessageLeftSide">

                <div class="form-group col-sm-12 padding-zero" style="height: 50px;border: 1px solid #80c12c;margin-bottom: 0px;border-right: 0px;">

                    <span class="pull-Left" style="padding-left: 10px">
                        <a href="#">   <h3 style="margin-top: 12px;">RECENT <i class="fa fa-angle-down" style="font-size: 20px;"> </i></h3></a>
                    </span>

                    <span class="pull-right" style="padding-right: 20px">
                        <a href="#">   <h3 style="margin-top: 12px;">ALL</h3></a>
                    </span>

                </div>

                <div class="form-group col-sm-12 padding-zero" style="overflow-y: scroll;height: 400px;border: 1px solid #80c12c;border-top: 0px;">

                    
                    <div class="media msgContact" style="padding: 10px 5px 5px 5px">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-circle" src="<?php echo base_url()?>image/logo.png" alt="logo"  style="width: 50px">
                            </a>
                        </div>
                        <div class="media-body text-justify hide-mobile">
                            <h4 class="media-heading">
                                <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                            <p>
                                TalhaTraining is Bangladesh's leading IT trainin
                            </p>

                        </div>
                    </div>
                    <hr>
                    <div class="media msgContact"  style="padding:  10px 5px 5px 5px">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo" style="width: 50px">
                            </a>
                        </div>
                        <div class="media-body text-justify hide-mobile" >
                            <h4 class="media-heading" >
                                <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                            <p>
                                TalhaTraining is Bangladesh's leading IT training provider 
                            </p>

                        </div>
                    </div>
                    <hr>
                </div>

            </div>
            <div class="form-group col-sm-8 padding-zero" style="margin-bottom: 0" id="liveMessageRightSide">

                <div id="chatTopHeader" class="form-group col-sm-12 padding-zero"  style="height: 50px;border: 1px solid #80c12c;margin-bottom: 0px;">

                    <span class="col-sm-12" style="padding-left: 15px">
                        <a href="#">   <h3 style="margin-top: 7px;" id="convicationName">Suddam Hossain Rana <i class="fa fa-star" style="font-size: 16px;"> </i></h3></a>
                    </span>

                    <span class="col-sm-12 text-left" style="margin-top: -5px">
                        <p class="text-justify" style="margin-bottom: 0">TalhaTraining is Bangladesh's leading</p>
                    </span>

                </div>

                <div id="PublicationChatArea" class="form-group col-sm-12 padding-zero" style="overflow-y: scroll;height: 324px;border-bottom: 1px solid #80c12c;border-right: 1px solid #80c12c;margin-bottom: 0px;">
                    <div class="col-sm-12 padding-zero">
                        <div class="col-sm-12 text-left" style="padding: 10px">
                            <label>Thursday, April 28, 2016</label>
                        </div>

                        <div class="col-sm-12 text-left" style="border-top: 1px solid #ededed;padding: 10px">

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-sm-12 padding-zero">
                        <div class="col-sm-12 text-left" style="padding: 10px">
                            <label>Thursday, April 28, 2016</label>
                        </div>

                        <div class="col-sm-12 text-left" style="border-top: 1px solid #ededed;padding: 10px">

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-sm-12 padding-zero">
                        <div class="col-sm-12 text-left" style="padding: 10px">
                            <label>Thursday, April 28, 2016</label>
                        </div>

                        <div class="col-sm-12 text-left" style="border-top: 1px solid #ededed;padding: 10px">

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/no_profile_picture.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                            <div class="media"  style="padding:  10px 5px 5px 5px">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" src="<?php echo base_url() ?>image/logo.png" alt="logo"  style="width: 50px">
                                    </a>
                                </div>
                                <div class="media-body text-justify">
                                    <h4 class="media-heading" >
                                        <a href="#">TalhaTraining </a> <label class="pull-right">14-04-2016</label></h4>

                                    <p>
                                        TalhaTraining is Bangladesh's leading IT training provider 
                                    </p>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div id="publicationChatForm" class="form-group col-sm-12 " style="border-bottom: 1px solid #80c12c;border-right: 1px solid #80c12c;padding-top: 20px;padding-bottom: 21px;">

                    <input type="text" class="form-control">

                </div>
            </div>
            <span><i style="cursor: pointer;border-radius: 10px 10px 0 0;font-size: 30px;padding: 0px;" class=" btn btn-success col-sm-1 pull-right fa fa-angle-down" id="HideMessageArea"></i></span>
        </div>
       
    </footer>
</div>


<script>

    $(document).ready(function ()
    {
        $("#message_panel").click(function ()
        {

            $("#messagePanelArea").slideDown('slow'); //slideUp() method slides-down the selected elements.
//            $("#message_panel").hide(); //hide the selected elements.
            return false;
        });
    });

    $(document).ready(function ()
    {
        $("#HideMessageArea").click(function ()
        {
            $("#messagePanelArea").slideUp('slow'); //slideUp() method slides-up (hides) the selected elements.
            $("#message_panel").show(); //show the selected elements.
            return false;
        });
    });

    $(document).ready(function ()
    {
        $("#ContactBtn").click(function ()
        {              
            $("#liveMessageLeftSide").slideDown('slow'); //slideUp() method slides-up (hides) the selected elements.
            return false;
        });
        
        var Swidth = $(window).width();
//        alert(Swidth);
        if(Swidth <= 767 ){
//        alert(Swidth);
        $(".msgContact").click(function ()
        { 
            $("#liveMessageLeftSide").slideUp('slow'); //slideUp() method slides-up (hides) the selected elements.
            return false;
        });
    }
    });

    $(document).ready(function ()
    {
        $("#Close_Update_log").click(function ()
        {

            $("#UpdateLogPanelArea").animate({"margin-left": '+=370'});
            $("#Close_Update_log").hide(); //hide the selected elements.
            $("#Open_Update_log").show(); //hide the selected elements.
            return false;
        });
    });

    $(document).ready(function ()
    {
        $("#Open_Update_log").click(function ()
        {

            $("#UpdateLogPanelArea").animate({"margin-left": '-=370'});
            $("#Close_Update_log").show(); //hide the selected elements.
            $("#Open_Update_log").hide(); //hide the selected elements.
            return false;
        });
    });

</script>
<style>
    #UpdateLogPanelArea{
        margin-left:370px;
        
    }
</style>


