jQuery(document).ready(function ()
	{
		devicesJson = eval(twitterCardDevices);
		if(!devicesJson.error)
		{
			var twitter_devices_to_show = new Array();
			for(var i = 1; i < devicesJson.length; i++)
			{
				if(devicesJson[i].item_code == "PK-KIT-401" || devicesJson[i].item_code == "PK-KIT-403")
				{
					twitter_devices_to_show = twitter_devices_to_show.concat(devicesJson[i]);
				}
			}
			
			loadDevices(twitter_devices_to_show);
			/* load large image */
			var prices = devicesJson[0];
			
			plansJson = eval(twitterCardPlans);

			$("#plans-json").val(twitterCardPlans);

			loadPlans(plansJson,prices);

			defaultDevice = devicesJson[1];

			changeLargeImage(defaultDevice.color,defaultDevice.large_image,defaultDevice.name);

			jQuery("#productGid").val(defaultDevice.gid);
		
		}
		else
		{
			alert('Can not get devices available for twitter');
		}
	}
);	


$(document).ready(function(){

	$('.tabs a').click(function(){
		$(this).parents('.xtra').find('.tab').hide();
		$(this).parents('.tabs').find('li').removeClass('active');
		$(this.parentNode).addClass('active');
		$('#' + this.id.split('-')[1]).show();
		return false;
	});
	$('.order .colors a').click(function(){
		var t = this.parentNode.className;
		var p = $(this).parents('.order');
		p.find('.hero').hide().filter('.hero-' + t).show();
		p.find('input[name="color"]').val(t);
		return false;
	});

});

function loadDevices(json)
{
	var colorsDiv = $('.order .colors');
		
	colorsDiv.append("<label>Available Colors</label>\n");
		var i = 0;
		for(i=0;i < json.length; i++)
		{
			device = json[i];
			div = document.createElement("div");
			$(div).attr("class",device.color);
			 	a = document.createElement("a");
				$(a).attr("style","cursor:pointer");
				$(a).attr("id","device-link-" + device.gid)
				img = document.createElement("img");
				$(img).attr("class","swatch");
				$(img).attr("src","landing/img/color-" + device.color + "-off.gif");
				
				$(a).append(img);
				
			$(div).append(a);
			$(colorsDiv).append(div);
			
			var msg = "test" + device.gid + " id: " + "device-link-" + device.gid ;
			
			$(a).click(function (){
				id = this.id.split("-")[2]
				all_of_the_devices = twitterCardDevices; //$("#devicesJson").val();
				var device = null;
				for(var i = 1; i < all_of_the_devices.length;i++)
				{
					if(id == all_of_the_devices[i].gid)
					{
						device = all_of_the_devices[i];
					}
				}
				changeDevice(device.gid, device.color , device.large_image ,  device.item_code );
				return false;
			});
			
		}
	
}


function loadPlans(json,prices)
{
	var plans_div = $("#plans");
	
	jQuery.each(json,function(i,plan)
		{
			option_div = document.createElement("div");
			$(option_div).attr("class","option");
			
			radio_input = document.createElement("span");
			
			
			radio_input_html = "<input";
			radio_input_html += " type='radio' ";
			radio_input_html += " name='generic_twitter_plan_gid' ";
			radio_input_html += " onclick='changeDeviceBasedOnPlan(" + plan.plan_gid + ")'";
			
			if(i == 0)
			{
				radio_input_html += " checked='checked'";
				$("#twitter_plan_gid").val(plan.plan_gid);
			}
			$(radio_input).html(radio_input_html + "/>");
			
			/* description */
			desc_div = document.createElement("div");
			$(desc_div).attr("class","desc");
			plan_name = document.createElement("h3");
			$(plan_name).text(plan.name);
			description = document.createElement("p");
			$(description).text(plan.description);
			
			$(desc_div).append(plan_name);
			$(desc_div).append(description);
			
			var price;
			
			/* 
				Basic or life time prices should be comming from device 
				not plan
				
			*/
			
			if(plan.item_code == "TW-BASIC")
			{
				price = prices.basicPrice;
			}
			else if(plan.item_code == "TW-LIFETIME")
			{
				price = prices.lifeTimePrice;
			}
			
			price = price.split(".");
			dollars = price[0];
			cents = price[1];
			
			price = document.createElement("div");
			$(price).attr("class","price");
			price_span = document.createElement("span");
			
			$(price_span).text("." + cents);
			
			$(price).text(dollars);
			$(price).append(price_span);
			
			
			
			$(option_div).append(radio_input);
			$(option_div).append(desc_div);
			$(option_div).append(price);
			
			$(plans_div).append(option_div);
		
		}
	);
}

function changeDeviceBasedOnPlan(plan_gid)
{
	$("#twitter_plan_gid").val(plan_gid);
	
	lifeTimePlan = isLifeTimePlan(plan_gid);
	
	var device = findDevice(jQuery("#productGid").val());
	
	product = getTwitterDeviceBasedOnPlanType(lifeTimePlan,device.item_code);
	
	jQuery("#productGid").val(product.gid );
	
	$("#device-large-image .hero p").text(product.name);
	
	return false;
	
}

function changeDevice(id,color,large_image,item_code)
{
	plan_gid =  $("#twitter_plan_gid").val(); 
	
	
	isLifeTime = isLifeTimePlan(plan_gid);
	
	product = getTwitterDeviceBasedOnPlanType(isLifeTime,item_code);
	
	jQuery("#productGid").val(product.gid );

	changeLargeImage(color,large_image,product.name);
	
	return false;
}

function changeLargeImage(color,large_image,name)
{
	var colorsDiv = $('.order .colors');
	large_image_div = document.createElement("div");
	$(large_image_div).attr("class","hero hero-" + color);
	img = document.createElement("img");
	$(img).attr("src","/common/large/" + large_image);
	
	device_name = document.createElement("p");
	$(device_name).text(name)
	
	$(large_image_div).append(device_name);
	$(large_image_div).append(img);
	
	$("#device-large-image").html("");
	$("#device-large-image").append($(large_image_div));
	
	return false;
}


function getTwitterDeviceBasedOnPlanType(lifeTimePlan,item_code)
{
	// The idea here to get a device based on the plan.
	// Devices suitable for lifetime will have -L as suffix on item_code
	devices = twitterCardDevices; 
	
	for(var i = 1; i < devices.length; i++)
	{
			if(lifeTimePlan)
			{
				if(devices[i].item_code == item_code + "-L")
				{
					return devices[i];
				}
			}
			else
			{
				if(devices[i].item_code == item_code.replace("-L",""))
				{
					return devices[i];
				}
			}
			
	}
	return "";
}

function isLifeTimePlan(plan_gid)
{
	all_plans =  twitterCardPlans;
	
	lifeTimePlan = false;
	
	jQuery.each(all_plans,function(i,plan){
			if(plan.plan_gid == plan_gid)
			{
				lifeTimePlan = (plan.billingCycle == 'None');
			}
		}
	);
	
	return lifeTimePlan;	
}

function findDevice(id)
{
	devices = twitterCardDevices; 
	
	for(var i = 1; i < devices.length; i++)
	{
		if(devices[i].gid == id)
		{
			return devices[i];
		}
	}
	return null;
}