// Set the current window

var window = Titanium.UI.currentWindow;

// Include the API file

Ti.include("public_api.js");

// Create the delete button

var button_delete = Titanium.UI.createButton({
	title: 'Delete'
});

// Add the add button to the navigation

window.setRightNavButton(button_delete);

// Create the main view

var main = Titanium.UI.createView({
    width: 320,
    height: 90
});

// Create the profile view

var profile = Titanium.UI.createView({
    width: 320,
    height: 90,
    backgroundImage:'../images/1.png'
});

// Create the avatar view

var profile_avatar = Titanium.UI.createImageView({
	image:'../images/avatar.jpg',
	left: 20,
	top: 20,
	width: 48,
	height: 48,
	borderRadius: 5
});

profile.add(profile_avatar);

// Create the fullname label

var profile_fullname = Titanium.UI.createLabel({
	text:'Petter Palander',
	font:{fontSize: 16,fontWeight: 'bold'},
	width: 'auto',
	textAlign: 'left',
	top: 18,
	left: 78,
	height: 18
});

profile.add(profile_fullname);

// Create the status message

var profile_message = Titanium.UI.createLabel({
	text: 'I had a very shiny day and it was all good and then we saw the light yes sir!',
	color: '#333',
	font: {fontSize: 12,fontWeight: 'normal'},
	width: 200,
	textAlign: 'left',
	top: 32,
	left: 78,
	height: 40
});

profile.add(profile_message);

// Create the profile view

var message = Titanium.UI.createView({
    width: 320,
    height: 90,
    backgroundImage:'../images/1.png'
});

// Create the avatar view

var message_avatar = Titanium.UI.createImageView({
	image:'../images/appicon.png',
	left: 20,
	top: 20,
	width: 48,
	height: 48,
	borderRadius: 5
});

message.add(message_avatar);

// Create the title label

var message_title = Titanium.UI.createLabel({
	text:'Latest message',
	font:{fontSize: 16,fontWeight: 'bold'},
	width: 'auto',
	textAlign: 'left',
	top: 18,
	left: 78,
	height: 18
});

message.add(message_title);

// Create the status message

var message_message = Titanium.UI.createLabel({
	text: 'Working hard to get the ambadoo iPhone app to the app store.',
	color: '#333',
	font: {fontSize: 12,fontWeight: 'normal'},
	width: 200,
	textAlign: 'left',
	top: 32,
	left: 78,
	height: 40
});

message.add(message_message);

// Create the bio view

var bio = Titanium.UI.createView({
    width: 320,
    height: 90,
    backgroundImage:'../images/1.png'
});

// Create the about label

var bio_about = Titanium.UI.createLabel({
	text:'About',
	font:{fontSize: 16,fontWeight: 'bold'},
	width: 'auto',
	textAlign: 'left',
	top: 18,
	left: 20,
	height: 18
});

bio.add(bio_about);

// Create the bio message

var bio_message = Titanium.UI.createLabel({
	text: 'This is a cool text about me!',
	color: '#333',
	font: {fontSize: 12,fontWeight: 'normal'},
	width: 200,
	textAlign: 'left',
	top: 24,
	left: 20,
	height: 40
});

bio.add(bio_message);

// Create the scrollview

var scrollView = Titanium.UI.createScrollableView({
    views:[profile,message,bio],
    showPagingControl:true,
	pagingControlColor: '#333',
    clipViews:true,
    top:0,
    left:0,
    right:0,
    height:90,
    opacity:1
});

// Animate scrollview

scrollView.animate({
    opacity:1,
    duration:500
});

// Create drop shadow for main view

var dropshadow = Titanium.UI.createImageView({
	image: '../images/dropshadow.png',
	top: 100,
	width: 320,
	height: 14,
	zIndex: 10
});

// Create the container for the contact information

var container = Titanium.UI.createScrollView({
	contentWidth: 'auto',
	contentHeight: 'auto',
	top: 100,
	showVerticalScrollIndicator: true,
	showHorizontalScrollIndicator: false

});

// Create the current position map

var cp_map = Titanium.Map.createView({
	mapType: Titanium.Map.STANDARD_TYPE,
	region: {
		latitude: 5.345,
		longitude: 100.30442344,
		latitudeDelta: 0.5,
		longitudeDelta: 0.5,
		animate: false,
		regionFit: true,
		userLocation: true
	},
	width: 300,
	height: 70,
	top: 15,
	left: 10,
	borderRadius: 5,
	borderWidth: 1,
	borderColor: '#999'
});

// Create the map label

var cp_label = Titanium.UI.createLabel({
	text: 'Hydro Hotel, Penang',
	font: {fontSize: 12,fontWeight: 'bold'},
	width: 'auto',
	height: '14',
	top: 90,
	left: 20,
	textAlign: 'left',
	color: '#222',
	shadowColor: '#fff',
	shadowOffset: {x:0, y:1}
});

// Map Overlay Hack to be albe to click the map for big view. There's probably a better way to do this.

var cp_overlay = Titanium.UI.createView({
	width: 300,
	height: 70,
	top: 15,
	left: 10,
	zIndex: 2
});

// Creat the window to display the full map

var mapview = Titanium.UI.createWindow({
	title: 'Location on map',
	backgroundColor: '#eee',
	barColor: '#f09',
	tabBarHidden: true,
	url: 'map.js'
});

// Click Map to open Full Screen Map View

cp_overlay.addEventListener('click', function(e){
	Titanium.UI.currentTab.open(mapview,{animated:true});
});

// Create the tag labels

var tags = Titanium.UI.createLabel({
	text: 'sswc, iphone, apple, sweden, stockholm, developer, css, javascript',
	font: {fontSize: 14,fontWeight: 'bold'},
	top: 0,
	left: 20,
	height: 'auto',
	width: 300,
	color: '#444',
	shadowColor: '#fff',
	shadowOffset: {x:0, y:1},
	textAlign: 'left'
});

// Create the lastUpdated label

var lastUpdated = Titanium.UI.createLabel({
	text: 'Last Updated: 14/3/2011 11:34',
	font: {fontSize: 13,fontWeight: 'normal'},
	top: 30,
	height: 33,
	width: 320,
	color: '#444',
	shadowColor: '#fff',
	shadowOffset: {x:0, y:1},
	textAlign: 'center'
});

// Create the table header view

var headerView = Ti.UI.createView({
	height:110
});

// Create the table footer view

var footerView = Ti.UI.createView({
	height:60
});

// Add labels to header view

headerView.add(cp_map);
headerView.add(cp_label);
headerView.add(cp_overlay);

// Add labels to footer view

footerView.add(tags);
footerView.add(lastUpdated);

// Create the main table

var table = Titanium.UI.createTableView({
	opacity: 1,
	width:320,
	backgroundColor:'transparent',
	separatorStyle:Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
	style: Titanium.UI.iPhone.TableViewStyle.GROUPED,
	headerView:headerView,
	footerView:footerView,
	scrollable: true,
	editable: true
});

// Create a new section

var phones_section = Titanium.UI.createTableViewSection({});

// Create a custom phones title

var phones_title = Ti.UI.createView({height:'auto'});

// Create a custom phones label

var phones_title_label = Ti.UI.createLabel({
    top:5, bottom:6, left:20,
    height:'auto',
    text:'Phones',
    color: '#333',
	shadowColor: '#fff',
	shadowOffset: {x:0, y:1},
    font:{fontSize:16, fontWeight:'bold'}
});

// Create the add phone label

var phones_add_label = Titanium.UI.createLabel({
	width:'auto',
	height:'auto',
   	top: 5,
   	right: 10,
   	bottom: 5,
   	text: 'Add',
    color: '#333',
	shadowColor: '#fff',
	shadowOffset: {x:0, y:1},
    font:{fontSize:14, fontWeight: 'bold'}
});

// Add the label to the phones title

phones_title.add(phones_title_label);

// Add the custom header to the section

phones_section.headerView = phones_title;

for (var i = 0; i < 5; i++)
{
	// Create a row for the section

	var row = Titanium.UI.createTableViewRow({
		header: 'Phones',
		height: 50,
		backgroundColor: 'transparent',
		color: '#000',
		opacity: 0.5,
		selectedBackgroundColor: '#ddd', hasChild: true});

	// Create the title label

	var desc = Titanium.UI.createLabel({
		text: 'Mobile',
		font: {fontSize: 16,fontWeight: 'bold'},
		height: 16,
		left: 9,
		top: 8,
		width: 'auto',
		textAlign: 'left',
		color: '#333',
		shadowColor: '#fff',
		shadowOffset: {x:0, y:1}
	});

	// Create the value label

	var value = Titanium.UI.createLabel({
		text: '+46 303044402',
		font: {fontSize: 12,fontWeight: 'normal'},
		height: 12,
		left: 9,
		top: 30,
		width: 'auto',
		textAlign: 'left',
		color: '#888',
		shadowColor: '#fff',
		shadowOffset: {x:0, y:1}
	});

	// Add the desc to the row

	row.add(desc);

	// Add the value to the row

	row.add(value);

	// Add the row to the section

	phones_section.add(row);
}

// Get the section from the other file

var section = loadPhones();

// Add sections to the table

table.setData([section]);

// Create the profile message event listener

profile_message.addEventListener('click', function()
{
	// Create the new window

	var win = Titanium.UI.createWindow({
        url:'../profile/lifestream.js',
        title:'Lifestream',
        barColor: '#f09'
    });

 	// Animate the page turn

    Titanium.UI.currentTab.open(win);

});

// Create the button delete event listener

button_delete.addEventListener('click', function()
{
	// Create the new window

	alert("Removing the contact");

});

// Create the tags event listener

tags.addEventListener('click', function()
{
	// Create the new window

	var win = Titanium.UI.createWindow({
        url:'../profile/tags.js',
        title:'People with #tag',
        barColor: '#f09'
    });

 	// Animate the page turn

    Titanium.UI.currentTab.open(win);

});

// Add table to the container view

container.add(table);

// Add dropshadow view to the window

window.add(dropshadow);

// Add main view to the window

window.add(main);

// Add scrollview to the window

window.add(scrollView);

// Add container view to the window

window.add(container);