<?php
require_once APPLICATION_PATH . '/modules/alw/views/helpers/Loadjs.php';
require_once APPLICATION_PATH . '/modules/alw/views/helpers/Loadingimage.php';

$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';
?>
<script type="text/javascript" src="<?= $farbtasticCdnjsPath ?>"></script>
<link href="/alw/styles/farbtastic.css" rel="stylesheet" type="text/css">

<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 active bold" id="tourDatesLink" href="/artistgadget/index/artist_id/<?=$this->artist->artist_id?>"><?=$this->translate('Tour Dates')?></a>
                    <a class="artists-tabs 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="tourdates_dimension_sm" onclick="previewTourdate({'dimension':'S'})" name="dimension" type="radio" />
                                <label for="tourdates_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="tourdates_dimension_lg" onclick="previewTourdate({'dimension':'L'})" name="dimension" type="radio" checked />
                                <label for="tourdates_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="tourdates_theme_light" onclick="$('#highlight').val('#123456'); $('#highlight').css({'color':'#ffffff','backgroundColor':'#123456'}); $('#colorDisplay').css('backgroundColor','#123456'); previewTourdate({'theme':'light'})" name="theme" checked type="radio" />
                                <label for="tourdates_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="tourdates_theme_dark" onclick="$('#highlight').val('#ffffff'); $('#highlight').css({'color':'#000000','backgroundColor':'#ffffff'}); $('#colorDisplay').css('backgroundColor','#ffffff'); previewTourdate({'theme':'dark'})" name="theme" type="radio" />
                                <label for="tourdates_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 onClick="this.contentEditable='true';" 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="orchardTourdateGadgetIframe" width="100%" scrolling=no height="400px" frameborder="0" marginheight="0" marginwidth="0" src=""></iframe>
                <div class="notDisplay" id="picker">
                    <div class="clear"></div>
                </div>
                <div class="clear"></div><br/><br/>
            </div>
            <!-- End Right Content-->
        </div>
        <!-- End Artist Builder Wrap-->
    </div>
</div>

<script>
$('iframe').load(
    function()
    {
        $('iframe').contents().find('#tourdate_list').addClass('tour-date-item-list');
    }
);

$('#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
    $('#picker').css({'left': (pos.left + width - 170) + 'px', 'top': (pos.top + 40) + '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();
        $('.farbtastic').append('<span class="colorPickerClose" onclick="$(\'#colorPickBtn\').click()"><a>&times;</a></span>');
    }
});

$(document).ready(function() {
    $('#picker').farbtastic('#highlight');
});
var tourdateParams = new Array();

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){
			tourdateParams[i] = params[i];
		}
	}
	var width = params.width;
	var param_arr = new Array();

	for(var j in tourdateParams){
		param_arr.push(j+"="+tourdateParams[j]);
	}
	var uid = "<?=md5(time())?>";
	var domain = "<?=$this->domain?>";
	var embed_code = domain+"/gadget/index?format=xml&xml="+encodeURIComponent(domain+"/gadget/tourdate/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/tourdate/index?format=xml&artist_id=<?=$this->artist->artist_id?>&"+param_arr.join("&"));
	var iframe_src = domain+'/gadget/index?xml='+encodeURIComponent(domain+"/gadget/tourdate/index?format=xml&artist_id=<?=$this->artist->artist_id?>&"+param_arr.join("&"));
	$("#embedCodeArea").html('\&lt;div style="width:'+(tourdateParams["dimension"]=="L" ? "540px":"280px")+';height:'+(tourdateParams["dimension"]=="L" ? "337px":"337px")+'" id="div'+uid+'"\&gt;\&lt;\/div\&gt;\&lt;script type="text/javascript" src="'+js_path+'"\&gt;\&lt;\/script\&gt;');
	$("#orchardTourdateGadgetIframe").attr('src',iframe_src);
}
$('#highlight').val('#123456');
$('#colorDisplay').css('backgroundColor','#123456');
previewTourdate({"theme":"light","dimension":"L"});
</script>
