/* 2a-T2 test template
 * requires:
 * jquery.js
 * jquery.ui.js draggable
 */
console.log('> template2a.js is iniciated;');

function template2ascript() {	
	console.log("function template2ascript(); sectionName=" +sectionName + "; slideName=" +slideName);
	
         tObj = getObject();
    
        var mainVars = initMainVars(tObj,sectionName,slideName);
        var tO = mainVars.tO;         	
        var f_items = tO['f_items'];			console.log("f_items:");	console.log(f_items);
        var m_items = tO['m_items'];			console.log("m_items:");	console.log(m_items);
        //var tO = tObj[sectionName][slideName]; 	console.log("tObj:"); 		console.log(tObj);
	
	// count items
	var itemsCount = Object.keys(f_items).length; 	console.log('items count: ' +itemsCount);
	
	// depending on items number, f background and text widths are different
	var back_widths ={
		3: 380,   
		4: 280,
		5: 228
	}
	var text_widths ={
		3: 354,
		4: 254,
		5: 194
	}
	
	// select background image width according images number
	var backWidth = back_widths[itemsCount];			console.log('back_width:' + backWidth);
	var textWidth = text_widths[itemsCount];			console.log('textWidth:' + textWidth);
	
	// write background images according items number itemsCount
	tO['f_background_image'] = "img/test_f"+itemsCount+".png";
	tO['m_background_image'] = "img/test_m"+itemsCount+".png";
	tO['f_background_image_white'] = "img/test_f"+itemsCount+"_w.png";
	tO['m_background_image_white'] = "img/test_m"+itemsCount+"_w.png";
	
	var i = 0;
	var zIndexChange =20;
	
        if (tO['background']) {
		loadSlideBackground();
	}
        
        
	// randomise images order
	var randPlaces = randomArray(itemsCount);
	function rand_m_items() {
		var newOrder = {};
		randPlaces.forEach(function(e){
			newOrder['m_item_'+i] = m_items['m_item_'+e]; // get images in new places by randPlaces set
			i++;
		});
		console.log(newOrder);
		// change real items with random
		m_items = newOrder;
	};
	rand_m_items();
	
	var f_p = {
		name	: 'f',	// name of item
		end :{
			top : 131,
			left : 30,
		},
		image:{
			css	:{
				"position":"absolute",
				'width': backWidth+'px',
				'height':'454px',
				"background": "",
				'top':'0px',
				'left':'0px',
				//"cursor": "move",
				"z-index": "6",
				"border" : "1px solid #48c3eb"
			}
		},
		text:{
			css	:{
				main	:{
					"position":"absolute",
					'width': backWidth+'px',
					'height':'454px',
					'top':'0px',
					'left':'0px',
					//"cursor": "move",
					"z-index": "6"
				},
				background	:{
					"position":"absolute",
					"border-radius": '20px',
					'width': '40px',
					'height':'40px',
					"background-color": 'white',
					'top':'0px',
					'left': Math.round((backWidth / 2) - 20) + 'px',
					"z-index": "7",
				},
				text:{
					"position":"absolute",
					'padding':"16px 16px 40px",
					'width': textWidth+'px',
					'top':'2px',
					'left':'2px',
					"z-index": "6",
					'text-indent':'0px',
					'font-family':'Arial',
					'font-size': '21px',
					'line-height': '28px',
					'background': 'linear-gradient(#0096c6, #49c5ea) repeat scroll 0 0 rgba(0, 0, 0, 0)',
					'color': 'white'
				},
			}
		}
	}
	
	f_p.image.css.background = function(){
		return "  url("+ f_items['f_item_'+i] +") no-repeat 1px 0";
	}
	
	var m_p = {
		name	: 'm',	// name of item
		end :{
			top : 380,
			left : 28,
		},
		image:{
			css	:{
				"position":"absolute",
				'width': backWidth+'px',
				'height':'240px',
				"background": "",
				'top':'140px',
				'left':'30px',
				"cursor": "move",
				"z-index": "6"
			}
		},
		text:{
			css	:{
				main	:{
					"position":"absolute",
					'width': (backWidth-10)+'px',
					'height':'240px',
					'top':'140px',
					'left':'30px',
					"cursor": "move",
					"z-index": "10"
				},
				background	:{
					"position":"absolute",
					'width': '40px',
					'height':'40px',
					"background-color":"white",
					'top':'0px',
					'left': Math.round((backWidth / 2) - 20) + 'px',
					//"cursor": "move",
					"z-index": "6",
					"border": "1px solid #48c3eb",
					"border-radius": "40px"
				},
				text:{
					"position":"absolute",
					'padding':"16px 16px",
					'width': (textWidth-4)+'px',
					'top':'21px',
					'left':'4px',
					"z-index": "7",
					'text-indent':'0px',
					'font-family':'Arial',
					'font-size': '21px',
					'line-height': '28px',
					"background-color":"white"
				},
				wrong:{
					"position":"absolute",
					'padding':"16px 16px",
					'width': +(textWidth -2) +'px',
					'height':'169px',
					'top':'20px',
					'left':'2px',
					"z-index": "5",
					"border": "1px solid #48c3eb"
				},
			}
		}
	}
	
	m_p.image.css.background = function(){
		return "  url("+ m_items['m_item_'+i] +") no-repeat 3px 21px";
	}

	//  get true - correct ; or falls - incorrect
	this.checkAnswer = checkTestAnswer_2a;
	// check buttton and function to check
	checkTestButton(this.checkAnswer,tO,null,randPlaces,backWidth,itemsCount);
	
	loadSlideBackground();
	appendQuestion(ssId, ss, tO, 2);
	
	nh = ($(ssId + 'question').outerHeight() - 130);
	f_p.end.top = nh + 150;
	
	i = 0;
	append_items_2a('f',f_items,f_p,m_p,backWidth);
	
	i = 0;
	append_items_2a('m',m_items,f_p,m_p,backWidth);
	
        var clname = "."+sectionName+slideName + "m_items_2a";
        image_mDraggable_2a(clname,ssId,zIndexChange,2);
	
	        
    function append_items_2a(f_or_m,items,f_p,m_p,backWidth) {			// level 1 function		// append f or m all items
		var item;
		for (item in items) {
			console.log(f_or_m+" item: " +item +'; ' + items[item] +'; i:' +i);
			append_one_item(f_or_m,item,items,f_p,m_p,backWidth);//f_or_m,item,items,f_p,m_p,backWidth
			i++;// needed for background images
		}
		
	}
	
	$('.ui-droppable')
		.on('drop', function( event, ui ) {	// droppable jquery ui	
				
				
				if ($(this).children('.textft').length) {
					var con_bot = $(this).children('.textft').outerHeight() + $(this).position().top - 21;
					var con_left = $(this).position().left;
				} else {
					var con_bot = $(this).children('.border').outerHeight() + $(this).position().top - 21;
					var con_left = $(this).position().left - 2;
				}				
				
				console.log('con_bot', con_bot);
				
				$(ui.draggable).css('top', con_bot+'px');
				$(ui.draggable).css('left', con_left+'px');

			});
	
	var max_h1 = 0;
	$('.ui-droppable > .textft').each( function() {
			max_h1 = Math.max(max_h1, $(this).height());
		});	
				
	$('.ui-droppable > .textft').css('height', max_h1+'px');	
	$('.ui-droppable > .textfb').css('top', (max_h1 + 40)+'px');	
	
	var max_h2 = 0;
	$('.ui-draggable > .textmt').each( function() {
			max_h2 = Math.max(max_h2, $(this).height());
		});	
		
	var max_hh2 = max_h2;	
				
	$('.ui-draggable > .textmt').css('height', max_h2+'px');	
	$('.ui-draggable > .textmt').next().css('height', (max_h2+2)+'px');
	$('.ui-draggable').css('height', (max_h2+60)+'px');
	
	$('.ui-droppable').css('height', (max_h1+40+max_h2+60)+'px');
	
	max_h2 = 0;
	m_p_top = $('.ui-droppable').position().top + (max_h1+40+max_h2+60);
	$('.ui-draggable').css('top', m_p_top);
	hh = $('#section0slide0m_item_0').height() + $('#section0slide0m_item_0').position().top + 20;
			
	normalize_height(hh);
	
	$(ssId).append('<img id="'+ss+'_fake" style="position: absolute; left: -1000px; top: -1000px">');
	$(ssId+'_fake').on('load', function(){
		
		var ih = $(this).height() + 40;
		var oh = $(ssId + 'f_item_0').height();
		var mh = $('#section0slide0m_item_0').height();
		var tp = $(ssId + 'f_item_0').position().top;
		
		$(ssId + ' .ui-droppable').css('background-color', 'white');
		$(ssId + ' .ui-droppable').css('width', (backWidth+3)+'px');
		
		$(ssId + ' .ui-droppable').append('<div class="border" style="height: '+(ih-1)+'px; border: 1px solid #48c3eb; position: absolute; width:'+backWidth+'px; z-index: -1"></div>');
		$(ssId + ' .ui-droppable').css('border', '0px solid');
		
		$(ssId + ' .ui-droppable .bkg').css({'position' : 'absolute', 'background-color' : 'white', 'width': '40px', 'height' : '20px', 'border-left': '1px solid #48c3eb', 'border-right': '1px solid #48c3eb', 'border-top': '1px solid #48c3eb', 'border-top-left-radius': '20px', 'border-top-right-radius': '20px'});
		$(ssId + ' .ui-droppable .bkg').css('left', Math.round((backWidth / 2) - 22) + 'px');
		$(ssId + ' .ui-droppable .bkg').css('top', (ih-20) + 'px');
		
		var wdh = $(ssId + ' #section0slide0m_item_0text').width();
		console.log('wdh', wdh);
		
		$(ssId + ' .textmt').css('width', (wdh - 4)+'px');
		$(ssId + ' .textmt').next().css('width', (wdh - 2)+'px');
		
		$(ssId + ' .ui-draggable').each( function() {
				
				$(this).css('top', (tp + ih + 30) + 'px');
				
			});	
			
		$(ssId + ' .ui-droppable').each( function() {				
				var id = $(this).attr('id');
				var f_itm = id.replace('section0slide0', '');
				
				console.log('f_itm', id, f_itm, f_items[f_itm]);
				$('#'+id+' .border').css('background-image', 'url("'+f_items[f_itm]+'")');
				$('#'+id+' .border').css('background-repeat', 'no-repeat');
				$('#'+id+' .border').css('background-color', 'white');
			});		
			
		$(ssId + ' .ui-droppable').css({'height' : (ih+max_hh2+32)+'px', 'backround-repeat' : 'norepeat'});	
			
		normalize_height(tp + ih + 30 + mh + 20);	
		
	});
	$(ssId+'_fake').attr('src', f_items['f_item_'+0]);
	
	
	$(ssId).append('<img id="'+ss+'_fake2" style="position: absolute; left: -1000px; top: -1000px">');
	$(ssId+'_fake2').on('load', function(){
			
			var ih = $(this).height()+21;
			var oh = $(ssId + 'm_item_0').height();
			
			$(ssId + ' .ui-droppable').css('height' , '321px');
			$(ssId + ' .ui-droppable').css('width' , '230px');
			
			$(ssId + ' .ui-draggable').css('height' , (ih)+'px');
			$(ssId + ' .ui-draggable').css('width' , '228px');
			$(ssId + ' .ui-draggable > div').css('height' , (ih-53)+'px');
			
			backWidth = 192;
			$(ssId + ' .ui-draggable .bkg').css({'position' : 'absolute', 'background-color' : 'white', 'width': '40px', 'height' : '20px', 'border-left': '1px solid #48c3eb', 'border-right': '1px solid #48c3eb', 'border-top': '1px solid #48c3eb', 'border-top-left-radius': '20px', 'border-top-right-radius': '20px', 'z-index': '6'});
			$(ssId + ' .ui-draggable .bkg').css('left', '90px');
			$(ssId + ' .ui-draggable .bkg').css('top', '0px');
			
			normalize_height(530);
		});
	$(ssId+'_fake2').attr('src', m_items['m_item_'+0]);	
}
