// Belltoons Javascript Functions - JCH 29/10/2009 - john@hazzy.net

function getViewportDimensions() {
    var intH = 0, intW = 0;
    
    if(self.innerHeight) {
       intH = window.innerHeight;
       intW = window.innerWidth;
    } 
    else {
        if(document.documentElement && document.documentElement.clientHeight) {
            intH = document.documentElement.clientHeight;
            intW = document.documentElement.clientWidth;
        }
        else {
            if(document.body) {
                intH = document.body.clientHeight;
                intW = document.body.clientWidth;
            }
        }
    }
    return {
        height: parseInt(intH, 10),
        width: parseInt(intW, 10)
    }
}

function state1(elem) {
	  if (!elem) { return };
    var elem= document.getElementById(elem);
	  elem.setAttribute('src','images/homepage/characters/state1/' + elem.id + '.png');
}

function state2(elem) {
	  if (!elem) { return };
    var elem= document.getElementById(elem);
	  elem.setAttribute('src','images/homepage/characters/state2/' + elem.id + '.png');
	  // Play the sound using SoundManager v2 
	  soundManager.play(elem.id+'_sound','sounds/'+elem.id+'.mp3');
} 

function centerElement(elem) {
    var viewport = getViewportDimensions();

    var elem= document.getElementById(elem);

    var left = (viewport.width == 0) ? 50 : parseInt((viewport.width - elem.offsetWidth) / 2, 10);
    var top = (viewport.height == 0) ? 50 : parseInt((viewport.height - elem.offsetHeight) / 2, 10);

    elem.style.left = left + 'px';
    elem.style.top = top + 'px';

    viewport = left = top = elem = null;    
}

function resize_image_by_factor(which, factor) {
	var elem = document.getElementById(which);
	if (elem == undefined || elem == null) return false;
	if (factor == undefined || factor == null) return false;
	var orig_width = elem.width;
	var orig_height = elem.height;
	elem.height = parseInt(orig_height*factor);
	elem.width  = parseInt(orig_width*factor);
	elem = null;
} 

// Declare the array outside the function for persistance

var elementDetails = new Array();

function positionElement(elemNumber, elem, horizontal, calltypeH, vertical,  calltypeV, scaleFactor) {
    // Either offset from Center and Top 
    // or set absolute values
    // Also can be passed a scaling factor to make the images smaller
    // validate paramaters
    
    if (!elem) { return };
    var mapId = elem + "_map";
    var elem= document.getElementById(elem);
    if (elem==null) { return };
    

   
    // Store the original dimensions of the Image in an associative array 
    
    if (elementDetails[elemNumber] == undefined)  { // if the elem has not previously been recorded then record the width and height for later
        elementDetails[elemNumber] = [elem.id, elem.height, elem.width];
 	  }
 	  
 	  
   // reset height and width back to original values in case scaling takes place.
   elem.height = elementDetails[elemNumber][1]; // height
   elem.width  = elementDetails[elemNumber][2]; // width
    
    
    if (scaleFactor != 1.0) {
    	resize_image_by_factor(elem.id, scaleFactor);
    	horizontal = parseInt(horizontal*scaleFactor);
    	vertical = parseInt(vertical*scaleFactor);
   	}
   	
   	var mapArea = document.getElementById(mapId)
   	if (!mapArea || mapArea==null) {} else {
   		var mapCoords = mapArea.coords;
   		var mapCoordsArray = new Array(3); // four elements
   		mapCoordsArray = mapCoords.split("," , 4); 
   		mapAreaCoords = "0, 0," + parseInt(mapCoordsArray[2] * scaleFactor) + "," + vertical; // New coordinates x1,y1, x2,y2
  	}
    
    if (calltypeH==null) {calltypeH = "absolute"} ;
    if ((calltypeH == "absoulte") || (calltypeH == "offset")) {} else  {calltypeH = "absolute"} ;  	

    if (calltypeV==null) {calltypeV = "absolute"} ;
    if ((calltypeV == "absoulte") || (calltypeV == "offset")) {} else  {calltypeV = "absolute"} ;  	
   
 
    var viewport = getViewportDimensions();
    var left = (viewport.width == 0) ? 50 : parseInt((viewport.width - elem.offsetWidth) / 2, 10);
    var top = (viewport.height == 0) ? 50 : parseInt((viewport.height - elem.offsetHeight) / 2, 10);

    if (calltypeH=="absolute") {
    	  left = horizontal;
    } else {
    	  left += horizontal;
   	    // if view port too narrow butt up against left hand side
    	  if (0 > left ) {left = 0;}	    
   	    // if view port too narrow butt up against right hand side
    	  if ( (left+elem.offsetWidth) > viewport.width ) {left = (viewport.width - elem.offsetWidth) ;}	    
    }
    if (calltypeV=="absolute") {
    	top = vertical;
    } else {
    	 top += vertical;	   
    }
 	  // make sure it fits into the viewport at the bottom
    if ( (top+elem.offsetHeight) > viewport.height ) {top = (viewport.height - elem.offsetHeight) ;}	
  
    elem.style.left = left + 'px';
    elem.style.top = top + 'px';

		// alert ("viewport width:" + viewport.width + " offsetWidth:" + elem.offsetWidth + " left:" + elem.style.left); 
		// alert (elem.id + " " + left+ " " + top); 
		
    elem.style.visibility = "visible";
    viewport = mapArea = left = top = elem = null;   
}

var Currentleft;    // Global variables for persistance 
var currentBottom; // Global variables for persistance
var highestElementHeight; 
var minViewportWidth = 865;
var minViewportHeight = 679;


function positionElements() {
	
	var viewport = getViewportDimensions();
	var scaleHorizontalFactor;
	var scaleVerticalFactor;
	var scaleFactor = 1.0;
	
	// If view port too small for full scale images, calculate a scaling down factor
	if ((minViewportHeight > viewport.height) || (minViewportWidth > viewport.width)) {
		scaleHorizontalFactor =  viewport.width / minViewportWidth;
		scaleVerticalFactor   =  viewport.height / minViewportHeight;
		scaleFactor =  (scaleHorizontalFactor > scaleVerticalFactor ) ? scaleVerticalFactor : scaleHorizontalFactor;
	}
	
	positionElement(1, "gordon-berg", 0, "offset", 10, "absolute", 1.0);
	positionElement(2, "belltoons-logo", 0, "offset", 0, "absolute", 1.0);

	positionElement(3, "albatross", 135, "offset", 375, "absolute", scaleFactor);
	positionElement(4, "bulldog", -145, "offset", 465, "absolute", scaleFactor);
	positionElement(5, "bush-and-blair", -15, "offset", 325, "absolute", scaleFactor);
	positionElement(6, "god", 280, "offset", 90, "absolute", scaleFactor);
	positionElement(7, "johnmajor", -330, "offset", 435, "absolute", scaleFactor);
	positionElement(8, "maggie", -215, "offset", 350, "absolute", scaleFactor);
	positionElement(9, "majormonkey", 320, "offset", 328, "absolute", scaleFactor);
	positionElement(10, "newsvendor", 330, "offset", 500, "absolute", scaleFactor);
	positionElement(11, "penguin", 10, "offset", 490, "absolute", scaleFactor);
	positionElement(12, "penguinwalrus", -400, "offset", 350, "absolute", scaleFactor);
  positionElement(13, "polarbear", 175, "offset", 478, "absolute", scaleFactor);
	positionElement(14, "whale", -215, "offset", 245, "absolute", scaleFactor);
	
	viewport = scaleHorizontalFactor = scaleVerticalFactor = scaleFactor = null; 
}