// JavaScript Document
//This file contains some function in javascript according to the customize-embedd box.

//NOTE: in this js file we have used the $('element_name) to perform the functionality of 
//document.getElementById('element_name') function. This $ is defined in teh color picker file
//So i am just using that instead of defining the same here in this file.


//display_box function is used to toggle (show and hide) 
//the customize embed box.
function display_box()
{
	if ($("divBox").style.display=="none" || $("divBox").style.display.length==0)
	{
		$("divBox").style.display="block";
		
		//Selecting the default theme whenever user open custmize box.
		//change_theme('993333','ffffff',''); 
		//clearstyle('link_theme_1'); 
		
		//De-selecting the menu of Title, Background and Foreground color.
		change_color_area='1'; 
		select_change_color_area();
		
		//Hiding teh more options area.
		$("customize_more").style.display="none";
		$("hlk_more").innerHTML = "+ more options";
		
		//Selecting the default white color.
		//updateH('FFFFFF');
	}
	else
	{
		$("divBox").style.display="none";
	}
}

//display_moreoptions function is used to toggle (show and hide) 
//the more options (Color picker box) present in the customize embed box.
function display_moreoptions()
{
	if ($("customize_more").style.display=="none" || $("customize_more").style.display.length==0)
	{
		$("customize_more").style.display="block";
		$("hlk_more").innerHTML = "- more options";
	}
	else
	{
		$("customize_more").style.display="none";
		$("hlk_more").innerHTML = "+ more options";
	}
}

//global variables for changing the generated code
var th_bgcolor='';
var th_bcolor='';
var th_fccolor='';

/*change_theme functions accepts the three parameters(color codes)
on the basis of these parameter the color (theme) of the quiz
box will be changed.*/
function change_theme(b_color, bg_color, fc_color)
{		
	if (bg_color.length != 0)
	{
		$("tblquiz").style.backgroundColor = '#' + bg_color;
		th_bgcolor = bg_color;
	}
	
	if (b_color.length != 0)
	{
		$("tblquiz").style.borderColor = '#' + b_color;
		$("hlk_heading").style.color = '#' + b_color;
		$("tblquiz").style.color ='#' +  b_color;
		$("tbldesc").style.color ='#' +  b_color;
		$("tbldesc1").style.color ='#' +  b_color;
		$("tbldesc2").style.color ='#' +  b_color;
		th_bcolor = b_color;
		th_fccolor = b_color;
	}
	
	if (fc_color.length != 0)
	{
		$("hlk_heading").style.color = '#' + fc_color;
		th_fccolor = fc_color;
	}
	
	$("embed_code").value = update_embed_code();
}

function change_theme_def(b_color, bg_color, fc_color)
{		
	if (bg_color.length != 0)
	{
		$("tblquiz").style.backgroundColor = '#' + bg_color;
		th_bgcolor = bg_color;
	}
	
	if (b_color.length != 0)
	{
		$("tblquiz").style.borderColor = '#' + b_color;
		$("hlk_heading").style.color = '#' + b_color;
		$("tblquiz").style.color ='#' +  b_color;
		$("tbldesc").style.color ='#' +  b_color;
		$("tbldesc1").style.color ='#' +  b_color;
		$("tbldesc2").style.color ='#' +  b_color;
		th_bcolor = b_color;
		th_fccolor = b_color;
	}
	
	if (fc_color.length != 0)
	{
		$("hlk_heading").style.color = '#' + fc_color;
		th_fccolor = fc_color;
	}
	
	//$("embed_code").value = update_embed_code();
}

function change_footer_firstime()
{
	$("embed_code").value = $("embed_code").value + footer_text;	
}

var main_url = '';
var quiz_id = '';
var footer_text = '';
function update_embed_code()
{		
	var embed_code_text = "<iframe name='proprofs' id='proprofs' height='422' width='440' style='overflow-x: hidden;' frameborder=0 marginwidth=0 marginheight=0 src='http://" + main_url + "/quiz-school/widget/v2/?id=" + quiz_id + "&bgcolor=" + th_bgcolor + "&fcolor=" + th_bcolor + "&tcolor=" + th_fccolor + "'></iframe>" + footer_text;
	
	//var embed_code_text = "<iframe name='proprofs' id='proprofs' height='422' width='440' style='overflow-x: hidden;' frameborder=0 marginwidth=0 marginheight=0 src='http://" + main_url + "/quiz-school/widget/v2/?id=" + quiz_id + "&bgcolor=" + th_bgcolor + "&fcolor=" + th_bcolor + "&tcolor=" + th_fccolor + "'></iframe><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#990000'>Powered By ProProfs: <a href='http://www.proprofs.com/quiz-school/create-a-quiz.php' target='_blank'>Create A Quiz</a></div>";

//		var embed_code_text = "<iframe name='proprofs' id='proprofs' height='275' width='406' frameborder=0 marginwidth=0 marginheight=0 src='http://dev.proprofs.com/quiz-school/quizview_w.php?id=" + quiz_id + "&bgcolor=" + th_bgcolor + "&fcolor=" + th_bcolor + "&tcolor=" + th_fccolor + "'></iframe><div style='width:400; background-color:#FFFFFF; font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#990000'>Powered By ProProfs - <a href='/quiz-school/' target='_blank'>Create A Quiz</a> or <a href='/flashcards/' target='_blank'>Flash cards</a></div>";
		return embed_code_text;
}
	
function set_quiz_details(site_url, qid, foot_text)
{
	main_url = site_url;
	quiz_id = qid;
	footer_text = foot_text;
}

function clearstyle(sel_theme)
{
	var frm=document.getElementsByTagName('a');
	for (var i=1; i< frm.length; i++)
	{
		if (('link_theme_' + i) == sel_theme)
		{
			$('link_theme_' + i).className='theme_image_link selected';				
		}
		else
		{
			if ($('link_theme_' + i) != null)
			{
				
				$('link_theme_' + i).className='theme_image_link';
			}
		}
	}	
}

var change_color_area='';
function select_change_color_area()
{	
	$("pick_color_0").className = "";//Title color
	$("pick_color_1").className = "";//Background color
	$("pick_color_2").className = "";//Foreground color
	
	if (change_color_area.length != 0)
	{
		$("pick_color_" + change_color_area).className = "selected";
	}
}