$(document).ready( function() {

 var questions;
 var targetQuestions;
 var optionScrollHorizon = {
				width:670,
				elementsInPage:1,
				elementMargin:2,
				shadow:"#999 2px 2px 2px",
				height:"auto",
				controls:'#controls',
				slideTimer:600,
				autoscroll:false,
				scrollTimer:4000,
				changePageCallback:function(){
							var positiondisplay= $("#myScroll").get(0).idx+'/'+$("#myScroll").get(0).totalPages;
							$('#controls .positiondisplay').html(positiondisplay);
						},
				loadCallback:function(){
							var positiondisplay= $("#myScroll").get(0).idx+'/'+$("#myScroll").get(0).totalPages;
							$('#controls .positiondisplay').html(positiondisplay);
						}
			  };

function countProgress(){
        var totalChecked = 0;
        var totalGroups = 0;
        var previousName = '';
        var passedFilter = ':checked,textarea[value!=""],select[value!=""],input:text[value!=""]';
		console.log(passedFilter);

        $.each($('[name*=slider],[name*=question]'), function(index, value) {
            if(previousName != $(this).attr('name'))
			{  totalGroups++; }

			if($(this).is(passedFilter))
			{  totalChecked++; console.log(totalChecked);}

			previousName = $(this).attr('name');
        });

  		var percentageGroup = (totalChecked / totalGroups) * 100;
 		var progressGroup = $('#progressbar').progressbar('value', percentageGroup);
        var percentage = $('#percentage').html(percentageGroup.toFixed(0) + "% complete");
	    var totalprogress = $("#progressbar").progressbar('value', percentageGroup.toFixed(0));

		$("#progressbar").progressbar({value: totalprogress});
}

 $.ajax({type:"GET",url:"diagnostics_json.txt",
 dataType:"json",
 cache: false,
 contentType: "application/json",
 complete:function(response) {
 var data=$.parseJSON(response.responseText);
 questions = data.questions[0].question;

 for(var dname=0, dl=data.diagnosticApplicationName.length; dname<dl; dname++) {
	 var diagnosticName = data.diagnosticApplicationName[0].name;
	 $("#d-left > div.title > h3").html(diagnosticName);
 }

 var _left_menu = "<ul>";
 for(var i=0, il=data.categories.length; i<il; i++) {
   var data_category = data.categories[i];
    for(var j=0, ol=data_category.category.length; j<ol; j++) {
     var category = data_category.category[j];
      _left_menu += "<li class='categories'><a href='#' class='cat_name'>"+category.name+"</a>";
      if(category.element){
        _left_menu += "<ul class='cat-element'>";
        for(var el=0, al=category.element.length; el<al; el++){
        var element = category.element[el];
          _left_menu += "<li class='element' id='"+element.elementId+"'><a href='#'>"+element.name+"</li>"
        }
        _left_menu += "</ul>";
      }
      _left_menu += '</li>';
    }
	_left_menu += "</ul>";
  }


 $('ul > li > a').live("click",function()
	{
		$.categoryElement = $(this).parent().find(' > ul');
		if($.categoryElement.is(':hidden')){
				$.categoryElement.slideDown();
			}else{
				$.categoryElement.slideUp();
			}

	});
  $("#d-left > div.category").html(_left_menu);


$('.commentTitle').live("click",function(){
	$('.commentBox').slideDown();
	});

$('.commentHide').live("click",function(){
	$('.commentBox').slideUp();
	});

$.fn.loadQuestionTool = function(options){
  $(this).mbScrollable(options.scrollHorizon);
};

$.fn.createSliderQuestion = function(txtQuestion,idQuestion){
  var _page = '<div class="scrollEl">'+
                     '<h3>'+txtQuestion+'</h3>'+'<input type="text" value="" id="amount" name="slider'+idQuestion+'" style="border:0; color:#f6931f; font-weight:bold;" />'+'<div class="slider-range-max '+idQuestion+'"></div>'+
                      '<div class="comment">'+
                      '<a class="commentTitle" href="#">Write a Comment</a>'+
                      '<div class="commentBox"><a class="commentHide" href="#">[ close ]</a><br />'+
                      '<textarea rows="2"></textarea></div>'+
                      '</div>'+'</div>'
    $(".pageIndex").html("");
	$(this).append(_page);
}


$.fn.createQuestion = function(arr_question){
   $(this).html("")
   for(var tq=0, tqs=arr_question.length; tq<tqs; tq++) {
     var _questionText = arr_question[tq].questionText[0].Text;
     var _questionId = arr_question[tq].questionId;

     if(arr_question[tq].type=="slider"){
       var _arrScrollValues = arr_question[tq].glossaries[0].glossary.sort(function(a,b){return a.glossaryScore > b.glossaryScore});
       $(this).createSliderQuestion(_questionText,_questionId);
       var _sliderOption = { range: "max",
                                     min: parseInt(_arrScrollValues[0].glossaryScore),
                                     max: parseInt(_arrScrollValues[_arrScrollValues.length-1].glossaryScore),
                                     value: parseInt(_arrScrollValues[0].glossaryScore),
                                     slide: function(event, ui) { $(this).parent().find("input").val(ui.value); countProgress();},
									 change: function(event, ui) { $(this).parent().find("input").attr('value', ui.value); }
                                    };
        $( ".slider-range-max."+_questionId+" " ).slider(_sliderOption);
     }
   }
   $(this).loadQuestionTool({scrollHorizon: optionScrollHorizon});
};

$.fn.questionPerPage = function(questionPage){
var _options="";
for(var q=0,qp=questionPage.length;q<qp;q++)
{
	_options += '<option value='+(q+1)+'>'+(q+1)+'</option>';
	}
	$("select#q-perPage").html(_options);
}

$.fn.createProgressbar = function()
{
    var totalprogress = $('#progressbar').progressbar('value', 0);
    var _progressOption = { value: totalprogress }
	$(this).loadProgressbar(_progressOption);
}

$.fn.loadProgressbar = function(_progress){
	_progress = 'Answered Questions : <div id="percentage"></div>'+
                	'<div id="progressbar"></div>';
    $(this).append(_progress)
}

$.fn.saveclose = function(){
	var _save_close = '<div style="float:right;"><input type="submit" class="button" value="Save Progress">'+
					'<input class="button" type="submit" value="Complete"></div>'+
            		'</div>';
    $(this).append(_save_close)
}

$('#d-left > div.category > ul > li > ul > li').live("click",function(){
	$('#firstload').css('display','none');
	var elID = $(this).attr('id');
    var _rightTitle = "<h3>" + $(this).parents("li").children('a').html() + " > " + $(this).find('a').html() + "</h3>";
    $("#d-right > div > div.title").html(_rightTitle)
    if(questions)
	 {
     	targetQuestions = $.map(questions,function(data)
	 		{
     			_return = null;
     			if(data.elementId == elID)
				_return = data;
     			return _return;
 			});

      if(targetQuestions && targetQuestions.length > 0){
          $("#myScroll").createQuestion(targetQuestions)
		  $("select#q-perPage").questionPerPage(targetQuestions)
		  $("#progressbar-wrapper").html("");
             $("#progressbar-wrapper").createProgressbar();
          $('[name*=slider]').change(function() { countProgress(); });
      }
    }

	$("#save-close").html("");
	$("#save-close").saveclose();
});
} });
});