<div class="wrap">

	<?php 

	$title = '';

	$settings = array( 

		'scroll-speed' => '500',

		'easing' => 'easeOutSine',

		'hide-years' => false,

		'cat-type' => 'months',

		'number-of-posts' => '30',

		// style

		'line-width' => '920',

		'item-width' => '240',

		'item-open-width' => '490',

		'item-margin' => '20',

		'item-height' => '360',

		'read-more' => 'button',

		'close-text' => 'Close',

		'hide-line' => false,

		'line-style' => 'light',

		'hide-nav' => false,

		'nav-style' => 'light',

		'shdow' => 'show',

		'button-hover-color' => '#1986ac',

		'node-desc-color' => '#1986ac',

		// item & open item

		'item-back-color' => '#ffffff',

		'item-background' => '',

		'item-open-back-color' => '#ffffff',

		'item-open-background' => '',

		'item-image-height' => '150',

		'item-image-border-width' => '5',

		'item-image-border-color' => '#1986ac',

		'item-open-image-height' => '150',

		'item-open-content-padding' => '10',

		'item-open-image-border-width' => '5',

		'item-open-image-border-color' => '#1986ac',

		// item fonts

		'item-header-line-height' => '24',

		'item-header-font-size' => '24',

		'item-header-font-type' => 'regular',

		'item-header-font-color' => '#2d2d2d',

		'item-text-line-height' => '12',

		'item-text-font-size' => '12',

		'item-text-font-type' => 'regular',

		'item-text-font-color' => '#4d4d4d',

		// item open fonts

		'item-open-header-line-height' => '24',

		'item-open-header-font-size' => '24',

		'item-open-header-font-type' => 'regular',

		'item-open-header-font-color' => '#2d2d2d',

		'item-open-text-line-height' => '12',

		'item-open-text-font-size' => '12',

		'item-open-text-font-type' => 'regular',

		'item-open-text-font-color' => '#4d4d4d'

	);

	global $wpdb;

	if(isset($_GET['id'])) {

		global $wpdb;

		$timeline = $wpdb->get_results('SELECT * FROM ' . $wpdb->base_prefix . 'ctimelines WHERE id='.$_GET['id']);

		$timeline = $timeline[0];

		$pageName = 'Edit timeline';

	}

	else {

		$pageName = 'New timeline';

	}

	$title = $timeline->name;

	foreach(explode('||',$timeline->settings) as $val) {

		$expl = explode('::',$val);

		$settings[$expl[0]] = $expl[1];

	}

	?>

	<input type="hidden" id="plugin-url" value="<?php echo $this->url; ?>"/>

	<h2><?php echo $pageName; ?>

		<a href="<?php echo admin_url( "admin.php?page=contenttimeline" ); ?>" class="add-new-h2">Cancel</a>

	</h2>

	<div class="form_result"></div>

	<form name="post_form"  method="post" id="post_form">

	<input type="hidden" name="timeline_id" id="timeline_id" value="<?php echo $_GET['id']; ?>" />

	<div id="poststuf">

		<div id="post-body" class="metabox-holder columns-2" style="margin-right:300px; padding:0;">

			<div id="post-body-content">

				<div id="titlediv">

					<div id="titlewrap">

						<label class="hide-if-no-js" style="visibility:hidden" id="title-prompt-text" for="title">Enter title here</label>

						<input type="text" name="timeline_title" size="30" tabindex="1" value="<?php echo $title; ?>" id="title" autocomplete="off" />

					</div>

				</div>

				<h2 class="alignleft" style="padding:0 0 10px 0;">Items</h2>

				<a id="tsort-add-new" class="alignleft button button-highlighted" style="display:block; padding:3px 15px; margin:4px 10px;" href="#">+ Add New item</a>

				<div class="clear"></div>

				<ul id="timeline-sortable">

				<?php 

				if ($timeline->items != '') {

					$explode = explode('||',$timeline->items);

					$itemsArray = array();

					foreach ($explode as $it) {

						$ex2 = explode('::', $it);

						$key = substr($ex2[0],0,strpos($ex2[0],'-'));

						$subkey = substr($ex2[0],strpos($ex2[0],'-')+1);

						$itemsArray[$key][$subkey] = $ex2[1];

					}

					foreach ($itemsArray as $key => $arr) {

						$num = substr($key,4);

					?>

					<li id="<?php echo $key; ?>" class="sortableItem">

						<div class="tsort-plus">+</div>

						<div class="tsort-header">Item <?php echo $num; ?> <small><i>- <?php echo $arr['item-title']; ?></i></small> &nbsp;<a href="#" class="tsort-delete"><i>delete</i></a></div>

						<div class="tsort-content">

							<div class="tsort-dataid">

								<input type="checkbox" id="<?php echo $key; ?>-start-item" name="<?php echo $key; ?>-start-item" class="tsort-start-item alignright" <?php if($arr['start-item']) echo 'checked="checked"'; ?> />

								<label for="<?php echo $key; ?>-start-item" class="alignright">Start item &nbsp;</label> 

								<span class="timeline-help">? <span class="timeline-tooltip">Argument by which are elements organised (date - dd/mm/yyyy, Category - full category name). Different field is used for different categorizing type.</span></span>

								<label for="<?php echo $key; ?>-dataid">Date</label>

								<input style="margin-left:5px;" id="<?php echo $key; ?>-dataid" name="<?php echo $key; ?>-dataid" value="<?php echo $arr['dataid']; ?>" type="text" class="data_id" />

								<label style="margin-left:5px;" for="<?php echo $key; ?>-categoryid">Category</label>

								<input style="margin-left:5px;" id="<?php echo $key; ?>-categoryid" name="<?php echo $key; ?>-categoryid" value="<?php echo $arr['categoryid']; ?>" class="category_id" type="text"/>

								<label style="margin-left:5px;" for="<?php echo $key; ?>-node-name">Title of the timeline node (optional)</label>

								<input style="margin-left:5px;" id="<?php echo $key; ?>-node-name" name="<?php echo $key; ?>-node-name" value="<?php echo $arr['node-name']; ?>" type="text" />

							</div>

							<div class="tsort-item">

								<h3 style="padding-left:0;"><span class="timeline-help">? <span class="timeline-tooltip">Base item content (image, title and content).</span></span>Item Options</h3>

								<div class="tsort-image"><img id="<?php echo $key; ?>-item-image" src="<?php echo(($arr['item-image'] != '') ? $this->url . '/timthumb/timthumb.php?src=' . $arr['item-image'] . '&w=258&50' : $this->url . '/images/no_image.jpg'); ?>" /><a href="#" id="<?php echo $key; ?>-item-image-change" class="tsort-change">Change</a>

									<input id="<?php echo $key; ?>-item-image-input" name="<?php echo $key; ?>-item-image" type="hidden" value="<?php echo $arr['item-image']; ?>" />

									<a href="#" id="<?php echo $key; ?>-item-image-remove" class="tsort-remove">Remove</a>

								</div>

								<input class="tsort-title" name="<?php echo $key; ?>-item-title" value="<?php echo $arr['item-title']; ?>" type="text" />

								<div class="clear"></div>

								<textarea class="tsort-contarea" name="<?php echo $key; ?>-item-content"><?php echo $arr['item-content']; ?></textarea>

								<table style="width:100%;">

								<tr>

									<td style="width:120px;"><span class="timeline-help">? <span class="timeline-tooltip">"PrittyPhoto"(Lightbox) URL, it can be image, video or site url. LEAVE IT EMPTY TO DESPLAY FULL SIZED IMGAE.</span></span><label for="<?php echo $key; ?>-item-prettyPhoto">PrettyPhoto URL</label></td>

									<td><input class="tsort-prettyPhoto" name="<?php echo $key; ?>-item-prettyPhoto" value="<?php echo $arr['item-prettyPhoto']; ?>" type="text" style="width:100%;" /></td>

								</tr>

								</table>

							</div>

							<div class="tsort-itemopen">

								<h3 style="padding-left:0;"><span class="timeline-help">? <span class="timeline-tooltip">Opened item content (image, title and content).</span></span>Item Open Options</h3>

								<div class="tsort-image"><img id="<?php echo $key; ?>-item-open-image" src="<?php echo(($arr['item-open-image'] != '') ? $this->url . '/timthumb/timthumb.php?src=' . $arr['item-open-image'] . '&w=258&50' : $this->url . '/images/no_image.jpg'); ?>" /><a href="#" id="<?php echo $key; ?>-item-open-image-change" class="tsort-change">Change</a>

									<input id="<?php echo $key; ?>-item-open-image-input" name="<?php echo $key; ?>-item-open-image" type="hidden" value="<?php echo $arr['item-open-image']; ?>" />

									<a href="#" id="<?php echo $key; ?>-item-open-image-remove" class="tsort-remove">Remove</a>

								</div>

								<input class="tsort-title" name="<?php echo $key; ?>-item-open-title" value="<?php echo $arr['item-open-title']; ?>" type="text" />

								<div class="clear"></div>

								<textarea class="tsort-contarea" name="<?php echo $key; ?>-item-open-content"><?php echo $arr['item-open-content']; ?></textarea>

								<table style="width:100%;">

								<tr>

									<td style="width:120px;"><span class="timeline-help">? <span class="timeline-tooltip">"PrettyPhoto"(Lightbox) URL, it can be image, video or site url. LEAVE IT EMPTY TO DESPLAY FULL SIZED IMGAE.</span></span><label for="<?php echo $key; ?>-item-open-prettyPhoto">PrettyPhoto URL</label></td>

									<td><input class="tsort-prettyPhoto" name="<?php echo $key; ?>-item-open-prettyPhoto" value="<?php echo $arr['item-open-prettyPhoto']; ?>" type="text" style="width:100%;" /></td>

								</tr>

								</table>

								<label for="<?php echo $key; ?>-desable-scroll">Desable Scroll &nbsp;</label> 

								<input type="checkbox" id="<?php echo $key; ?>-desable-scroll" name="<?php echo $key; ?>-desable-scroll" <?php if($arr['desable-scroll']) echo 'checked="checked"'; ?> />

							</div>

						</div>

					</li>

					<?php 	

					}

				} ?>

				</ul>

				<div class="clear"></div>

				<div id="style_preview">

				</div>

			</div>

			<div id="postbox-container-1" class="postbox-container">

				<div class="postbox">

					<h3 class='hndle' style="cursor:auto"><span>Publish</span></h3>

					<div class="inside">

						<div id="save-progress" class="waiting ajax-saved" style="background-image: url(<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>)" ></div>

						<input name="preview-timeline" id="preview-timeline" value="Preview" class="button button-highlighted" style="padding:3px 25px" type="submit" />

						<input name="save-timeline" id="save-timeline" value="Save timeline" class="alignright button button-primary" style="padding:3px 15px" type="submit" />

						<img id="save-loader" src="<?php echo $this->url; ?>images/ajax-loader.gif" class="alignright" />

						<br class="clear" />		

					</div>

				</div>

				<div id="side-sortables" class="meta-box-sortables ui-sortable">

					<div id="bla1" class="postbox" >

						<div class="handlediv" title="Click to toggle"><br /></div>

						<h3 class='hndle'><span>General Options</span></h3>

						<div class="inside">

							<table class="fields-group misc-pub-section">			

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Transition speed (default 500px).</span></span>

									<label for="scroll-speed" >Scroll Speed</label>

								</td>

								<td>

									<input id="scroll-speed" name="scroll-speed" value="<?php echo $settings['scroll-speed']; ?>" size="5" type="text">	

									<span class="unit">ms</span>

								</td>				

							</tr>

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Transition easing function (default 'easeOutSine').</span></span>

									<label for="easing" >Easing</label>

								</td>

								<td>

									<select name="easing">

										<?php 

											$easingArray = array('easeInQuad', 'easeOutQuad','easeInOutQuad','easeInCubic','easeOutCubic','easeInOutCubic','easeInQuart','easeOutQuart','easeInOutQuart','easeInQuint','easeOutQuint','easeInOutQuint','easeInSine','easeOutSine','easeInOutSine','easeInExpo','easeOutExpo','easeInOutExpo','easeInCirc','easeOutCirc','easeInOutCirc','easeInElastic','easeOutElastic','easeInOutElastic','easeInBack','easeOutBack','easeInOutBack','easeInBounce','easeOutBounce','easeInOutBounce');

											foreach ($easingArray as $item) {

												echo '

										<option value="'.$item.'" '.(($item == $settings['easing']) ? 'selected="selected"' : '').'>'.$item.'</option>';

											}

										?>

									</select>

								</td>				

							</tr>

							</table>

							<div class="misc-pub-section timeline-pub-section">

								<h3 style="margin-top:0; background:transparent;"><span class="timeline-help">? <span class="timeline-tooltip">Options for categorizing your posts.</span></span>Chronological Options</h3>

								<table class="fields-group">

								<tr class="field-row">

									<td>

										<label for="hide-years">Hide Years</label>

									</td>

									<td>

										<input id="hide-years" name="hide-years" value="true" type="checkbox" <?php echo (($settings['hide-years']) ? 'checked="checked"' : '');?> />	

									</td>				

								</tr>

								<tr class="field-row">

									<td>

										<span class="timeline-help">? <span class="timeline-tooltip">Organize posts by date or some other criteria.</span></span>

										<label for="cat-type">Type</label>

									</td>

									<td>

										<select id="cat-type" name="cat-type">

											<option value="months" <?php echo (($settings['cat-type'] == 'months') ? 'selected="selected"' : ''); ?> >Months</option>

											<option value="categories" <?php echo (($settings['cat-type'] == 'categories') ? 'selected="selected"' : ''); ?>>Categories</option>

										</select>

										<?php 

?>

									</td>				

								</tr>

								<tr class="cat-display">

									<td>

										<span class="timeline-help">? <span class="timeline-tooltip">Number of posts per category/month (default 30).</span></span>

										<label for="number-per-cat">Number of posts</label>

									</td>

									<td>

										<input id="number-of-posts" name="number-of-posts" value="<?php echo $settings['number-of-posts']; ?>" size="5" type="text">

									</td>

								</tr>

								<tr class="cat-display">

									<td colspan="2" style="width:100%;">

									<h4 style="margin:0 0 5px 0; font-size:14px; border-bottom:1px solid #dddddd;">Categories:</h4>

									<?php

									$post_types=get_post_types('','names'); 

									$categories = array();

									foreach ($post_types as $post_type ) {

										if (!in_array($post_type, array('page', 'attachment', 'revision', 'nav_menu_item'))) {

									  		$newCats = get_categories(array('type' => $post_type));

											foreach ($newCats as $post_cat) {

												if (!in_array($post_cat, $categories)) {

													array_push($categories, $post_cat); 

												}

											}

										}

									}  

									$catString = '';

									foreach ($categories as $category) {

										$catString .= $category->name . '||';

										echo '

											<label for="cat-name-'.$category->term_id.'">'.$category->name.'</label>

											<input class="cat-name" name="cat-name-'.$category->term_id.'" value="'.$category->name.'" type="checkbox" '.(($settings['cat-name-'.$category->term_id]) ? 'checked="checked"' : '').'>';

										}

										if($catString != '') {

											echo '<input type="hidden" id="categories-hidden" value="'.substr($catString,0,strlen($catString)-2).'" />';

										}

									?>

									</td>

								</tr>

								<tr class="cat-display">

									<td colspan="2" style="width:100%">

										<a href="#" id="cat-check-all" class="button button-highlighted alignleft" style="padding:3px 25px" >Chech all</a>

										<a href="#" id="cat-uncheck-all" class="button button-highlighted alignright" style="padding:3px 25px" >Unchech all</a>

										<div class="clear"></div>

									</td>

								</tr>

								</table>

							</div>

						</div>

					</div><!-- /GENERAL OPTIONS -->

					<div id="bla2" class="postbox" >

						<div class="handlediv" title="Click to toggle"><br /></div>

						<h3 class='hndle'><span>Global Styling Options</span></h3>

						<div class="inside">

							<table class="fields-group misc-pub-section">	

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Width of the line element (default 920px).</span></span>

									<label for="line-width" >Timeline Width</label>

								</td>

								<td>

									<input id="line-width" name="line-width" value="<?php echo $settings['line-width']; ?>" size="5" type="text">	

									<span class="unit">px</span>

								</td>				

							</tr>

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Space between two items. If negative items overlap. (default 20px).</span></span>

									<label for="item-margin" >Item Margin</label>

								</td>

								<td>

									<input id="item-margin" name="item-margin" value="<?php echo $settings['item-margin']; ?>" size="5" type="text">	

									<span class="unit">px</span>

								</td>				

							</tr>

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Height of Item and Open item elements (default 360px).</span></span>

									<label for="item-height" >Item Height</label>

								</td>

								<td>

									<input id="item-height" name="item-height" value="<?php echo $settings['item-height']; ?>" size="5" type="text">	

									<span class="unit">px</span>

								</td>				

							</tr>

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Read more button ('Button' : adds read more button, 'Whole Item' : makes the entire item clickable, 'None' : Items don't open).</span></span>

									<label for="read-more">Read more</label>

								</td>

								<td>

									<select name="read-more" id="read-more">

										<option value="button" <?php if($settings['read-more'] == 'button') echo 'selected="selected"'; ?>>Button</option>

										<option value="whole-item" <?php if($settings['read-more'] == 'whole-item') echo 'selected="selected"'; ?>>Whole Item</option>

										<option value="none" <?php if($settings['read-more'] == 'none') echo 'selected="selected"'; ?>>None</option>

									</select>

								</td>				

							</tr>

							<tr class="field-row">

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Text of the 'Close' element in open item (default 'Close').</span></span>

									<label for="close-text" >Close button text</label>

								</td>

								<td>

									<input id="close-text" name="close-text" value="<?php echo $settings['close-text']; ?>" size="20" type="text">

								</td>				

							</tr>

							<tr>

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Hover color of 'Read More' and 'Close' buttons.</span></span>

									<label for="button-hover-color">Button hover color</label>

								</td>

								<td>

									<input id="button-hover-color" name="button-hover-color"  value="<?php echo $settings['button-hover-color']; ?>" type="text" style="background:#<?php echo $settings['button-hover-color']; ?>;">	

									<div class="cw-color-picker-holder" style="left:-70px;">

										<div id="button-hover-color-picker" class="cw-color-picker" rel="button-hover-color"></div>

									</div>

								</td>

							</tr>

							<tr>

								<td>

									<span class="timeline-help">? <span class="timeline-tooltip">Color of description bar that appears when you hover date on the timeline.</span></span>

									<label for="node-desc-color">Node description color</label>

								</td>

								<td>

									<input id="node-desc-color" name="node-desc-color"  value="<?php echo $settings['node-desc-color']; ?>" type="text" style="background:#<?php echo $settings['node-desc-color']; ?>;">	

									<div class="cw-color-picker-holder" style="left:-70px;">