var data={
	"Sections":[
	    {"type" : "STRATEGY","title" : "Strategy", "body" : "<p>Research the market, define the target customer, execute and measure</p>", "url" : "", "image":"img_strategy.jpg"},
	    {"type" : "DESIGN","title" : "Graphic Design", "body" : "<p>Research the industry, interpret the psychological approach, paint the town</p>", "url" : "", "image":"img_design.jpg"},
	    {"type" : "VIDEO","title" : "Video Production", "body" : "<p>Stunning custom video and animation, produced and directed to sell</p>", "url" : "", "image":"img_video.jpg"},
	    {"type" : "HOSTING","title" : "Hosting", "body" : "<p>24 Hour worry free data management.  We’d like to think that we can help you can sleep better at night.</p>", "url" : "", "image":"img_hosting.jpg"},
	    {"type" : "SEO","title" : "Search Engine Optimization", "body" : "<p>Bringing you top notch search engine results so you don’t get buried by the competition</p>", "url" : "", "image":"img_seo.jpg"},
	    {"type" : "DEVELOPMENT","title" : "Web Development", "body" : "<p>Engineering your vision into a secure, bulletproof, scalable, and easily managed environment</p>", "url" : "", "image":"img_development.jpg"}
	]
}

currentSelected = null;
function showOver(obj){
    if(obj != null)
        if(obj.id != currentSelected)
            obj.style.backgroundPosition = "0px -64px";
}

function showOut(obj){
    if(obj != null)
        if(obj.id != currentSelected)
            obj.style.backgroundPosition = "0px 0px";
}

function showOn(obj, daType){
    if(obj != null)
        if(obj.id != currentSelected){
          obj.style.backgroundPosition = "0px -128px";
          oldCS = currentSelected;
          currentSelected = obj.id;
          showOut(document.getElementById(oldCS));
          
          flipIt(daType)
        }  
}


function loadData(sType){
    for(var i=0;i<data.Sections.length;i++){
        a = data.Sections[i]
        if(a.type == sType){
        
            txt="<div style='height:90px;width:220px;float:left;'><h2>" + a.title + "</h2>" + a.body + "</div>";
            txt+="<div><center><img src='images/" + a.image + "'/></center></div>"
            
            $("#sectionText").html(txt);
        }
    }
}

function flipIt(sType){
    var aa = ["top","bottom","right","left"];
    
    var rand_no = Math.random();
    rand_no = parseInt(rand_no * 4);

	$("#flip1").flip({
		dir: aa[rand_no-1],
		endColor: "#1f1f1f",
		duration:400,
		onEnd: function(){
		    loadData(sType)
		/*
			$("#flip1").html("TOP");
			$("#flip1").css({
				color: "#dddddd",
				background: "#666666"
			});  
			*/
		}
	});
}