<?php

$raw_image_path = ''; //init as actual Id will be replaced to artistPhotoDimModal using JS  ?>
<!-- wrapper element for the large image -->
<div id="image_wrap">
    <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
    <div>
        <img src="http://static.flowplayer.org/tools/img/blank.gif" /><br />
        <a class="artistPhotoDimModal top-space" href="/artistphotos/downloadimage?image_path=<?=$raw_image_path?>"></a>
        <a class="artistPhotoDimModalCaption top-space">caption</a>
    </div>
</div>
<!-- "previous page" action -->
<a class="artist-photo-scroll-arrow prev browse left navigation_arrows"></a>
<!-- root element for scrollable -->
    <div class="scrollable image-scroll-panel">
   <!-- root element for the items -->
   <div class="items">

    <?php
        //Initialize arrays
        $raw_image_path_array = array();
        $raw_image_height_array = array();
        $raw_image_width_array = array();
        $display_image_height_array = array();
        $display_image_width_array = array();
        $photo_captions = array();
    
        $data = array();
        $count = 0;
        $j = 0;
    foreach ($this->artistPhotos as $key => $record) {
        $data[$j][] = $record;
        $count++;
        if ($count == $this->images_per_row) {
            $count = 0;
            $j++;
        }
    }
    foreach ($data as $artistInfo) {
        echo '<div class="scrollable-items-list">';
        foreach ($artistInfo as $artistPhoto) {
            $web_image_asset_id = $artistPhoto->ArtistWebImages->image_asset_id;
            $raw_image_detail = Model_ImageAssets::getImageAssetsByID($artistPhoto->image_asset_id);

            $artistWebImageUrl = '';
            $artistPhotosImageUrl = '';
            if (!empty($artistPhoto->artist_photo_id)) {
                $artistWebImageUrl = $this->owsAssetsServiceClient->getImageAssets($artistPhoto->artist_photo_id, 'artist', 'web');
                $artistPhotosImageUrl = $this->owsAssetsServiceClient->getImageAssets($artistPhoto->artist_photo_id, 'artist', 'photos');
            }
            if ($artistPhotosImageUrl) {
                $raw_image_path = $artistPhotosImageUrl;
            } else {
                $service_obj = new Service_ManageImageAssets();
                $raw_image_path = $service_obj->getImage($artistPhoto->image_asset_id);
            }
            $selected_photo = isset($this->selected_photo) ? ($this->selected_photo == $artistPhoto->artist_photo_id) : false;
            /** get image from service  */
            $imagePath = '';

            if ($artistWebImageUrl) {
                $imagePath = $artistWebImageUrl;
                $raw_image_path_array[$imagePath] = $raw_image_path;
                $raw_image_id_array[$imagePath] = 0;
                $imagick = new Imagick($artistPhotosImageUrl);
                $raw_image_height_array[$imagePath] = $imagick->getImageHeight();
                $raw_image_width_array[$imagePath] = $imagick->getImageWidth();
                $imagePathInfo = pathinfo($imagePath);
                $imageFile =  $imagePathInfo['filename'] . '.' . $imagePathInfo['extension'];
                $imageFilePath = preg_replace('/'.$imageFile.'$/', '', $imagePath);

                $imageStats = Web_ImageUtility::getDimension($imageFilePath, $imageFile);
                list($display_image_width, $display_image_height) = Web_ImageUtility::getImageRatio($imageStats[0], $imageStats[1], 480, 464);
                $display_image_height_array[$imagePath] = $display_image_height;
                $display_image_width_array[$imagePath] = $display_image_width;
                list($width, $height) = Web_ImageUtility::scaleImage($imageStats[0], $imageStats[1], 92, 92);
                $image = '<span class="modal-in-wrap"><img '.($selected_photo ? 'class="selected_photo square-image"' : 'class="square-image"').' src="' . $imagePath . '" alt="' . $artistPhoto->caption . '" height="'  .$height . '" width="' . $width .'" /></span>';
            } elseif ($artistPhotosImageUrl) {
                $imagePath = $raw_image_path;
                /** get correct aspect ratio for image from image utility */
                $imagePathInfo = pathinfo($imagePath);
                $imageFile =  $imagePathInfo['filename'] . '.' . $imagePathInfo['extension'];
                $raw_image_path_array[$imagePath] = $raw_image_path;
                $raw_image_id_array[$imagePath] = 0;
                $imagick = new Imagick($artistPhotosImageUrl);
                $raw_image_height_array[$imagePath] = $imagick->getImageHeight();
                $raw_image_width_array[$imagePath] = $imagick->getImageWidth();
                $imageFilePath = preg_replace('/'.$imageFile.'$/', '', $imagePath);

                $imageStats = Web_ImageUtility::getDimension($imageFilePath, $imageFile);
                      list($display_image_width, $display_image_height) = Web_ImageUtility::getImageRatio($imageStats[0], $imageStats[1], 618, 464);
                $display_image_height_array[$imagePath] = $display_image_height;
                $display_image_width_array[$imagePath] = $display_image_width;
                      list($width, $height) = Web_ImageUtility::scaleImage($imageStats[0], $imageStats[1], 92, 92);
                $image = '<span class="modalTnWrap"><img '.($selected_photo ? 'class="selected_photo"' : '').' src="' . $imagePath . '" alt="' . $artistPhoto->caption . '" height="' . $height . '" width="' . $width . '"/></span>';
            } else {
                if ($web_image_asset_id) {
                    $service_obj = new Service_ManageImageAssets();
                    $imagePath = $service_obj->getImage($web_image_asset_id);
                    $raw_image_path_array[$imagePath] = $raw_image_path;
                    $raw_image_id_array[$imagePath] = $artistPhoto->image_asset_id;
                    $raw_image_height_array[$imagePath] = $raw_image_detail->height;
                    $raw_image_width_array[$imagePath] = $raw_image_detail->width;
                    $imagePathInfo = pathinfo($imagePath);
                    $imageFile =  $imagePathInfo['filename'] . '.' . $imagePathInfo['extension'];
                    $imageFilePath = preg_replace('/'.$imageFile.'$/', '', $imagePath);

                    $imageStats = Web_ImageUtility::getDimension($imageFilePath, $imageFile);
                    list($display_image_width, $display_image_height) = Web_ImageUtility::getImageRatio($imageStats[0], $imageStats[1], 480, 464);
                    $display_image_height_array[$imagePath] = $display_image_height;
                    $display_image_width_array[$imagePath] = $display_image_width;
                    list($width, $height) = Web_ImageUtility::scaleImage($imageStats[0], $imageStats[1], 92, 92);
                    $image = '<span class="modal-in-wrap"><img '.($selected_photo ? 'class="selected_photo square-image"' : 'class="square-image"').' src="' . $imagePath . '" alt="' . $artistPhoto->caption . '" height="'  .$height . '" width="' . $width .'" /></span>';
                } else {
                    $imagePath = $raw_image_path;
                    /** get correct aspect ratio for image from image utility */
                    $imageFile = $artistPhoto->ImageAssets->filename;
                    $raw_image_path_array[$imagePath] = $raw_image_path;
                    $raw_image_id_array[$imagePath] = $artistPhoto->image_asset_id;
                    $raw_image_height_array[$imagePath] = $raw_image_detail->height;
                    $raw_image_width_array[$imagePath] = $raw_image_detail->width;
                    $imageFilePath = preg_replace('/'.$imageFile.'$/', '', $imagePath);

                    $imageStats = Web_ImageUtility::getDimension($imageFilePath, $imageFile);
                          list($display_image_width, $display_image_height) = Web_ImageUtility::getImageRatio($imageStats[0], $imageStats[1], 618, 464);
                    $display_image_height_array[$imagePath] = $display_image_height;
                    $display_image_width_array[$imagePath] = $display_image_width;
                          list($width, $height) = Web_ImageUtility::scaleImage($imageStats[0], $imageStats[1], 92, 92);
                    $image = '<span class="modalTnWrap"><img '.($selected_photo ? 'class="selected_photo"' : '').' src="' . $imagePath . '" alt="' . $artistPhoto->caption . '" height="' . $height . '" width="' . $width . '"/></span>';
                }
            }
            $raw_photo_image_id_array[$imagePath] = $artistPhoto->artist_photo_id;
            $photo_captions[$imagePath] = $artistPhoto->caption;
            ?>

                <?=$image;?>
            <?php
        }
        echo '</div>';
        ?>
        <?php
    }
    ?>
   </div>

</div>

<!-- "next page" action -->
<a class="artist-photo-scroll-arrow next browse right navigation_arrows"></a>
<script>
var image_hires_map = new Object;
var image_hires_height = new Object;
var image_hires_width = new Object;
var photo_captions = new Object;

image_hires_map = <?=json_encode($raw_image_path_array)?>;
image_hires_id_map = <?=json_encode($raw_image_id_array)?>;
image_photo_id_map = <?=json_encode($raw_photo_image_id_array)?>;
image_hires_height = <?=json_encode($raw_image_height_array)?>;
image_hires_width = <?=json_encode($raw_image_width_array)?>;
photo_captions = <?=json_encode($photo_captions)?>

image_web_height = <?=json_encode($display_image_height_array)?>;
image_web_width = <?=json_encode($display_image_width_array)?>;


//alert(image_hires_map.toSource());
$(".scrollable").scrollable();

$(".items img").click(function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }
    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");
    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("fast", 1);
    // the large image from www.flickr.com
    var img = new Image();
    // call this function after it's loaded
    img.onload = function() {
        // make wrapper fully visible
        //wrap.fadeTo("fast", 1);
        // change the image
        wrap.find("img").attr("src", url);
        wrap.find("img").attr("height", image_web_height[url]);
        wrap.find("img").attr("width", image_web_width[url]);
    };
    // begin loading the image from www.flickr.com
    img.src = url;
    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

    $("#image_wrap a.artistPhotoDimModal").attr("href","/artistphotos/downloadimage?image_id="+image_hires_id_map[url]+"&artistPhotoId="+image_photo_id_map[url]);
    $("#image_wrap a.artistPhotoDimModalCaption").html(photo_captions[url]);

    $('a.artistPhotoDimModal').html('size: ' + image_hires_width[url] + ' x ' + image_hires_height[url]);
    $("a.artistPhotoDimModal").mouseout(function(){
        $('a.artistPhotoDimModal').html('size: ' + image_hires_width[url] + ' x ' + image_hires_height[url]);
    });
// when page loads simulate a "click" on the first image
}).filter(":first").click();

$(".selected_photo").click();

$("#modalWindow").css("width",800);
<?php
    if ($this->artistPhotos->count() <= 4) {
        ?>
        $(".navigation_arrows").hide();
        <?php
    }
?>
$("a.artistPhotoDimModal").mouseover(function(){
    $('a.artistPhotoDimModal').html('download original');
});

</script>
