/* Test Template Player
 * used only for test creation in Iliustra
 * just for one test
 * take test data from test_data.js file
 * 
 * Requires:
 * jquery.js
 * loader.js
 * test_data.js
 * usability.js
 * 
 */

/* Avoid `console` errors in browsers that lack a console. for IE especialy	
// or at the top of your script use this:
if ( ! window.console ) console = { log: function(){} };
*/

console.log('> player_test_template.js is iniciated;');

// turn off/on console: true:off; false:on;
var playerConsoleOff = false;
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});
    while (length--) {
        method = methods[length];
        // Only stub undefined methods.
        if (!console[method] ) {
            console[method] = noop;
        }
		// if console turned off
        if (playerConsoleOff) {
            console[method] = noop;
        }
    }
}());


// Remove scrollbar in JS
$('#slidesContainer').css({'overflow': 'hidden'});


// not used jet
// player object with all player data for palyer control and manipulation
var $p = {
	'IN' : {			// what is section and slide at given moment
		'section' : 0,
		'slide'	: 0,
		'sectionName': 'section1',
		'slideName': 'slide1',
		'ssId': '#section1slide1',
		'ss': 'section1slide1'
	},
	'resolution' :{
		'player'	:{
			'width' : 1160,
			'height': 718
		},
		'slide'	:{
			'width' : 1160,
			'height': 718
		},
		'controls'	:{
			'on'	: false,
			'width' : 118,
			'height': 718
		}
	},
	'total':{
		'sections': 1,
		'slides':1,
		'sINs':[1]			// array of total slides in sections
	}
}

// change all global variables from this "inSection" to this "_inSection" for better undertanding
var inSection = 0;
var	inSlide = 0;
console.log('inSection='+inSection +'; inSlide='+inSlide);

var sectionName = 'section0';
var slideName = 'slide0';
var ssId = '#section0slide0'; // section and slide name
var ss = 'section0slide0'; // section and slide name

var slideWidth = 1160;
var slideHeight = 718;
    
// global set width and height used at this moment
var setWidth = 1160;
var setHeight = 718;

function seName(){
	var s = 'section'+ (inSection+1);
	return s;
}
function slName(){
	var s = 'slide'+ (inSlide+1);
	return s;
}

// slide and navigation windom animation move dellay/speed
var animatedellay =  10; 

var documentLoadCount =0;



// creates sections and slides
createSS(doContent); 
//drag_and_check_xy();
// create sections and slides
function createSS(doContent) {
	console.log(">>>>>>>>>> >>>>>>>>>> >>>>>>>>>>   createSS Starts   >>>>>>>>>> >>>>>>>>>> >>>>>>>>>>");

    var sectionName,     // temp object for section
        slideName;       // temp object for slides
    var sections = 0
        , slides = 0;
		
    numberOfSlides = [];
    totalSlides = 0;

	// create section
    for (sectionName in doContent) {
        console.log("> Section = " + sectionName);
        $('#slidesContainer')
			.append('<div class="section" id="' + sectionName + '"></div>');
        
		// create slides
		for (slideName in doContent[sectionName]) {
			$('#' + sectionName)
				.append('<div class="slide" id="' + sectionName + slideName + '"></div>');
			$('#' + sectionName + slideName)
				.css({
					'position': "relative",
					"width":"1160px",
					"z-index": "1"
				});
            slides ++; // count slides
        }
		
        $('#' + sectionName)
			.css('height', setHeight*slides);
        numberOfSlides.push(slides); // create slides count per section arrray
		totalSlides += slides; // count all slides
        slides = 0;
        sections ++;
    }
    
    numberOfSections = numberOfSlides.length;
	
	console.log("> Created: totalSlides = " + totalSlides +
				"; numberOfSlides = " + numberOfSlides +
				"; numberOfSections = " + numberOfSections);
	wrapSection();    
	console.log("<<<<<<<<<< <<<<<<<<<< <<<<<<<<<<   createSS Ends   <<<<<<<<<< <<<<<<<<<< <<<<<<<<<<");
}

// Wrap all .slides within #sectionInner div
function wrapSection() {
    $('.section')
		.wrapAll('<div id="sectionInner"></div>')
		.css({
			'float' : 'left',           // Float left to display horizontally, readjust .slides width
			'width' : setWidth
		});

	// Set #sectionInner width equal to total width of all slides
    $('#sectionInner')
		.css('width', setWidth * numberOfSections);
    
    console.log("> wrap setWidth=" + setWidth);
    console.log("> All sections wrapped! Sections = " + numberOfSections + "; setWidth= " + setWidth + "; Total width= " + (setWidth * numberOfSections));
}


// background load should be moved to templates
// append slide div in section with background image
function loadSlideBackground() {
alert("in");
	console.log("> loadSlideBackground()");
	console.log("> Section Slide = " + sectionName + slideName);
	var slideContent = tObj[sectionName][slideName]['background'];
	console.log("> Slide background = " + slideContent);
	
	// if background defined
	if (slideContent) {
		$('#' + sectionName + slideName)
			.append('<div class="slide" id="' + sectionName + slideName + 'background"><img src="' + slideContent + '" alt="" ></img></div>');
		
		$('#' + sectionName + slideName +'background').css({
			'position': "absolute",
			"z-index": "2"
		});	
	}
}


runSlideScript();
// on slide open, looks for slide script and load it if its exists
function runSlideScript() {
	console.log('JS f: runSlideScript(){}');
	var slideObj = tObj['section0']['slide0'];
	var template = slideObj['template'];		// get template name
	
	var scriptObj = tObj['section0']['slide0']['script'];

	var scriptName = scriptObj['name'];
	
	console.log('Template ' + template + ' script ='+scriptName);
	
	if (scriptName){	// check is there a script available
		if (scriptObj['iniciated']) {
			console.log('Template script is iniciated: ' + scriptName);
		}
		else{
			console.log('Template script is not iniciated: ' + scriptName);
			console.log('Iniciating template script: ' + scriptName);
						                    
                        window[scriptName](); //without eval                        
			scriptObj['iniciated'] = true;
		}
	}
}


// check button
function checkTestButton(thisTest) {
	$(ssId)
		.append('<div id="' + ss + 'check"></div>');
	$(ssId+'check')
		//.attr('class','drag')
		.css({
			"position":"absolute",
			'width':'225px',
			'height':'91px',
			"background":" url(img/tikrinti_button.png) no-repeat 50% 50%",  // width = 175px; height = 41px
			'top': check_button_top,	// real button place - 643px
			'left':'930px',  //real button place - 955px
			"cursor": "pointer",
			"z-index": "1000"
		})
		.hover(
			function() {
				$( this ).css("background", "url(img/tikrinti_button_over.png) no-repeat 50% 50%");
			},
			function() {
				$( this ).css("background", "url(img/tikrinti_button.png) no-repeat 50% 50%");
			}
		)
		.bind('click', function(){
			//var answer = eval(thisTest());  
                        var answer = thisTest(); 
			console.log("Test answer is: " + answer );
		});
}

// test answer handlers
var answerObj ={}

// test answer handler
function testAnswer(correct) {
	// true - correct, false - incorrect
    if (correct) {
		console.log('Answer is right');
		testAnswerCorrect();
    }
    else{
		console.log('Answer is wrong');
		testAnswerInCorrect();
    }
}
// correct answer popup div with texts
function testAnswerCorrect() {
	var tO = tObj[sectionName][slideName];
	answerObj.Image = 'img/correct.png';
	answerObj.Color = 'rgb(0,168,8)';
	answerObj.Caption = tO.CorrectCaption;
	answerObj.Text = tO.CorrectText;
	appendTestAnswer();
}
// incorrect answer popup div with texts
function testAnswerInCorrect() {
	var tO = tObj[sectionName][slideName];
	answerObj.Image = 'img/fault.png';
	answerObj.Color = 'rgb(255,0,0)';
	answerObj.Caption = tO.FaultCaption;
	answerObj.Text = tO.FaultText;
	appendTestAnswer();
}
// close test answer div
function testAnswerClose(ssIdAnswer) {
    $(ssIdAnswer).remove();
	$(ssIdAnswer + '_background').remove();
}
// test answer div appending
function appendTestAnswer() {
	var Caption = answerObj.Caption;
	var Text = answerObj.Text;
	var Image = answerObj.Image;
	var Color = answerObj.Color;
	
	
	// append background to prevent dragging and testing while answer is open
	$(ssId)
		.append('<div id="' + ss + 'answer_background"></div>');
	$(ssId+'answer_background')
		.css({
				"position":"absolute",
				'width':'1260px',
				//"background":" #ff0000",
				'height':'718px',
				'top':'0px',
				'left':'0px',
				"z-index": "1000"
			});
		
	// Append answer div with image
	$(ssId)
		.append('<div id="' + ss + 'answer"></div>');
	$(ssId+'answer')
		//.attr('class','drag')
		.css({
			"position":"absolute",
			'width':'615px',
			'height':'424px',
			"background":" url("+Image+") no-repeat 50% 50%",
			'top':'0px',
			'left':'300px',
			//"cursor": "pointer",
			"z-index": "1000"
		});
	
	// answer Caption
	$(ssId+'answer')
		.append('<div id="' + ss + 'CorrectCaption">'+Caption+'</div>');
	$(ssId+'CorrectCaption')
		//.attr('class','drag')
		.css({
			"position":"absolute",
			'width':'345px',
			'height':'41px',
			'top':'65px',
			'left':'128px',
			//	"cursor": "pointer",
			"z-index": "1000",
				'text-indent':'0px',
				'font-family':'Arial',
				'font-size': '30px',
				'color': Color,
				
				//'text-align':'center',
				'line-height': '48px'
		});
	
	// answer Text
	$(ssId+'answer')
		.append('<div id="' + ss + 'CorrectText">'+Text+'</div>');
	$(ssId+'CorrectText')
		//.attr('class','drag')
		.css({
			"position":"absolute",
			'width':'472px',
			'height':'170px',
			'top':'144px',
			'left':'63px',
			//"cursor": "pointer",
			"z-index": "1000",
			'text-indent':'0px',
				'font-family':'Arial',
				'font-size': '24px',
				//'color': '#000000',
				
				//'text-align':'center',
				'line-height': '33px'
		});
	
	
	// close button
	$(ssId+'answer')
		.append('<div id="' + ss + 'close"></div>');
	$(ssId+'close')
		.css({
			"position":"absolute",
			'width':'175px',
			'height':'41px',
			"background":" url(img/uzdaryti_button.png) no-repeat 50% 50%",
			'top':'347px',
			'left':'225px',
			"cursor": "pointer",
			"z-index": "1000"
		})
		.bind('click', function(){ testAnswerClose(ssId+'answer'); });
}
