var Clik = {};


Clik.image = null;
Clik.map = null;
Clik.imgW = null;
Clik.imgH = null;

Clik.isLoaded = false;
Clik.imgPos = 0;
Clik.t = 0;

Clik.put = function() {
	var flag = false;
	
	Clik.image = null;
	Clik.map = null;
	Clik.imgW = null;
	Clik.imgH = null;

	Clik.image = new Array();
	Clik.map = new Array();
	Clik.imgW = new Array();
	Clik.imgH = new Array();
	Clik.imgPos = 0;
	Clik.t = 0;
	
	//alert(Clik.image.length);

	if(typeof arguments[0] == 'string')	//2 part,3 part,4 part
		Clik.image[0] = arguments[0];

	if(typeof arguments[1] == 'string')	//2-part,3 part,4 part
		Clik.image[1] = arguments[1];

	if(typeof arguments[2] == 'object')	//2 part
		Clik.map[0] = arguments[2];
	else if(typeof arguments[2] == 'string') //3 part,4 part	
		Clik.image[2] = arguments[2];

	if(typeof arguments[3] == 'object') // 3 part
		Clik.map[0] = arguments[3];
	else if(typeof arguments[3] == 'string') //4 part  
		Clik.image[3] = arguments[3];
	else if(typeof arguments[3] == 'boolean') //2 part
		flag = arguments[3];

	if(typeof arguments[4] == 'object' && typeof arguments[3] == 'object') //3 part
		Clik.map[1] = arguments[4];  
	else if(typeof arguments[4] == 'object' && typeof arguments[3] == 'string') // 4 part
		Clik.map[0] = arguments[4];
	
	if(typeof arguments[5] == 'object') // 4 part
		Clik.map[1] = arguments[5];		
	else if(typeof arguments[5] == 'boolean') //3 part
		flag = arguments[5];

	if(typeof arguments[6] == 'object') // 4 part
		Clik.map[2] = arguments[6];		
	
	if(typeof arguments[7] == 'boolean') //4 part
		flag = arguments[7];

	//if(parseInt(document.getElementsByTagName('base').length)){
	for(var s=0;s<Clik.map.length;s++){
		if(parseInt(document.location.href.indexOf('#')) == -1){
			Clik.map[s].href = document.location.href + Clik.map[s].href;
		}else{			
			Clik.map[s].href = document.location.href.substring(0,document.location.href.indexOf('#')) +  Clik.map[s].href;			
		}
	}
	//}

	Clik.imgPos = 0;
	Clik.preloadImages(Clik.image);
	Clik.setMap(Clik.map);
	
	//alert(Clik.map[0].coords)

	flag = flag || false;	
	if(!flag) {				
		var HTML = Clik.createMapHTML(Clik.imgPos);
		document.write(HTML);
	}

	Clik.setHeight();
	Clik.t = setInterval("Clik.setImgSize(Clik.image)",500);

	document.body.onresize = Clik.setReplayPos;
};

Clik.preloadImages = function() {
    var imgArr = arguments[0];
	for(var i=0;i<imgArr.length;i++){
		var imgNm = imgArr[i];
		Clik.image[i] = new Image();
		Clik.image[i].src = imgNm;
	}
};

Clik.setMap = function(){
	var mapArr = arguments[0];
	for(var i=0;i<mapArr.length;i++){		
		for ( var property in mapArr[i]) {
			Clik.map[i][property] = mapArr[i][property];
			//alert(mapArr[i][property]+'---'+Clik.map[i][property]);
		}
	}	
};

Clik.createMapHTML = function(){
	var pos = arguments[0];
	var mapStr = [];
	
	mapStr.push('<map id="cardimage_map" name="' + Clik.map[pos].name + '">');
	mapStr.push('<area id="cardimage_area" shape="' + Clik.map[pos].shape + '" coords="' + Clik.map[pos].coords + '" href="' + Clik.map[pos].href + '" onclick="Clik.swap();" onfocus="this.blur();">');
	mapStr.push('</map>');
	mapStr.push('<img border="0" id="cardimage" src="' + Clik.image[pos].src + '" usemap="#' + Clik.map[pos].name + '">');
	return mapStr.join('');
};

Clik.swap = function(){
	Clik.imgPos = Clik.imgPos + 1;
	//alert(Clik.image.length+'---'+Clik.imgPos);

	if(Clik.image.length == Clik.imgPos+1){
		//Last card
		document.getElementById('cardimage_area').shape = 'rect';
		document.getElementById('cardimage_area').coords = '0,0,0,0';
		//document.getElementById('cardimage_area').href = '#';
		document.getElementById('cardimage_area').onclick ='';
		document.getElementById('cardimage').src = Clik.image[Clik.imgPos].src;
		document.getElementById('audio_panel_holder').style.width = Clik.imgW[Clik.imgPos] + 'px';		

		Clik.createReplay();
		

	}else{
		document.getElementById('cardimage_map').name = Clik.map[Clik.imgPos].name;
		document.getElementById('cardimage_area').shape = Clik.map[Clik.imgPos].shape;
		document.getElementById('cardimage_area').coords = Clik.map[Clik.imgPos].coords;
		document.getElementById('cardimage_area').href = Clik.map[Clik.imgPos].href;
		document.getElementById('cardimage_area').onclick = Clik.swap;
		document.getElementById('cardimage').src = Clik.image[Clik.imgPos].src;
		document.getElementById('cardimage').usemap = '#' + Clik.map[Clik.imgPos].name;

		document.getElementById('audio_panel_holder').style.width = Clik.imgW[Clik.imgPos] + 'px';
	}
};


Clik.createReplay = function () {	
	//var bottom_right = Clik.getPosX(img) + img.width - 52;
	//var top_right = Clik.getPosY(img) + img.height - 20;
	var winWidth = window.innerWidth - 16 || document.body.offsetWidth - 20;	
	
	var x = eval(winWidth - Clik.imgW[Clik.imgPos]);
	var y = Math.ceil(x/2);	
	var url = window.location.href;
	var bottom_right = y + Clik.imgW[Clik.imgPos];
	
	if ((bottom_right<"690") && (bottom_right!="677")){
		bottom_right+=20;
	}
   
	bottom_right = (url.substring(url.lastIndexOf("/")+1,url.length-1).indexOf('card_') == -1) ? bottom_right-52 : bottom_right - 202;
	if(Clik.getPosY(document.getElementById('cardimage'))<"400"){
		var z=Clik.getPosY(document.getElementById('cardimage'))+10;
	}
	else{
		
		z=Clik.getPosY(document.getElementById('cardimage'));
	}
	var top_right = z + Clik.imgH[Clik.imgPos] + 9;
	var sp = document.createElement('span');
	sp.id = 'replay';
	sp.setAttribute('id','replay');
	sp.width = 45;
	sp.style.border=1;
	sp.style.fontSize = 12 + 'px';
	sp.style.fontFamily = 'Comic Sans Ms';
	sp.style.fontWeight = 'bold';
	sp.style.color = '#0000CC';
	sp.style.cursor = 'pointer';
	sp.style.position = 'absolute';
	sp.title = 'Replay the animation';
	sp.style.top = top_right + 'px';
	sp.style.left = bottom_right + 'px';
	sp.appendChild(document.createTextNode('REPLAY'));
	sp.onclick = Clik.replay;
	document.body.appendChild(sp);
};

Clik.replay = function(){
	
	Clik.removeReplay();
	Clik.imgPos = -1;
	Clik.swap();
	try{		
		
		//document.rakpanel.stop();
		//startplay();		
		//window.setTimeout("startplay()",200);
		if(!musicIsStop){			
			document.rakpanel.stop();
			startplay();
			//window.setTimeout("startplay()",200);
		}
	}catch(ex){}

};


Clik.removeReplay = function(){
	while(document.getElementById('replay')){
		document.getElementById('replay').parentNode.removeChild(document.getElementById('replay'));
	}
};


Clik.setReplayPos = function(){	
	if(document.getElementById('replay')){
		var url = window.location.href;
		var bottom_right = Clik.getPosX(document.getElementById('cardimage')) + Clik.imgW[Clik.imgPos];
		bottom_right = (url.substring(url.lastIndexOf("/")+1,url.length-1).indexOf('card_') == -1)?bottom_right-48:bottom_right-55;
		
		//var bottom_right = Clik.getPosX(document.getElementById('cardimage')) + Clik.imgW[Clik.imgPos] - 48;
		var top_right = Clik.getPosY(document.getElementById('cardimage')) + Clik.imgH[Clik.imgPos] + 8;
		//var winWidth = window.innerWidth - 16 || document.body.offsetWidth - 20;	
		//var x = eval(winWidth - Clik.imgW[Clik.imgPos]);
		//var y = Math.ceil(x/2);
		//var bottom_right = y + Clik.imgW[Clik.imgPos] - 52;
		//var top_right = Clik.getPosY(document.getElementById('cardimage')) + Clik.imgH[Clik.imgPos] + 6;


		document.getElementById('replay').style.top = top_right + 'px';
		document.getElementById('replay').style.left = bottom_right + 'px';
	}
};


Clik.setHeight = function(){
	var url = window.location.href;
	if(url.substring(url.lastIndexOf("/")+1,url.length-1).indexOf('card_') == -1){
		var targ = document.getElementById('cardimage');
		while (targ.nodeName != 'TR'){
			targ = targ.parentNode;
		}
		if(targ){	
			targ.style.height = '600px';
		}
	}
};


Clik.setImgSize = function(){
    var imgArr = arguments[0];
	for(var i=0;i<imgArr.length;i++){
		Clik.imgW[i] = imgArr[i].width;
		Clik.imgH[i] = imgArr[i].height;
	}
	
	if(Clik.imgW[0] && Clik.imgW[1] && (Clik.imgW[2] || typeof Clik.imgW[2] == 'undefined')){
		clearInterval(Clik.t);
		//alert("Clear timeout");
	}
	//alert(Clik.imgW[0]+'---'+Clik.imgW[1]+'---'+Clik.imgW[2]+'---'+Clik.imgW[3]);
};

Clik.getPosX = function(obj) {
    if(typeof obj != 'object') obj = document.getElementById(obj);
	var leftPos = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			leftPos += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	}
	else if (obj.x) {
		leftPos += obj.x;
	}
	return parseInt(leftPos);
};


Clik.getPosY = function(obj) {
    if(typeof obj != 'object') obj = document.getElementById(obj);
			
	var topPos = 0;			
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			topPos += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.y) {
		topPos += obj.y;
	}
	return parseInt(topPos);
};