// list of install data

urls = ['js/installs/iPodIntegration.js',
		'js/installs/handsFreeKits.js',
		'js/installs/satelliteRadios.js',
		'js/installs/navigation.js',
		'js/installs/radarLaserJammers.js',
		'js/installs/cameras.js',
		'js/installs/videoEntertainment.js',
		'js/installs/soundDeadening.js',
		'js/installs/hdRadios.js',
		'js/installs/windowTinting.js',
		'js/installs/securitySystems.js',
		'js/installs/remoteStarters.js',
		'js/installs/gpsTracking.js',
		'js/installs/xenonHeadlightUpgrade.js',
		'js/installs/customFab.js',
		'js/installs/wheelsPackages.js',
		'js/installs/porscheCup.js',
		'js/installs/porscheSub.js',
		// full system installs - next line is 18
		'js/installs/hondaAccordCustomRoadster.js',
		'js/installs/porsche997TCab.js',
		'js/installs/GMCFox2500.js',
		'js/installs/scionXB06Novint.js',
		'js/installs/cadillacEXT07MR.js',
		'js/installs/porscheCayenne.js',
		'js/installs/lamborghiniGallardo.js',
		'js/installs/1970Porsche.js',
		'js/installs/simSupra.js',
		'js/installs/1994Porsche911.js',
		'js/installs/fordF150HD.js',
		'js/installs/tRex.js', 
		// full system installs - next line is 30
		'js/installs/ferrariSpyder.js',
		'js/installs/mercedesS550.js',
		'js/installs/cadillacEscalade06.js',
		'js/installs/fordTbucket.js',
		'js/installs/cadillaceFleet04.js',
		'js/installs/audiA3Computer.js',
		'js/installs/bmw330xi06.js',
		'js/installs/rangeRover03.js',
		'js/installs/lincoln65.js',
		'js/installs/scionXB05.js',
		'js/installs/ramirezChrystler.js',
		'js/installs/tahoePats.js',
		// two porsche upgrade installs - next line is 42
		'js/installs/porscheDoorFix.js',
		'js/installs/porscheSpeakerFix.js',
		'js/installs/ramirezCadillac.js',
		'js/installs/hummerH205.js',
		'js/installs/murano.js',
		'js/installs/acuraNSX.js',
		'js/installs/hummerH102.js',
		
		'js/installs/installsFullSystem.js'		
		];

$('ul#installsList a').click(function() {
		getData(this.attr('url'));
		});



// get JSON photos data
getData = function(urlID) {
		$.ajax({
				url: urls[urlID],
				type: "GET",
				dataType: "json",
				contentType: "application/json;charset=UTF-8",
				success: function(data) { JSON_loaded(data) }
		});
};


// Once JSON is loaded fill in the data and then setup colorbox image viewer
function JSON_loaded(data){
		setInstallTitle(data.install_title);
		setInstallDescription(data.install_description);
        $.each(data.photos, function(i,photo){
				appendPhoto(i,photo);
				appendInstall(i,photo);
		});
		$("a[rel='installs']").colorbox({slideshow:true, slideshowAuto: false, slideshowSpeed: 6500});
		
		$(".installDetailContainer").each(function(){ 
			$(this).find("a[rel='installs']").colorbox({title:  $(this).find('.installDetailText p').text() });
		}); 
}




// build install main page photo li
appendInstall = function(i,photo) { 
       var li = '';
       
       li += '<li class="installContainer">';

       li += '<a href="installsDetail.html">'; // add href to detail page
       li += '<img src="' + photo.icon_url + '" />'; // add image
       li += '</a>'; // close thumb a
       
       li += '<div class="installText">';
       li += '<p>' + photo.description + '</p>';
       li += '<span>';
       li += '<a class="installLink" href="installsDetail.html">' +photo.install_title+ '</a>';
       li += '</span>'; 
       
       li += '</div>'; // close info div
       
       // append
       $('#installsList').append(li);
};




// build install detail page photo li
appendPhoto = function(i,photo) { 
	var li = '';
	
	li += '<li class="installDetailContainer">';

	li += '<a href="' + photo.photo_url + '" rel="installs" style="background: url(' + photo.thumb_url + ') no-repeat top left;">'; // add href and image to detail page
	li += '</a>'; // close thumb a
	
	li += '<div class="installDetailText">';
	li += '<p>' + photo.description + '</p>';
	
	li += '</div>'; // close info div
	
	// append
	$('#installsGallery').append(li);
};


// set each install title
setInstallTitle = function(title) { 
	$('#installTitle').html(title);
};

// set intro detail to categry installation pages
setInstallDescription = function(description) { 
	$('#installDescription').html(description);
};





// DOM ready
$(document).ready(function(){
	if (getQueryVariable && getQueryVariable('id')) getData(getQueryVariable('id'));
	$(".aboutPage .boxRight a").colorbox();
	$(".plaquePage #content a").colorbox();
	
	//$("#categoryImage").addClass('fullSystem');
	


	
});