<?php

/**
 * The template used for displaying page content in page.php
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>

<div id="spf-top">
    <div id="image">
    <?php echo wp_get_attachment_image(get_field('spf_image'), 'single-featured-square'); ?>
    </div>

    <div id="top-tabs">
        <ul>
            <?php
            if (get_field('spf_top_menu')) {
                    $cnt=1;
                    $tabcontent = array();
                while (has_sub_field('spf_top_menu')) {
                    $tabid = 'tab-'.$cnt;
                    $tabcontent[] = get_sub_field('tab_content');
                    echo '<li id="'.$tabid.'">';
                    //echo '<a href=""></a>';
                    the_sub_field('menu_item');
                    echo '</li>';
                    $cnt++;
                }
            }
            ?>
        </ul>
        <div id="top-tabs-content"> <?php echo $tabcontent[0]; ?> </div>
        <script>
        $(function() {
        $('#tab-1').click(function() {
            alert('click event called!'); var tabcontent = "'" + "<?php echo $tabcontent[0];?>" + "'";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
        });
        });

        $(function() {
        $('#tab-2').click(function() {
          alert('click event called!'); var tabcontent = "'" + "<?php echo $tabcontent[1];?>" + "'";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
        });
        });

        $(function() {
        $('#tab-3').click(function() {
          alert('click event called!'); var tabcontent = "'" + "<?php echo $tabcontent[2];?>" + "'";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
        });
        });

        $(function() {
        $('#tab-4').click(function() {
        alert('click event called!'); var tabcontent = "'" + "<?php echo $tabcontent[3];?>" + "'";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
        });
        });

        $(function() {
        $('#tab-5').click(function() {
        alert('click event called!');  var tabcontent = "'" + "<?php echo $tabcontent[4];?>" + "'";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
        });
        });
        </script>

    </div>
<div style="clear:both;"></div>
</div>