<aside class="right-side">
    <!-- Main content -->
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color">Dashboard</h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div id="plot">
                    
                </div>
            </div>
        </div>
    </section>
</aside><!-- /.right-side -->
<script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/chart/d3.min.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/chart/Donut3D.js"></script>
<style type="text/css">
    path.slice{
	stroke-width:2px;
    }
    polyline{
            opacity: .3;
            stroke: black;
            stroke-width: 2px;
            fill: none;
    } 
    svg text.percent{
            fill:white;
            text-anchor:middle;
            font-size:12px;
    }
    
    #plot {
        background: #fff;
        border-top: 5px solid #f33;
    }
    
    #plot svg {
        width: 100%;
        height: 450px;
        padding: 50px 35%;
        box-shadow: 3px 3px 3px #eee, -3px -3px 3px #eee;
    }

    .plot-details {
        position: absolute;
        min-height: 100px;
        
        right: 30px;
        padding: 10px;
        box-shadow: 1px 1px 3px #ccc;
        background: #fff;
        width: 270px;
        margin-top: 20px;
        z-index: 99;
    }
    
    .plot-details .cell{
        margin: 5px;
        
    }
    
    .plot-details .preview-box {
        width: 35px;
        height: 35px;
        border-radius: 35px;
        line-height: 45px;
    }
    
    .plot-details .preview-text {
        padding: 5px;
        color: #999;
        width: 85%;
    }
    
    .plot-details .cell > div {
        display: inline-block;
    }
    
    .plot-details .cell-title {
        text-align: center;
        font-weight: bold;
        color: #fff;
        background: #f33;
        line-height: 35px;
        width: 109%;
        box-shadow: 1px 1px 3px #666;
        letter-spacing: 2px;
        margin: -10px -10px 10px -11px;
    }
</style>

<script type="text/javascript">
    var data    = [
        {label:"", value: 10, color:"#ccc"},
       
    ];
    
    function plot(isItm){
        var id      = isItm ? 'plot-itm' : 'plot-cat'
        
        if( typeof isItm == 'undefined' ) {
            graph(id);
            setTimeout(function(){
                plot(false);
            }, 1000);
            
        }else {
            // Get Records
            //$('#'+id).html('Loading ...');
            var args = {
                
            }
            $.post( baseURL + controller + '/ajax/', args, function( results ){
                results = JSON.parse( results ) || "";
                
                var html = '<div class="cell-title">'+ ( isItm ? 'Items' : 'Archanai' ) +'</div>';
                data = [];
                
                if( results != '' ) {
                    
                    Object.keys(results).map(function(k, v){
                        var rw = results[k]
                        ,   clr = 'rgb('+ rand(255) +',' + rand(255) +',' + rand(255) +')';
                        
                        data.push({id: rw['id'], label: rw['name'], value: rw['total_qty'], color: clr}); 
                        
                        html += '<div class="cell" ><div class="preview-box" style="background: '+ clr +';">&nbsp;</div><div class="preview-text" style="border-bottom: 1px dotted '+ clr +';"><div style="display: block; ">'+ rw['name'] +'</div><div style="display: block; color: #999; font-size: 10px;">Qty: '+ rw['total_qty'] +' &nbsp; <span style="float: right; font-size: 10px;">S$: '+ rw['total_amt'] +'</span></div></div></div>';
                    });
                    
                    graph(id);
                }else {
                    // No Data
                    html += '<div class="cell">Sorry, No result found!</div>';
                }
                
                if( $('#details-'+id).length == 0 ) {
                    $('#'+id).before('<div class="plot-details" id="details-'+id+'"></div>');
                }
                
                 $('#details-'+id).html(html);
                
                
            });
            
            
            
        }    
        
    }
    
    function rand(end, start) {
        start = typeof start == 'undefined' ? 0 : start;
        return Math.floor((Math.random()*end)+start);
    }
    
    function graph(id){
        
        if( $('#'+id).length == 0 ) {
           $('#plot').append('<div id="'+ id+'"></div>');
        }
        
        $('#'+id).fadeOut('slow', function(){
            $(this).remove();

            var svg = d3.select('#plot').append('svg');
            svg.attr('id', id).attr('style', 'display: none;').append('g');
            //Donut3D.draw(id, setData(), 150, 150, 130, 100, 30, 0.4);
            Donut3D.draw(id, setData(), 150, 150, 200, 170, 40, 0.4);
            
        

            $('#'+id).fadeIn('slow', function(){
                //Donut3D.transition(id, setData(), 130, 100, 30, 0.4);
                Donut3D.transition(id, setData(), 200, 170, 40, 0.4);
                    
            })

        })
            
         
    }
    
    function setData(){
             console.log(data);
        return data.map(function(d){ 
            //return {label:d.label, value:1000*Math.random(), color:d.color};
            return {id: d.id, label:d.label, value:d.value, color:d.color};
        });
    }
    
    function setPos($this, isLeave){
        var $parent = $this.parent().closest('svg')
        ,   svgId   = $parent.attr('id')
        ,   $detail = $('#details-'+svgId);
        
        if( isLeave ) {
            var offset = $parent.offset()
            ,   top    =  20 //offset.top
            ,   left    =  offset.left+(2*$parent.width());//-$detail.width();
            
            $detail.stop().animate({'left': left+"px", 'top': top+"px", 'right': "30px"}, 'swing');
        }else {
            var offset = $this.offset()
            ,   top    =  offset.top-($detail.height()/4)
            ,   left    =  offset.left-($detail.width()/4);
            
            $detail.stop().animate({'left': left+"px", 'top': top+"px"}, 300);
        }
    }
    
    
    $(document).on('ready', function(){
        
        $(document).on('click', '.innerSlice', function(){
            alert('Ok');
        })
        
        $(document).on('click', '.topSlice', function(){
            //alert('Dowble Ok');
            console.log(this);
            var $this   = $(this)
            ,   clss   = $this.attr('class')
            ,   $parent = $this.parent().closest('g');
            
            //alert($parent.find('.'+clss).length);
        })
        
        $(document).on('mouseenter','.topSlice', function(){
            setPos($(this));
        });
        
        $(document).on('mouseleave','svg g', function(){
            setPos($(this), true);
        });
        
        /*d3.select('svg').on('mouseover', function(d){
            console.log(this);
        
        })*/
        
         plot();
    })
    
    

</script>