function flipTarget(id) {

   // for (var c in id)

    //    alert(id[c] + " : " + c);
    
        
	//find thr card DIV id and work out if it's the flipped one or the front one
	var element = document.getElementById('card');
	//calls the webkit animation in the CSS
	element.className = (element.className == 'card') ? 'card flipped' : 'card';

	//alert(id.lastChild.src);

	//for (var c in id)
	
//alert(id + " : " + c);
	// alert(element.src)
	//switch the text
	//id.style.webkitTransform = 'rotate(360deg)'
	//id.style.webkitTransform = 'opacity(0)'
	toggle(id);
	//alert(id.className)
}

function toggle(which) {


    var title = document.getElementById('title')
    //alert(title.innerHTML)
   
   // title.style.webkitTransform = (title.innerHTML == "Listed details") ? "rotateY(-180deg)" : "rotateY(180deg)";
    title.innerHTML = (title.innerHTML == 'The Other side') ? 'Welcome!' : 'The Other side';
      //alert(title.style.opacity)
  
   // which.style.webkitTransform = 'rotate(260deg)';
  // which.className = (which.lastChild.src.indexOf("info.png") != -1) ? "fade" : "button";
  // which.lastChild.src = (which.lastChild.src == 'button buttonOn') ? 'images/refresh.png' : 'images/red_arrow.png';
    which.lastChild.src = (which.lastChild.src.indexOf("refresh.png") != -1) ? "images/close.png" : "images/refresh.png";
    which.style.webkitTransform = (which.lastChild.src.indexOf("close.png") != -1) ? "rotateY(-180deg)" : "rotateY(0deg)";

}