<?php
require_once APPLICATION_PATH . '/modules/alw/views/helpers/Loadjs.php';
require_once APPLICATION_PATH . '/modules/alw/views/helpers/Loadingimage.php';

use Orchard\Feature\Feature;

$artistBuilderRedesign = Feature::isEnabled('artist_builder_redesign', 'enabled', $this->featureVendorContext);
$loadCdnImage = new Alw_View_Helper_Loadingimage();
$loadCdnJs = new Zend_View_Helper_loadjs();
$largeGadgetCdnPath = (APPLICATION_ENV != 'development') ? $loadCdnImage->getCdnAlwImagePath('icon_large_gadget.png') : '/images/icons/icon_large_gadget.png';
$smallGadgetCdnPath = (APPLICATION_ENV != 'development') ? $loadCdnImage->getCdnAlwImagePath('icon_small_gadget.png') : '/images/icons/icon_small_gadget.png';
$farbtasticCdnjsPath = (APPLICATION_ENV != 'development') ? $loadCdnJs->getCdnScriptPath('farbtastic.js') : '/scripts/color_wheel/farbtastic.js';
$clipboardJsCdnPath = $loadCdnJs->getCdnAlwScriptPath('clipboard.js');
?>
<script type="text/javascript" src="<?= $farbtasticCdnjsPath ?>"></script>
<?php if (!$artistBuilderRedesign) { ?>
    <script type="text/javascript" src="<?= $clipboardJsCdnPath ?>"></script>
<?php } ?>
<link href="/alw/styles/farbtastic.css" rel="stylesheet" type="text/css">
<?php if ($artistBuilderRedesign) { ?>
    <div id="content" class="content-div">
        <div id="bread">
            <a href="/artist"><?=$this->translate('All Artists')?></a>
        </div>
        <h1>
            <span><?=$this->artistImages($this->artist->artist_id, $this->artist->name);?></span> <?=(isset($this->artist) ? $this->artist->name : 'Create Artist')?>
        </h1>
        <!-- Start Artist Builder Wrap-->
        <div id="artistBuilderWrap">
            <!-- Start Left Content-->
            <div id="contentLeftsm">
                <?=$this->artistBuilderNavigation('gadget', 'navigateAway', $this->performanceArtistIndexEnabled);?>
            </div>
            <!-- End Left Content-->
            <!-- Start Right Content-->
            <div id="contentRightlg">
                <div id="artistFormWrap" class="widget-wrap">
                    <h2><?=$this->translate('Build a web widget')?></h2>
                    <div class="active-inactive-btns">
                        <a class="artists-tabs bold" id="tourDatesLink" href="/artistgadget/index/artist_id/<?=$this->artist->artist_id?>"><?=$this->translate('Tour Dates')?></a>
                        <a class="artists-tabs active bold" id="videoLink" href="/artistgadget/video/artist_id/<?=$this->artist->artist_id?>"><?=$this->translate('Video')?></a>
                        <a class="artists-tabs bold" id="photosLink" href="/artistgadget/photos/artist_id/<?=$this->artist->artist_id?>"><?=$this->translate('Photos')?></a>
                        <a class="artists-tabs bold" id="newsLink" href="/artistgadget/news/artist_id/<?=$this->artist->artist_id?>"><?=$this->translate('News')?></a>
                        <div class="clear"></div>
                    </div>
                    <div id="gadget-configure">
                        <div id="widget-size" class="col-lg-4 col-md-4 text-center">
                            <p class="lead bold"><?=$this->translate('Size')?></p>
                            <div class="gadget-options">
                                <div class="option-title bottom-space">280px</div>
                                <div class="option-preview"><img src="<?= $smallGadgetCdnPath ?>" /></div>
                                <div class="radio">
                                    <input id="video_dimension_sm" onclick="previewTourdate({'dimension':'S'})" name="dimension" type="radio" />
                                    <label for="video_dimension_sm"></label>
                                </div>
                            </div>
                            <div class="gadget-options">
                                <div class="option-title bottom-space">540px</div>
                                <div class="option-preview"><img src="<?= $largeGadgetCdnPath ?>" /></div>
                                <div class="radio">
                                    <input id="video_dimension_lg"  onclick="previewTourdate({'dimension':'L'})" name="dimension" type="radio" checked />
                                    <label for="video_dimension_lg"></label>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div id="widget-theme" class="col-lg-4 col-md-4 text-center">
                            <p class="lead bold"><?=$this->translate('Theme')?></p>
                            <div class="gadget-options">
                                <div class="option-title bottom-space"><?=$this->translate('Light')?></div>
                                <div class="option-preview"></div>
                                <div class="radio">
                                    <input id="video_theme_light" onclick="previewTourdate({'theme':'light'})" name="theme" checked type="radio" />
                                    <label for="video_theme_light"></label>
                                </div>
                            </div>
                            <div class="gadget-options">
                                <div class="option-title bottom-space"><?=$this->translate('Dark')?></div>
                                <div class="option-preview dark"></div>
                                <div class="radio">
                                    <input id="video_theme_dark" onclick="previewTourdate({'theme':'dark'})" name="theme" type="radio" />
                                    <label for="video_theme_dark"></label>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div id="widget-color" class="col-lg-4 col-md-4 text-center">
                            <p class="lead bold"><?=$this->translate('Highlight Color')?></p>
                            <ul class="color-picker">
                                <li id="colorChoice">
                                    <div id="colorDisplay"></div>
                                </li>
                                <li id="hex-choice" class="form-group">
                                    <input type="text" id="highlight" name="highlight" value="#123456" class="form-control" />
                                </li>
                                <li>
                                    <a id="colorPickBtn"></a>
                                </li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        <input type="hidden" size="55" id="tourdate_embedded_code" value=""></input>
                        <div class="row text-center">
                            <form id="embed-area-form">
                                <div id="embedCodeArea" class="col-lg-9 right-space"> </div>
                                <button class="btn btn-default left-space" id="copyEmbedCodeButton" onclick="return copyToClipboard('#embedCodeArea')" type="button"><?=$this->translate('Copy to Clipboard')?></button>
                            </form>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <!-- END gadgetConfigTourDates -->
                    <br>
                    <iframe id="orchardGadgetIframe" width="100%" scrolling=no height="1000px" frameborder="0" marginheight="0" marginwidth="0" src=""></iframe>
                    <div class="notDisplay" id="picker"></div>
                    <div class="clear"></div><br/><br/>
                </div>
            </div>
            <!-- End Right Content-->
        </div>
        <!-- End Artist Builder Wrap-->
    </div>
<?php } else { ?>
    <div id="content">
        <div id="bread">
            <a href="/artist"><?=$this->translate('All Artists')?></a>
        </div>
        <h1>Artist Builder: <?=(isset($this->artist) ? $this->artist->name : 'Create Artist')?></h1>
        <!-- Start Artist Builder Wrap-->
        <div id="artistBuilderWrap">
            <!-- Start Left Content-->
            <div id="contentLeftsm">
                <?=$this->artistBuilderNavigation('gadget', 'navigateAway', $this->performanceArtistIndexEnabled);?>
            </div>
            <!-- End Left Content-->
            <!-- Start Right Content-->
            <div id="contentRightlg">
                <div id="artistFormWrap" style="min-height: 700px;">
                    <h3><?=$this->translate('Build a web widget')?></h3>
                    <br/>
                    <ul id="gadgetPicker">
                        <li class="widgetNav">
                            <a class="widgetLink" id="tourDatesLink" href="/artistgadget/index/artist_id/<?=$this->artist->artist_id?>">Tour Dates</a>
                        </li>
                        <li class="widgetNavCurrent">
                            <a class="widgetLink" id="videoLink" href="/artistgadget/video/artist_id/<?=$this->artist->artist_id?>">Video</a>
                        </li>
                        <li class="widgetNav">
                            <a class="widgetLink" id="photosLink" href="/artistgadget/photos/artist_id/<?=$this->artist->artist_id?>">Photos</a>
                        </li>
                        <li class="widgetNav">
                            <a class="widgetLink" id="newsLink" href="/artistgadget/news/artist_id/<?=$this->artist->artist_id?>">News</a>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    <div id="gadgetConfigPhotos">
                        <div id="photosSize" class="gadgetOptionsPanel">
                            <span>size</span>
                            <div id="sizeSml" class="options">
                                <div class="optionTitle">280px</div>
                                <div class="optionPreview"><img src="/images/icons/icon_small_gadget.png" /></div>
                                <div class="radio">
                                    <input id="video_dimension_sm" onclick="previewTourdate({'dimension':'S'})" name="dimension" type="radio" />
                                    <label for="video_dimension_sm"></label>
                                </div>
                            </div>
                            <div id="sizeLrg" class="options">
                                <div class="optionTitle">540px</div>
                                <div class="optionPreview"><img src="/images/icons/icon_large_gadget.png" /></div>
                                <div class="radio">
                                    <input id="video_dimension_lg"  onclick="previewTourdate({'dimension':'L'})" name="dimension" type="radio" checked />
                                    <label for="video_dimension_lg"></label>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div id="tourdatesTheme" class="gadgetOptionsPanel">
                            <span>theme</span>
                            <div id="themeLite" class="options">
                                <div class="optionTitle">light</div>
                                <div class="optionPreview"><img src="/images/icons/icon_light_gadget.png" /></div>
                                <div class="radio">
                                    <input id="video_theme_light" onclick="previewTourdate({'theme':'light'})" name="theme" checked type="radio" />
                                    <label for="video_theme_light"></label>
                                </div>
                            </div>
                            <div id="themeDark" class="options">
                                <div class="optionTitle">dark</div>
                                <div class="optionPreview"><img src="/images/icons/icon_dark_gadget.png" /></div>
                                <div class="radio">
                                    <input id="video_theme_dark" onclick="previewTourdate({'theme':'dark'})" name="theme" type="radio" />
                                    <label for="video_theme_dark"></label>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div id="tourdatesColor" class="gadgetOptionsPanel">
                            <span>highlight color</span>
                            <div id="colorChoice" class="options">
                                <div id="colorDisplay"></div>
                                <a style="cursor:pointer" id="colorPickBtn"></a>
                            </div>
                            <div id="hexChoice" class="options form-group">
                                <input type="text" id="highlight" name="highlight" value="#123456" class="form-control" />
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        <input type="hidden" size="55" id="tourdate_embedded_code" value=""></input>
                        <div>
                            <form id="embedCodeAreaForm">
                                <div id="embedCodeArea" style="overflow:auto"> </div>
                                <button class="btn btn-default" id="copyEmbedCodeButton" onclick="copyToClipBoard()">Copy to Clipboard</button>
                            </form>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <!-- END gadgetConfigTourDates -->
                    <br>
                    <iframe id="orchardGadgetIframe" width="100%" scrolling=no height="1000px" frameborder="0" marginheight="0" marginwidth="0" src=""></iframe>
                    <div style="position:absolute;background-color:#ffffff;border:1px solid gray;display:none" id="picker"></div>
                    <div class="clear"></div><br/><br/>
                </div>
            </div>
            <!-- End Right Content-->
        </div>
        <!-- End Artist Builder Wrap-->
    </div>
<?php } ?>

<script>
var artistBuilderRedesign = <?=json_encode($artistBuilderRedesign)?>;

$('#colorPickBtn').click(function(e){
    //get the position of the placeholder element
    var pos = $('#colorPickBtn').offset();
    var width = $('#colorPickBtn').width();
    //show the menu directly over the placeholder
    if(artistBuilderRedesign){
        $('#picker').css({'left': (pos.left + width - 170) + 'px', 'top': (pos.top + 40) + 'px'});
    }else{
        $('#picker').css({'left': (pos.left + width) + 'px', 'top': pos.top + 'px'});
    }
    var is_picker_hidden = $('#picker').css('display').toString();

    if(!$('#picker').is(':hidden') && is_picker_hidden != 'none'){
        previewTourdate({'highlight': $(this).val()});
        $('.colorPickerClose').remove();
        $('#picker').hide();
    }else{
        $('#picker').show();
        if(artistBuilderRedesign){
            $('.farbtastic').append('<span class="colorPickerClose" onclick="$(\'#colorPickBtn\').click()"><a>&times;</a></span>');
        }else{
            $('.farbtastic').append('<span class="colorPickerClose" onclick="$(\'#colorPickBtn\').click()"><a>close</a></span>');
        }
    }
});

$(document).ready(function() {
    $('#picker').farbtastic('#highlight');
});
var gadgetParams = new Array();

if(!artistBuilderRedesign){
    function navMouseOver(element){
        $(element).stop().animate({width: '303px'}, 'fast');
    }
    function navMouseOut(element){
        $(element).stop().animate({width: '284px'}, 'fast');
    }
}

function previewTourdate(params){
	if($("#highlight").val()!=""){
		params["highlight"] = $("#highlight").val().replace("#","");
	}
	//append or update tourdate params array
	if(params.length != 0){
		for(var i in params){
			gadgetParams[i] = params[i];
		}
	}
	$("#orchardGadgetArea").html("Loading...");
	var width = params.width;
	var param_arr = new Array();

	for(var j in gadgetParams){
		param_arr.push(j+"="+gadgetParams[j]);
	}
	var uid = "<?=md5(time())?>";
	var domain = "<?=$this->domain?>";
	var embed_code = domain+"/gadget/index?format=xml&xml="+encodeURIComponent(domain+"/gadget/video/index?format=xml&artist_id=<?=$this->artist->artist_id?>&"+param_arr.join("&"));
	var js_path = domain+"/gadget/index?format=xml&ifr=1&uid="+uid+"&xml="+encodeURIComponent(domain+"/gadget/video/index?format=xml&artist_id=<?=$this->artist->artist_id?>&"+param_arr.join("&"));
	var iframe_src = domain+'/gadget/index?xml='+encodeURIComponent(domain+"/gadget/video/index?format=xml&artist_id=<?=$this->artist->artist_id?>&"+param_arr.join("&"));
	$("#orchardGadgetIframe").attr('src',iframe_src);
	$("#embedCodeArea").html('\&lt;div style="width:'+(gadgetParams["dimension"]=="L" ? "540px":"280px")+';" id="div'+uid+'"\&gt;\&lt;\/div\&gt;\&lt;script type="text/javascript" src="'+js_path+'"\&gt;\&lt;\/script\&gt;');
}
previewTourdate({"dimension":"L"});
</script>
<script>
if(!artistBuilderRedesign){
    var domain = "https://<?=$_SERVER['HTTP_HOST']?>";
	ZeroClipboard.setMoviePath(domain+'/clipboard.swf' );
	var clip = new ZeroClipboard.Client();
	clip.glue( 'copyEmbedCodeButton' );
	clip.setHandCursor( true );

	clip.addEventListener( 'mouseDown', function(client) {
		 var clipboardText = document.getElementById('embedCodeArea').innerHTML;
		 clipboardText = clipboardText.replace(/&lt;/g,"<");
		 clipboardText = clipboardText.replace(/&gt;/g,">");
         clip.setText(clipboardText);
 	});
}
</script>
