Untitled

<?php include('config.php'); ?>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="custom-script.js"></script>
  <style>
  #container {
   border: 1px solid #000;
    margin: 2% auto 0;
    width: 100%;
	clear:both;
  }
  .heading {
  border-bottom: medium none !important;
    border-image: none;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    float: left;
    width: 100%;
	}
  #container > div:last-child {
    border-bottom: medium none !important;
  }
  .heading {
  float: left; width: 100%;
  }
  .heading > div {
    border-right: 1px solid #000;
    float: left;
    height: 55px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
	}
  .heading > div:last-child {
    border-right: none;
    width: 25px;
 }

 #container > div:last-child {
    border-bottom: medium none !important;

}
 .heading > div#head-check {
    width: 60px;
}
  #content {
   float: left; width: 100%; padding-top: 1%; border-bottom: 1px solid rgb(0, 0, 0); padding-bottom: 1%;
  }
  #checklist {
  float: left; width: 10%;
  }
  #title {
  float: left; width: 13%;
  }
  #pro-image {
  float: left;
    width: 13%
  }
 #pro-content {
    float: left;
    padding-left: 10px;
    text-align: justify;
    width: 17%;
    word-wrap: break-word;
 }
 #cat-title {
  float: left; width: 9%;
 }
 .thumbnails {
    float: left;
    width: 28%;
}
  .heading > div#head-thumb {
    width: 170px;
}
  .tit-up {
   cursor: pointer;
    float: left;
    font-size: 24px;
  }
  .active {
  color:red;
  }
  .nactive {
  color:red;
  }

#content > div#pro_id {
    float: left;
    width: 50px;
}
  </style>
</head>
<title>Products</title>
<body>
<script>
$(document).ready(function() {
  $("#tit-up").on("click",function() {
    var asc_value = $("#tit-up").attr('value');
	if(asc_value == 1) {
	$('#tit-up').css('color','red!important');
	}
     $("#container").empty();
   $.ajax({
      type:'POST',
      url:'asc_result.php',
      data:'asc_value='+asc_value,
      success:function(data) {
        if(data) {
		$("#container").append(data);
		$('#preview').css("display","none");
		$('#tit-up').addClass('nactive');
        } else {
		$('#preview').css("display","none");
		}
      }
   });
	});
   });
</script>

<script>
$(document).ready(function() {
  $("#tit-down").on("click",function() {
    var desc_value = $("#tit-down").attr('value');
     $("#container").empty();
	 if(desc_value == 2) {
	 $('#tit-down').css('color','red!important');
	 }
   $.ajax({
      type:'POST',
      url:'desc_result.php',
      data:'desc_value='+desc_value,
      success:function(data) {
        if(data) {
		$("#container").append(data);
		$('#preview').css("display","none");
        } else {
		$('#preview').css("display","none");
		}
      }
   });
	});
   });
</script>

	<div style="margin: 3% auto 20px; width: 800px; float: left;">
	 <div style="float: left; width: 380px;">
	  Search Products Here: <input type="text" id="search_val" name="search">
       <input class="search" type="Submit" name="submit" value="Search">
	 </div>
	</div>
	<div style="clear:both;"></div>

	<script>
$(document).ready(function(){
 $(".search").click(function(){
   var search = $("#search_val").val();
   $("#preview").html('<img src="loader.gif" alt="Searching...."/>');
   if(search == '' || search.trim().length == 0) {
   alert("Please Enter Value");
   $('#preview').css("display","none");
   $('#search_val').focus();
   return false;
   } else {
   $("#container").empty();
   $.ajax({
      type:'POST',
      url:'search_result.php',
      data:'search_value='+search,
      success:function(data) {
        if(data) {
		$("#container").append(data);
		$('#preview').css("display","none");
        } else {
		$('#preview').css("display","none");
		}
      }
   });
   }
 });
 });
</script>

<script>
$(document).ready(function() {
  $('#slick-toggle').click(function() {
    $('img', this).attr('src', function(i, oldSrc) {
	    if(oldSrc == 'up.png') {
		 var value = 2;
		 //alert(value);
	  $("#container").empty();
		    $.ajax({
      type:'POST',
      url:'desc_result.php',
      data:'desc_value='+value,
      success:function(data) {
        if(data) {
		$("#container").append(data);
		$('#preview').css("display","none");
        } else {
		$('#preview').css("display","none");
		}
      }
   });
		} else {

	var value = 1;
	$("#container").empty();
		    $.ajax({
      type:'POST',
      url:'asc_result.php',
      data:'asc_value='+value,
      success:function(data) {
        if(data) {
		$("#container").append(data);
		$('#preview').css("display","none");
        } else {
		$('#preview').css("display","none");
		}
      }
   });
		}
        return oldSrc == 'up.png' ? 'down.png' : 'up.png';
    });
    $('#slickbox').toggle(400);
    return false;
  });
});
</script>

<div id="preview"></div>

	<div class="heading">
	    <div id="head-check">Select All <input type="checkbox" class="chkSelectAll" /></div>
		<div id="head-id">Id</div>
        <div id="head-title">Product title <div class="tit-order" style="text-align: center; width: 60px;">
  <a href="#" id="slick-toggle"><img src="up.png"/></a>
  </div></div>
		<div id="head-image">Product Image</div>
        <div id="head-desc">Product Description</div>
		<div id="head-cat">Category</div>
		<div id="head-thumb">Thumbnails</div>
		<div id="head-edit">Edit</div>
   </div>
<div id="container" align="center">

<div class="custom-main">
<?php
$query = "SELECT * FROM products ORDER BY id";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div id="content">
<div id="checklist"><input type="checkbox" class="chkNumber" value="<?php echo $row['id']; ?>"></div>
<div id="pro_id"><?php echo $row['id']; ?></div>
<div id="title"><?php echo htmlspecialchars_decode($row['title']); ?></div>
<div id="pro-image"><?php echo "<img src=\"thumbnail/" . $row['filename'] . "\" width='100' height='100'/>"; ?></div>
<div id="pro-content"><?php echo htmlspecialchars_decode($row['prod_content']); ?></div>
<?php $query2 = "SELECT title FROM categories where cat_id = ".$row['category']." ORDER BY title";
$result2 = mysql_query($query2);
$cat_title = mysql_fetch_row($result2); ?>
<div id="cat-title"><?php if(empty($cat_title)) { echo "None"; } else { echo $cat_title[0]; }?></div>
<div class="thumbnails">
<?php $id = $row['id']; ?>
<?php $thumbsql = "SELECT * from thumbnails where prod_id='".$id."'";
		         $thumbarray = mysql_query($thumbsql);
				 while($trow = mysql_fetch_assoc($thumbarray)) {
				 $imagename = $trow['imagename'];
                 echo "<img src=\"thumbnail/" . $imagename . "\" width='50' height='50' style='margin-left:10px;'/>";
                } ?>
</div>
<div id="edit"><a href="edit_product.php?id=<?php echo $row['id']; ?>">Edit</a></div>
</div>
<?php } ?>
<div style="float:left;margin-left:10px;"><span class="btnGetAll" style="float:left;cursor:pointer;">Delete Selected</span></div>
<span style="text-align:center;"><a href="addproduct.php">Add Products</a></span>
</div>
</div>
</body>
</html>