<?php echo $javascript->link('jquery.js');?>
<?php echo $javascript->link('jquery.ui.core.js'); ?>
<?php echo $javascript->link('jquery.ui.widget.js'); ?>
<?php echo $javascript->link('jquery.ui.mouse.js'); ?>
<?php echo $javascript->link('jquery-ui-sortable.js'); ?>
<?php //echo $javascript->link('jquery.ui.sortable.js'); ?>

<script type="text/javascript">
    var count = 0;
    var timer;

    $(function() {
        var baseFolder = '<?php echo $cnfg["sitebasefolder"];?>';

        $([baseFolder+'/img/featured.jpg', baseFolder+'/img/featured_w.jpg',baseFolder+'/img/latest.jpg',baseFolder+'/img/latest_w.jpg',
            baseFolder+'/img/toprated.jpg',baseFolder+'/img/toprated_w.jpg',baseFolder+'/img/onsale.jpg',baseFolder+'/img/onsale_w.jpg']).preload();

        $( "#sortable1, #sortable2, #sortable4" ).sortable({
            connectWith: ".connectedSortable",
            stop: function(event, ui) { resetModules(); },
            cancel: ".placeholder_li"
        });
    });

    function resetModules()
    {
        var baseFolder = '<?php echo $cnfg["sitebasefolder"];?>';
        var panels = new Array('left', 'center', 'unlisted');
        for(var k = 0; k < panels.length; k++){
            var elem_count = $('.'+panels[k]).children('li').length;
            var elem_id = $('.'+panels[k]).attr('id');

            if(elem_count != 0){
                $('.'+panels[k]).children('li').each(function(i, j){
                    //remove the dummy li tag
                    if($(j).attr('id') == 'dummy_'+elem_id){
                        //remove only if another li element is present
                        if(elem_count > 1) $(j).remove();
                    }

                    var module_name = $(j).children('a').attr('rel');

                    if(panels[k] == 'left'){                       
                        if($(j).attr('id') != 'dummy_'+elem_id){
                            $(j).children('a').html('');
                            $(j).children('a').html('<img src="'+baseFolder+'/img/'+module_name+'.jpg'+'" border="0"/>');
                            if($(j).children('label').length == 0){
                                $(j).children('a').before('<label class="cls_btn" onclick="removeModule(this)">X</label>');
                            }
                        }
                    }
                    else if(panels[k] == 'center'){
                        if($(j).attr('id') != 'dummy_'+elem_id){
                            $(j).children('a').html('');
                            $(j).children('a').html('<img src="'+baseFolder+'/img/'+module_name+'_w.jpg'+'" border="0"/>');
                            if($(j).children('label').length == 0){
                                $(j).children('a').before('<label class="cls_btn" onclick="removeModule(this)">X</label>');
                            }
                        }
                    }
                    else if(panels[k] == 'unlisted'){
                        var disp_name = module_name.replace('_', ' ');
                        $(j).children('label').remove();
                        $(j).children('a').html('');
                        $(j).children('a').html(disp_name);
                    }
                });
            }
            else{
                //add a dummy li tag
                if(panels[k] == 'left' || panels[k] == 'center'){
                    $('.'+panels[k]).append('<li id="dummy_'+elem_id+'" class="placeholder_li"><a>Place Your Widgets Here</a></li>');
                }
            }
        }
    }

    $.fn.preload = function(){
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }

    function removeModule(elem)
    {
        var module_name = $(elem).next('a').attr('rel');
        var disp_name = module_name.replace('_', ' ');

        var li_count = $(elem).parent('li').parent('ul').children('li').length;
        var parent_ul = $(elem).parent('li').parent('ul');

        $("#sortable4").append('<li><a href="javascript:void(0)" rel="'+module_name+'">'+disp_name+'</a></li>');
        $(elem).parent('li').remove();

        if(li_count == 1){
            $(parent_ul).append('<li id="dummy_'+$(parent_ul).attr('id')+'" class="placeholder_li"><a>Place Your Widgets Here</a></li>');
        }
    }

    function saveModules()
    {
        
        var panelsL = new Array('left');
        var panelsC = new Array('center');
        var panelsU = new Array('unlisted');
        var return_txt = '';
        var l;
        var c=1;
        // Left pane
        for(var k = 0; k < panelsL.length; k++){
            $('.'+panelsL[k]).children('li').each(function(i, j){
                l = 'L';
                return_txt += l+'#'+$(j).children('a').attr('rel')+'#'+c+'||';
                c++;
            });          
        }

        // Center panel
        c=1;
        for(var k = 0; k < panelsC.length; k++){
            $('.'+panelsC[k]).children('li').each(function(i, j){
                l = 'C'
                return_txt += l+'#'+$(j).children('a').attr('rel')+'#'+c+'||';
                c++;
            });
            
        }

        // Unlisted pane
        c=1;
        for(var k = 0; k < panelsU.length; k++){
            $('.'+panelsU[k]).children('li').each(function(i, j){
                l = 'U';
                return_txt += l+'#'+$(j).children('a').attr('rel')+'#'+c+'||';
                c++;
            });            
        }

        //alert(return_txt);

        $('input[name=submit_btn]').attr('disabled', true);
        loader_text();
        $.ajax({
            type: "POST",
            url: "Homelayout/savepreferences/",
            data: ({layout_vals : return_txt}),
            success: function(response){
                //alert(response);
                $('input[name=submit_btn]').removeAttr('disabled');
                $('input[name=submit_btn]').val('Save');
                count = 0;
                clearTimeout(timer);
                $("#okbox").slideDown('slow', function(){ setTimeout('hideMsg()', 2000); });
            }
        });
    }

    function loader_text()
    {
        if(count == 5) count = 1;
        else count++;

        var text = 'Saving';
        for(var i = 0; i < count; i++){
            text += '.';
        }
        $('input[name=submit_btn]').val(text);
        timer = setTimeout('loader_text()', 250);
    }

    function hideMsg()
    {
        $("#okbox").slideUp('slow');
    }
</script>

<div align="center" class="subheading">
    <div align="left">HOME PAGE LAYOUT</div>
</div>


<div id="item_details_admin">
    <div class="admin_dragndrop_layout" >
    </br>
    <div id="okbox" style="display:none;"><font color="#446423">Your Preferences Have Been Saved</font></div>    
    <div>
        <input type="button" name="submit_btn" value="Save" class="buttn_admin" onclick="saveModules()" />
    </div>
    <!---------------------------------- top pannels---------------------------------------------->
    <div class="admin_dragndroptop_wrap">
        <div class="admin_dragndrop_leftcol">
            <ul id="sortable1" class="connectedSortable left">
                <?php
                if(isset($middle_sec) && count($middle_sec) <> 0) {
                    foreach($middle_sec as $item) {

                        $name = $item['ly']['prod_type'];
                        ?>
                <li>
                    <label class="cls_btn" onclick="removeModule(this)">X</label>
                    <a href="javascript:void(0)" rel="<?php echo $name; ?>">

                                <?php echo $html->image('/img/'.$name.'.jpg');?>
                    </a>
                </li>
                        <?php
                    }
                    ?>
                    <?php
                }
                else {
                    ?>
                <li id="dummy_sortable1" class="placeholder_li"><a>Place Your Widgets Here</a></li>
                    <?php
                }
                ?>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="admin_dragndrop_rightcol">
            <ul id="sortable2" class="connectedSortable center">
                <?php
                if(isset($right_sec) && count($right_sec) <> 0) {
                    foreach($right_sec as $item) {
                        $name = $item['ly']['prod_type'];
                        ?>
                <li>
                    <label class="cls_btn" onclick="removeModule(this)">X</label>
                    <a href="javascript:void(0)" rel="<?php echo $name; ?>">
                                <?php echo $html->image('/img/'.$name.'_w.jpg');?>
                    </a>
                </li>
                        <?php
                    }
                }
                else {
                    ?>
                <li id="dummy_sortable2" class="placeholder_li"><a>Place Your Widgets Here</a></li>
                    <?php
                }
                ?>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
    <!---------------------------------- top pannels---------------------------------------------->
    <!---------------------------------- bottom pannels---------------------------------------------->
    <div class="admin_dragndropbtm_wrap">
        <h3>Module Tray</h3>
        <ul id="sortable4" class="connectedSortable unlisted">
            <?php
            if(isset($unlisted_rec) && count($unlisted_rec) <> 0) {
                foreach($unlisted_rec as $item) {
                    $name = $item['ly']['prod_type'];
                    ?>
            <li>
                <a href="javascript:void(0)" rel="<?php echo $name; ?>">
                            <?php echo $name; ?>
                </a>
            </li>
                    <?php
                }
                ?>

                <?php
            }
            ?>
        </ul>
        <div class="clear"></div>
    </div>

    <!---------------------------------- bottom pannels---------------------------------------------->
    <div class="clear"></div>
</div>
</div>




<div align="left" >




    <div align="left" class="float_clear1"><?php echo $html->image('/img/clear.gif');?></div>