var currentPage   = 1;
var maxPage       = 4;
var currentPetpet = '';
var validPetpets  = ['oukin', 'dipni'];
var lang          = translated_data('settings', 'lang');

var strCircleBase = IMAGE_HOST + "/petpetpark/howtodraw/circle%s.png";
var strIEStyle    = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%s', sizingMethod='scale');";
var strStdStyle   = "url(%s)";

var drawTitle     = document.getElementById('drawTitle');
var printableLink = document.getElementById('printableLink');

var previousButton = document.getElementById('previousButton');
var mainButton     = document.getElementById('mainButton');
var nextButton     = document.getElementById('nextButton');

var elOneTxt   = document.getElementById('cellOneText');
var elTwoTxt   = document.getElementById('cellTwoText');
var elThreeTxt = document.getElementById('cellThreeText');

var elOneDraw   = document.getElementById('htdDrawOne');
var elTwoDraw   = document.getElementById('htdDrawTwo');
var elThreeDraw = document.getElementById('htdDrawThree');

var elOneCircle   = document.getElementById('htdCircleOne');
var elTwoCircle   = document.getElementById('htdCircleTwo');
var elThreeCircle = document.getElementById('htdCircleThree');


var ppx_howtodraw_bkg = document.getElementById("ppx_howtodraw_bkg");
var ppx_howtodraw_video = document.getElementById("ppx_howtodraw_video");
var ppx_howtodraw_html = document.getElementById("ppx_howtodraw_html");
var ppx_howtodraw_toggle_video_btn = document.getElementById("ppx_howtodraw_toggle_video_btn");
var ppx_howtodraw_toggle_html_btn = document.getElementById("ppx_howtodraw_toggle_html_btn");
var ppx_howtodraw_bottom_nav = document.getElementById("ppx_howtodraw_bottom_nav");
var ppx_howtodraw_html_bkg = "url(" + IMAGE_HOST + "/petpetpark/howtodraw/HowToDrawBackground.jpg)";
var ppx_howtodraw_video_bkg = "url(" + IMAGE_HOST + "/petpetpark/howtodraw/HowToDrawBackgroundVideo2.jpg)";
var ppx_howtodraw_page_nav =  document.getElementById("ppx_howtodraw_page_nav");

        // Custom rollover function that also keeps track of active page.
	function ppx_lightup(img, path) {
	if (img.id.indexOf(currentPage) == -1) {
        	img.src = path + "_ov.png";
		}
        }
        function ppx_turnoff(img, path){
        if (img.id.indexOf(currentPage) == -1) {
                img.src = path + ".png";
                }
        }




function showStep(move) {
	// TODO: use in_array()
	if (currentPetpet=='') {
		return;
	}

	move        = (move > 0 && move <= maxPage) ? move : 1;
	currentPage = move;
	var page_id_active = new String("page" + move);
	
	for (i=1;i<5;i++) {
		if (!(i == move)) {
		var page_id_inactive = new String("page" + i);
		document.getElementById(page_id_inactive).src =  IMAGE_HOST + "/petpetpark/howtodraw/step" + i + ".png";
		}

	}
	document.getElementById(page_id_active).src =  IMAGE_HOST + "/petpetpark/howtodraw/step" + move + "clicked.png";
	var strDrawBase = IMAGE_HOST + "/petpetpark/howtodraw/" + currentPetpet + "%s.png";
	var offset      = (move - 1) * 3;



	previousButton.style.visibility = (move > 1)       ? 'visible' : 'hidden';
	nextButton.style.visibility     = (move < maxPage) ? 'visible' : 'hidden';

	elOneTxt.innerHTML   = translated_data(currentPetpet, offset);
	elTwoTxt.innerHTML   = translated_data(currentPetpet, offset + 1);
	elThreeTxt.innerHTML = translated_data(currentPetpet, offset + 2);

	if (document.all) {
		elOneCircle.style.filter   = strIEStyle.replace('%s', strCircleBase.replace('%s', offset + 1));
		elTwoCircle.style.filter   = strIEStyle.replace('%s', strCircleBase.replace('%s', offset + 2));
		elThreeCircle.style.filter = strIEStyle.replace('%s', strCircleBase.replace('%s', offset + 3));

		elOneDraw.style.filter   = strIEStyle.replace('%s', strDrawBase.replace('%s', offset + 1));
		elTwoDraw.style.filter   = strIEStyle.replace('%s', strDrawBase.replace('%s', offset + 2));
		elThreeDraw.style.filter = strIEStyle.replace('%s', strDrawBase.replace('%s', offset + 3));
	} else {
		elOneCircle.style.backgroundImage   = strStdStyle.replace('%s', strCircleBase.replace('%s', offset + 1));
		elTwoCircle.style.backgroundImage   = strStdStyle.replace('%s', strCircleBase.replace('%s', offset + 2));
		elThreeCircle.style.backgroundImage = strStdStyle.replace('%s', strCircleBase.replace('%s', offset + 3));

		elOneDraw.style.backgroundImage   = strStdStyle.replace('%s', strDrawBase.replace('%s', offset + 1));
		elTwoDraw.style.backgroundImage   = strStdStyle.replace('%s', strDrawBase.replace('%s', offset + 2));
		elThreeDraw.style.backgroundImage = strStdStyle.replace('%s', strDrawBase.replace('%s', offset + 3));
	}
}

function selectPetpet(name) {
	// TODO: use in_array()
	if (name=='') {
		return;
	}

	if (validPetpets[0] == name) {
		ppx_howtodraw_toggle_video_btn.style.display = "none";
		ppx_howtodraw_toggle_html_btn.style.display = "none";
		ppx_howtodraw_page_nav.style.visibility = "visible";
		ppx_howtodraw_bottom_nav.style.display = "";
		ppx_howtodraw_bkg.style.background = ppx_howtodraw_html_bkg;
	}

	if (validPetpets[1] == name) {
		
		ppx_howtodraw_bkg.style.background = ppx_howtodraw_html_bkg;
		ppx_howtodraw_toggle_video_btn.style.display = "";
		ppx_howtodraw_page_nav.style.visibility = "visible";
                ppx_howtodraw_toggle_html_btn.style.display = "none";
		ppx_howtodraw_bottom_nav.style.display = "";
		// reset count
		count = 0;		

	}	

	if (name==currentPetpet) {
		showStep(1);
		return;
	}

	currentPetpet = name;

	drawTitle.src      = IMAGE_HOST + "/petpetpark/howtodraw/drawing_" + name + "_" + lang + ".png";
	printableLink.href = "/petpetpark/printable.phtml?species=" + currentPetpet;

	showStep(1);
}