<style>
    .btn-group.open .btn.dropdown-toggle{
	width: 215px !important;
    }

    .btn-group .btn.dropdown-toggle{
	width: 215px !important;
    }

    #segment_td ul.dropdown-menu,#section_td ul.dropdown-menu {
	width: 215px !important;
    }

    #date_td .control-group {
	margin-bottom:  0px !important;
    }

    #date_td .control-group {
	margin-bottom:  0px !important;
    }

    #date_td .control-group #SummaryDashboardPerSegment_date{
	margin-bottom:  0px !important;
    }

    #content{
	padding-left: 0px !important;
	padding-right: 0px !important;
    }

    [class*="span"] {
	margin-left: 5px !important;
    }



</style>


<?php
/* @var $this UserController */
/* @var $model User */
Yii::app()->clientScript->registerScript('search', "
  $('#segment_td .btn-group ul li a input[value!=all]').on('change',function(e) {

	if(!$(this).attr('checked') || $(this).attr('checked') != 'checked'){	    
	    $('#segment_td .btn-group ul li a input[value=all]').parent().parent().parent().removeClass('active');
	    $('#segment_td .btn-group ul li a input[value=all]').attr('checked', false);
	    $('#segment_name > option[value=all]').attr('selected',false);
	}
  });

 $('#section_td .btn-group ul li a input[value!=All]').on('change',function(e) {

	if(!$(this).attr('checked') || $(this).attr('checked') != 'checked'){
	    $('#section_td .btn-group ul li a input[value=All]').parent().parent().parent().removeClass('active');
	    $('#section_td .btn-group ul li a input[value=All]').attr('checked', false);
	    $('#section_drop_down > option[value=All]').attr('selected',false);
	}
  });


  $('#segment_td .btn-group ul li a input[value=all]').on('change',function(e) {
	var type = this.type;
	var val = this.value;
	if (type == 'checkbox')
	    if($(this).attr('checked') || $(this).attr('checked') == 'checked'){
		$('#segment_td ul li input').each(function()
                {
                    $(this).attr('checked',true);
                });
                $('#segment_td ul li').each(function()
                {
                    $(this).addClass('active');
                });
                $('#segment_name > option').each(function()
                {
                    $(this).attr('selected',true);
                });
		$('#segment_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
	    }
	    else{
		$('#segment_td ul li input').each(function()
                {
                    $(this).attr('checked',false);
                });
                $('#segment_td ul li').each(function()
                {
                    $(this).removeClass('active');
                });
                $('#segment_name > option').each(function()
                {
                    $(this).attr('selected',false);
                });
		$('#segment_td .dropdown-toggle').html('None selected <b class=\'caret\'></b>');
	    }
     });


 $('#section_td .btn-group ul li a input[value=All]').on('change',function(e) {
	var type = this.type;
	var val = this.value;
	if (type == 'checkbox')
	   if($(this).attr('checked') || $(this).attr('checked') == 'checked'){
		$('#section_td ul li input').each(function()
                {
                    $(this).attr('checked',true);
                });
                $('#section_td ul li').each(function()
                {
                    $(this).addClass('active');
                });
                $('#section_drop_down > option').each(function()
                {
                    $(this).attr('selected',true);
                });
		$('#section_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
	    }
	    else{
		$('#section_td ul li input').each(function()
                {
                    $(this).attr('checked',false);
                });
                $('#section_td ul li').each(function()
                {
                    $(this).removeClass('active');
                });
                $('#section_drop_down > option').each(function()
                {
                    $(this).attr('selected',false);
                });
		$('#section_td .dropdown-toggle').html('None selected <b class=\'caret\'></b>');
	    }
     });

");

$this->breadcrumbs = array(
    yii::t('default', 'Dashboard') => array('view'),
);

$this->widget('bootstrap.widgets.TbAlert');


$segment_drop_down = SummaryDashboardPerSegment::getSegmentList($is_current, $date);


$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
	    'id' => 'user-form',
	    'enableAjaxValidation' => false,
	));

$this->widget('bootstrap.widgets.TbAlert');
?>

<table><tr>
	<td>Period:</td>
	<td id="date_td">
	    <?php
	    $model->date = $date;
	    echo $form->dropDownListControlGroup($model, 'date', SummaryDashboardPerSegment::getDateList(), array(
		'empty' => Yii::t('default', ''),
		'labelOptions' => array("label" => false)));
	    ?>
	</td>
	<td>Segments:</td>
	<td id="segment_td">
	    <?php
	    $this->widget('yiiwheels.widgets.multiselect.WhMultiSelect', array(
		'model' => $model,
		'id' => 'segment_name',
		'attribute' => 'segment_name',
		'data' => (empty($segment_drop_down) ? array('1' => '') : array_merge(
				array(
				    'all' => 'All',
				), $segment_drop_down)),
	    ));
	    ?>
	</td>
	<td>Sections:</td>
	<td id="section_td">
	    <?php
	    $this->widget('yiiwheels.widgets.multiselect.WhMultiSelect', array(
		'model' => $model,
		'attribute' => 'section_drop_down',
		'id' => 'section_drop_down',
		'data' => array(
		    'All' => 'All',
		    'tids' => 'TIDs',
		    'vehicles' => 'Vehicles',
		    'radioactives' => 'Radioactives',
		    'renewalprogress' => 'TIDs Under Processing')
	    ));
	    ?>
	</td>
	<td>
	    <?php echo CHtml::submitButton(Yii::t('default', 'Go'), array('class' => 'btn primary')); ?>

	</td>
	<td>
	    <?php echo CHtml::link(Yii::t('default', 'Export'), array('exportToExcel', 'is_current' => $is_current, 'date' => $date, 'section_visibility_array' => $section_visibility_array, 'selected_segments' => json_encode($selected_segments)), array('class' => 'btn btn-success')); ?>

	</td>
    </tr></table>
<?php
	    $this->endWidget();

	    echo "<br/>";
	    echo "<br/>";
?>

	    <div class="scroll_div"><div class="inner_scroll_div"></div></div>
	    <div id="dashboard_container" style="width: 0">
    <?php
	    $this->renderPartial('_view_dashboard_table', array(
		'model' => $model,
		'is_current' => $is_current,
		'date' => $date,
		'section_visibility_array' => $section_visibility_array,
		'selected_segments' => $selected_segments
	    ));

	    $this->widget('bootstrap.widgets.TbScrollspy', array(
		'selector' => '.span-19',
		'target' => '.dashboard',
		'offset' => 10,
	    ));
    ?>
	</div>
	<script type="text/javascript">
	    $(document).ready(function(){
		checkDashboardWidth();

		if($('#section_td .dropdown-toggle').text() == "None selected "){
		    $('#section_td .btn-group ul li a input[value=All]').attr('checked', 'checked');
		    processSectionTD();
		}

		if($('#segment_td .dropdown-toggle').text() == "None selected "){
		    $('#segment_td .btn-group ul li a input[value=all]').attr('checked', 'checked');
		    processSegmentTD();
		}
		setSelectedSegment();
		setSelectedSection();



	    });

	    function checkDashboardWidth(){
		var width = document.getElementById('dashboard_container').scrollWidth;
		var segment_count = <?php echo count($segment_drop_down) ?>;
		if(width > 750){
		    if(width > 1225){
			$(".inner_scroll_div").attr('style', 'overflow-x: scroll;overflow-y: hidden;height: 20px;');
			$(".scroll_div").attr('style', 'overflow-x: scroll;overflow-y: hidden;height: 20px;');
			$("#dashboard_container").attr('style', 'overflow-x: scroll;overflow-y: hidden;');
			$("#dashboard_container").width('1225px');
			$(".scroll_div").width('1225px');
			$('#dashboard_container').scroll(function(){
			    $(".scroll_div").scrollLeft($("#dashboard_container").scrollLeft());
			});
			$('.scroll_div').scroll(function(){
			    $("#dashboard_container").scrollLeft($(".scroll_div").scrollLeft());
			});
			$(".inner_scroll_div").width(document.getElementById('dashboard_container').scrollWidth + 'px');
			$(".inner_scroll_div").show();
			$(".scroll_div").show();
		    }
		    else{
			$(".inner_scroll_div").attr('style', 'overflow-x: hidden;overflow-y: hidden;height: 20px;');
			$(".scroll_div").attr('style', 'overflow-x: hidden;overflow-y: hidden;height: 20px;');
			$("#dashboard_container").attr('style', 'overflow-x: initial;overflow-y: initial;');
			$("#dashboard_container").width('1225px');
			$(".scroll_div").width('1225px');
			$(".inner_scroll_div").width(document.getElementById('dashboard_container').scrollWidth + 'px');
		    }

		}
		else
		{

		    $(".scroll_div").width(document.getElementById('dashboard_container').scrollWidth + 'px');
		    $(".inner_scroll_div").attr('style', 'overflow-x: hidden;overflow-y: hidden;height: 20px;');
		    $(".scroll_div").attr('style', 'overflow-x: hidden;overflow-y: hidden;height: 20px;');
		    $("#dashboard_container").attr('style', 'overflow-x: initial;overflow-y: initial;');

		    if(segment_count > 10){
			$("#dashboard_container").width('1168px');
			$(".scroll_div").width('1168px');
		    }
		    else{
			if(segment_count > 6){
			    $("#dashboard_container").width('950px');
			    $(".scroll_div").width('950px');
			}
			else{
			    $("#dashboard_container").width('750px');
			    $(".scroll_div").width('750px');
			}
		    }
		}
	    }

	    function processSectionTD(){
		var component = $('#section_td .btn-group ul li a input[value=All]');
		if(component.attr('checked') || component.attr('checked') == 'checked'){
		    $('#section_td ul li input').each(function()
		    {
			$(this).attr('checked',true);
		    });
		    $('#section_td ul li').each(function()
		    {
			$(this).addClass('active');
		    });
		    $('#section_drop_down > option').each(function()
		    {
			$(this).attr('selected',true);
		    });
		    $('#section_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
		}
		else{
		    $('#section_td ul li input').each(function()
		    {
			$(this).attr('checked',false);
		    });
		    $('#section_td ul li').each(function()
		    {
			$(this).removeClass('active');
		    });
		    $('#section_drop_down > option').each(function()
		    {
			$(this).attr('selected',false);
		    });
		    $('#section_td .dropdown-toggle').html('None selected <b class=\'caret\'></b>');
		}
	    }


	    function processSegmentTD(){
		var component = $('#segment_td .btn-group ul li a input[value=all]');
		if(component.attr('checked') || $(this).attr('checked') == 'checked'){
		    $('#segment_td ul li input').each(function()
		    {
			$(this).attr('checked',true);
		    });
		    $('#segment_td ul li').each(function()
		    {
			$(this).addClass('active');
		    });
		    $('#segment_name > option').each(function()
		    {
			$(this).attr('selected',true);
		    });
		    $('#segment_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
		}
		else{
		    setSelectedSegment();
		}
	    }

	    function setSelectedSegment(){
		var all_selected = true;
		var segment_count = 0;
		var segments = '<?php echo json_encode($selected_segments) ?>';
		$('#segment_td ul li input').each(function()
		{
		    if($(this).val() != "all")
			if(segments.indexOf($(this).val()) != -1)
			{
			    segment_count++;
			    $(this).attr('checked',true);
			    $(this).parent().parent().parent().addClass('active');
			}
			else
			{
			    all_selected = false;
			    $(this).attr('checked',false);
			    $(this).parent().parent().parent().removeClass('active');
			}
		});
		if(all_selected){
		    $('#segment_td .btn-group ul li a input[value=all]').parent().parent().parent().addClass('active');
		    $('#segment_td .btn-group ul li a input[value=all]').attr('checked', true);
		    $('#segment_name > option[value=all]').attr('selected',true);
		    $('#segment_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
		}
		else{
		    $('#segment_td .btn-group ul li a input[value=all]').parent().parent().parent().removeClass('active');
		    $('#segment_td .btn-group ul li a input[value=all]').attr('checked', false);
		    $('#segment_name > option[value=all]').attr('selected',false);
		    $('#segment_td .dropdown-toggle').html(segment_count+' selected <b class=\'caret\'></b>');
		}

		$('#segment_name > option').each(function()
		{
		    if(segments.indexOf($(this).val()) != -1)
			$(this).attr('selected',true);
		    else
			$(this).attr('selected',false);
		});
	    }

	    function setSelectedSection(){
		var all_selected = true;
		var section_count = 0;
		var sections = '<?php echo $section_visibility_array ?>';
		$('#section_td ul li input').each(function()
		{
		    if($(this).val() != "All")
			if(sections.indexOf($(this).val()) != -1)
			{
			    section_count++;
			    $(this).attr('checked',true);
			    $(this).parent().parent().parent().addClass('active');
			}
			else
			{
			    all_selected = false;
			    $(this).attr('checked',false);
			    $(this).parent().parent().parent().removeClass('active');
			}
		});
		if(all_selected){
		    $('#section_td .btn-group ul li a input[value=All]').parent().parent().parent().addClass('active');
		    $('#section_td .btn-group ul li a input[value=All]').attr('checked', true);
		    $('#section_drop_down > option[value=All]').attr('selected',true);
		    $('#section_td .dropdown-toggle').html('All <b class=\'caret\'></b>');
		}
		else{
		    $('#section_td .btn-group ul li a input[value=All]').parent().parent().parent().removeClass('active');
		    $('#section_td .btn-group ul li a input[value=All]').attr('checked', false);
		    $('#section_drop_down > option[value=All]').attr('selected',false);
		    $('#section_td .dropdown-toggle').html(section_count+' selected <b class=\'caret\'></b>');
		}

		$('#section_drop_down > option').each(function()
		{
		    if(sections.indexOf($(this).val()) != -1)
			$(this).attr('selected',true);
		    else
			$(this).attr('selected',false);
		});
	    }


   
</script>