Wordpress Loop Special Html Output - php

Question

I am trying to get a special wordpress loop html output:
<div id="main">
<!-- Line number 1 -->
<div class="article-thumbnail" data-target="article-1" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-2" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-3" >
<div class="article-open"><img src="" /></div>
</div>
<div class="container">
<article id="article-1" class="article-entry">
<header class="article-header">
<h2>This is the article 1 text</h2>
</header>
<div class="article-body">
<p>This is the article 1 body</p>
</div>
</article>
<article id="article-2" class="article-entry">
<header class="article-header">
<h2>This is the article 2 text</h2>
</header>
<div class="article-body">
<p>This is the article 2 body</p>
</div>
</article>
<article id="article-3" class="article-entry">
<header class="article-header">
<h2>This is the article 3 text</h2>
</header>
<div class="article-body">
<p>This is the article 3 body</p>
</div>
</article>
</div>
<!-- Line number 2 -->
<div class="article-thumbnail" data-target="article-4" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-5" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-6" >
<div class="article-open"><img src="" /></div>
</div>
<div class="container">
<article id="article-4" class="article-entry">
<header class="article-header">
<h2>This is the article 4 text</h2>
</header>
<div class="article-body">
<p>This is the article 4 body</p>
</div>
</article>
<article id="article-5" class="article-entry">
<header class="article-header">
<h2>This is the article 5 text</h2>
</header>
<div class="article-body">
<p>This is the article 5 body</p>
</div>
</article>
<article id="article-6" class="article-entry">
<header class="article-header">
<h2>This is the article 6 text</h2>
</header>
<div class="article-body">
<p>This is the article 6 body</p>
</div>
</article>
</div>
</div>
Check this fiddle file: http://jsfiddle.net/PkZrZ/5/ to get an idea of what I am trying to achieve.
Basically, what I am trying to get from The Wordpress Loop is 1 line of 3 thumbnails (featured post's images) and beneath them post entry for each of that thumbnail, afterwards another line and so on.
I've managed to achieve something, but to be honest, it is incredibly buggy (once it worked, and afterwards it didn't) and seems wrong. Anyway, here is The Wordpress Loop I have so far:
<?php
$post_array = array();
$i = 0;
$j = 0;
$index = 0;
$post_total = $wp_query->post_count; // buggy
/*$post_total = get_term_by('name','ventures','category');
$post_total = $post_total->count;*/
// echo $post_total;
if (have_posts()) : while (have_posts()) : the_post();
$i++;
// echo $i;
$post_array[] = get_object_vars($post);
?>
<div id="post-ventures-image-<?php the_ID();?>" class="post-ventures-image">
<?php the_post_thumbnail( 'hnp-thumb-ventures-180' ); ?>
</div>
<?php if($i%3 == 0 && $post_total >= 3) : ?>
<?php for($j = 0; $j < 3; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j; $j = 0; $post_total = $post_total - 3; $i = 0; ?>
<?php elseif($i%2 == 0 && $post_total == 2 ) : ?>
<?php for($j = 0; $j < 2; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j ; $j = 0; $post_total = $post_total - 2; $i = 0; ?>
<?php elseif($i%1 == 0 && $post_total == 1) : ?>
<?php for($j = 0; $j < 1; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j + 1; $j = 0; $i = 0; ?>
<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>
I think it's out of discussion that this the worst improvized coding ever seen.
If anyone can write me a quick markup on how to write the loop that would be swell :)

Answer 1

Updated:
$posts = get_posts();
$first_three = array_chunk($posts, 3);
$count = 0;
foreach($first_three as $posts){
foreach($posts as $post){?>
<div class="article-thumbnail" data-target="article-1" >
<div class="article-open"><?php echo $post->post_title; ?></div>
</div><?php
}?>
<div class="container"><?php
foreach($posts as $post){$count++?>
<article id="article-<?php echo $count; ?>" class="article-entry">
<header class="article-header">
<h2>This is the article <?php echo $count; ?> text</h2>
</header>
<div class="article-body">
<p>This is the article <?php echo $count; ?> body</p>
</div>
</article><?php
}?>
</div><?php
}
Works perfect for me, just change the markup whatever u need or array.